Geliştirilmiş Son Yayınlar Blogger Eklentisi

Reply
, ,
A+ A-
Yazdır Email
https://weblogizmedya.blogspot.com/2014/06/gelistirilmis-son-yaynlar-blogger.html
Merhaba WeBlogizm Takipçileri,

Bugün çok aranan ama Türkçe olarak ne anlatımı nede kodları mevcut olduğunu gördüğüm bir blogger eklentisini sizler ile tanıtım, inceleyip, sunacağım. Eklenti genel olarak kayan son yayınlar ve geliştirilmiş olarak bir barı mevcut. Bar içinde sosyal ağlar ve arama kutucuğu bulunuyor. Kayan dedim ama kaymıyor üstte geçiş yapıyor yani bir şekilde değişiyor.

Widget HTML ve CSS ile oluşturulmuştur. Haydi kodları sitemize ekleyelim.

DEMO

Geliştirilmiş Son Yayınlar Blogger Eklentisi


CSS Kodları Ekleyiniz

İlk önce Blogger Şablon Yöneticimiz (Blogger ana sayfamız ve Sonra Şablonlara) 'a girelim. CTRL ve F tuşlarına tıklayarak </b:skin> kodunu arıyoruz. Bulduğunuz kodun üst tarafına aşağıdaki kodları ekliyoruz.

#content-top {
    background: #fff;
    border: 1px solid #ccc;
    float: left;
    margin-bottom: 20px;
    width: 958px;
    height: 30px;
    }
#ticker {
    float: left;
    width: 498px;
    }
ul.ticker-list {
    display: block;
    float: left;
    overflow: hidden;
    width: 423px;
    height: 30px;
    margin-top: -30px;
    margin-left: 50px;
    }
ul.ticker-list li {
    display: block;
    font: 500 12px/12px Open Sans Condensed, sans-serif;
    height: 12px;
    overflow: hidden;
    padding: 9px;
    width: 370px;
    }
.ticker-heading {
    background: #fff;
    border-right: 1px solid #ccc;
    color: #ca0002;
    float: left;
    font: 700 12px/12px Open Sans Condensed, sans-serif;
    padding: 9px;
    text-transform: uppercase;
    }
#ticker a {
    color: #555;
    font: 700 12px/12px Open Sans, sans-serif;
    }
.ticker-date {
    color: #999;
    font: 10px/10px helvetica, arial, sans-serif;
    margin-left: 10px;
    }
#content-social {
    float: right;
    width: 271px;
    margin-right: 189px;
    }
#content-social ul {
    display: inline;
    float: right;
    }
#content-social ul li {
    border-left: 1px solid #ccc;
    display: inline;
    float: left;
    overflow: hidden;
    }
.fb-but, .twitter-but, .pinterest-but, .google-but, .linkedin-but, .rss-but {
    float: left;
    -moz-transition: all 0.1s;
    -o-transition: all 0.1s;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    width: 30px;
    height: 30px;
    }
.fb-but {
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSi8SIeh0SmRUsI9C4g5Kh4cp-p8XEA4QoWmDqoP7G9sCbP2KSP1wwtrOYyPzu1KBPqYDJnsIhBnihJq-kWHlg4X5tm53gpsiFlplD3CenB4vfc4c_oPdNs41QGMn9a781JsoTg2b9jZuH/s1600/Social-Buttons.png) 0 0px;
    }
.fb-but:hover {
    background: #3b5997 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSi8SIeh0SmRUsI9C4g5Kh4cp-p8XEA4QoWmDqoP7G9sCbP2KSP1wwtrOYyPzu1KBPqYDJnsIhBnihJq-kWHlg4X5tm53gpsiFlplD3CenB4vfc4c_oPdNs41QGMn9a781JsoTg2b9jZuH/s1600/Social-Buttons.png) 0 -30px;
    }
.twitter-but {
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSi8SIeh0SmRUsI9C4g5Kh4cp-p8XEA4QoWmDqoP7G9sCbP2KSP1wwtrOYyPzu1KBPqYDJnsIhBnihJq-kWHlg4X5tm53gpsiFlplD3CenB4vfc4c_oPdNs41QGMn9a781JsoTg2b9jZuH/s1600/Social-Buttons.png) -30px 0px;
    }
.twitter-but:hover {
    background: #00aced url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSi8SIeh0SmRUsI9C4g5Kh4cp-p8XEA4QoWmDqoP7G9sCbP2KSP1wwtrOYyPzu1KBPqYDJnsIhBnihJq-kWHlg4X5tm53gpsiFlplD3CenB4vfc4c_oPdNs41QGMn9a781JsoTg2b9jZuH/s1600/Social-Buttons.png) -30px -30px;
    }
.pinterest-but {
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSi8SIeh0SmRUsI9C4g5Kh4cp-p8XEA4QoWmDqoP7G9sCbP2KSP1wwtrOYyPzu1KBPqYDJnsIhBnihJq-kWHlg4X5tm53gpsiFlplD3CenB4vfc4c_oPdNs41QGMn9a781JsoTg2b9jZuH/s1600/Social-Buttons.png) -60px 0px;
    }
.pinterest-but:hover {
    background: #cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSi8SIeh0SmRUsI9C4g5Kh4cp-p8XEA4QoWmDqoP7G9sCbP2KSP1wwtrOYyPzu1KBPqYDJnsIhBnihJq-kWHlg4X5tm53gpsiFlplD3CenB4vfc4c_oPdNs41QGMn9a781JsoTg2b9jZuH/s1600/Social-Buttons.png) -60px -30px;
    }
.google-but {
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSi8SIeh0SmRUsI9C4g5Kh4cp-p8XEA4QoWmDqoP7G9sCbP2KSP1wwtrOYyPzu1KBPqYDJnsIhBnihJq-kWHlg4X5tm53gpsiFlplD3CenB4vfc4c_oPdNs41QGMn9a781JsoTg2b9jZuH/s1600/Social-Buttons.png) -90px 0px;
    }
.google-but:hover {
    background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSi8SIeh0SmRUsI9C4g5Kh4cp-p8XEA4QoWmDqoP7G9sCbP2KSP1wwtrOYyPzu1KBPqYDJnsIhBnihJq-kWHlg4X5tm53gpsiFlplD3CenB4vfc4c_oPdNs41QGMn9a781JsoTg2b9jZuH/s1600/Social-Buttons.png) -90px -30px;
    }
.youtube-but {
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSi8SIeh0SmRUsI9C4g5Kh4cp-p8XEA4QoWmDqoP7G9sCbP2KSP1wwtrOYyPzu1KBPqYDJnsIhBnihJq-kWHlg4X5tm53gpsiFlplD3CenB4vfc4c_oPdNs41QGMn9a781JsoTg2b9jZuH/s1600/Social-Buttons.png) -120px 0;
    float: left;
    -moz-transition: all 0.1s;
    -o-transition: all 0.1s;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    width: 54px;
    height: 30px;
    }
.youtube-but:hover {
    background: #f00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSi8SIeh0SmRUsI9C4g5Kh4cp-p8XEA4QoWmDqoP7G9sCbP2KSP1wwtrOYyPzu1KBPqYDJnsIhBnihJq-kWHlg4X5tm53gpsiFlplD3CenB4vfc4c_oPdNs41QGMn9a781JsoTg2b9jZuH/s1600/Social-Buttons.png) -120px -30px;
    }
.linkedin-but {
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSi8SIeh0SmRUsI9C4g5Kh4cp-p8XEA4QoWmDqoP7G9sCbP2KSP1wwtrOYyPzu1KBPqYDJnsIhBnihJq-kWHlg4X5tm53gpsiFlplD3CenB4vfc4c_oPdNs41QGMn9a781JsoTg2b9jZuH/s1600/Social-Buttons.png) -174px 0px;
    }
.linkedin-but:hover {
    background: #069 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSi8SIeh0SmRUsI9C4g5Kh4cp-p8XEA4QoWmDqoP7G9sCbP2KSP1wwtrOYyPzu1KBPqYDJnsIhBnihJq-kWHlg4X5tm53gpsiFlplD3CenB4vfc4c_oPdNs41QGMn9a781JsoTg2b9jZuH/s1600/Social-Buttons.png) -174px -30px;
    }
.rss-but {
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSi8SIeh0SmRUsI9C4g5Kh4cp-p8XEA4QoWmDqoP7G9sCbP2KSP1wwtrOYyPzu1KBPqYDJnsIhBnihJq-kWHlg4X5tm53gpsiFlplD3CenB4vfc4c_oPdNs41QGMn9a781JsoTg2b9jZuH/s1600/Social-Buttons.png) -204px 0px;
    }
.rss-but:hover {
    background: #f60 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSi8SIeh0SmRUsI9C4g5Kh4cp-p8XEA4QoWmDqoP7G9sCbP2KSP1wwtrOYyPzu1KBPqYDJnsIhBnihJq-kWHlg4X5tm53gpsiFlplD3CenB4vfc4c_oPdNs41QGMn9a781JsoTg2b9jZuH/s1600/Social-Buttons.png) -204px -30px;
    }
#searchform {
    float: right;
    position: relative;
    }
#searchform input {
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitrp5kzUmNPgJ8PR4SPkEEdXEi3CkJFSvvVDRAiddIGDLXsBjoHj8VZsuFN1KHSqnikFGGQ3ATAkYpeOhI8mI_P5zYo7t-l-ltRcBbvWoYRqoyBA-ws6fzfeNKOewLDiA_GYLpkXPKhyphenhyphen5R/s1600/searchd.png) no-repeat right 50%;
    border: none;
    color: #777;
    float: left;
    font: 400 12px/30px Open Sans, sans-serif;
    margin: 0;
    padding: 0 0 0 10px;
    width: 200px;
    height: 30px;
    margin-top: -50px;
    border-left: 1px solid #ddd;
    }
#searchform #search-button {
    border: none;
    float: left;
    }
#searchform #s:focus {
    outline: none;
    }

Şimdi ise yeniden CTRL ve F tuşları yardımıyla </ head> kodunu arıyoruz. Kodu bulduktan sonra aşağıdaki kodları yukarısına ekliyoruz. Ardından Şablonu Düzenle/Kaydet deyip, Şablon sekmesinden çıkış yapınız.

jQuery (document) <script> ready (function ($) {var ticker = function () {setTimeout (function () {$ ("ul.ticker-list li: Önce"..) {(marginTop animasyon: & # 39,..-30px '}, 800, function () {$ (this) ayırmak () appendTo ("ul.ticker-list") removeAttr ("style");.}); senedi () ;}, 5000);} senedi ();}); </ Script>
Şimdi ise Yerleşim sekmesine geliniz. Widget ekle "HTML" widgeti seçin ve gelen alana aşağıdaki kodları ekleyiniz.

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:400,700);
position:absolute;
</style>
<div id="content-top">
    <div id="ticker">
      <span class="ticker-heading">Son Yayınlar</span>
      <ul class="ticker-list">
<li><a href="http://www.weblogizm.com/2013/07/nokia-lumia-1020-rolling-out-soon-41-mp.html">Nokia Lumia 1020 Rolling Out Soon</a><span class="ticker-date">Check out now!</span></li>
<li><a href="http://www.weblogizm.com/2013/03/hp-slate-7-vs-asus-google-nexus-7.html">HP Slate 7 vs Google Nexus 7</a><span class="ticker-date">Check out now!</span></li>
<li><a href="http://www.weblogizm.com/2013/02/10-best-free-blogger-templates-for-2013.html">10 Best Free Blogger Templates For 2013</a><span class="ticker-date">Check out now!</span></li>
<li><a href="http://www.weblogizm.com/2013/07/how-to-add-author-box-in-blogger.html">How To Add Author Box In Blogger</a><span class="ticker-date">Check out now!</span></li><li><a href="http://www.weblogizm.com/2013/03/how-to-root-sony-xperia-z-complete.html">How To Root Sony Xperia Z</a><span class="ticker-date">Check out now!</span></li></ul>
    </div><!--ticker-->
    <div id="content-social">
   
<ul>
        <li><a alt="Facebook" class="fb-but" href="http://www.facebook.com/weblogizm" target="_blank"></a></li>
        <li><a alt="Twitter" class="twitter-but" href="http://www.twitter.com/weblogizm" target="_blank"></a></li>
        <li><a alt="Pinterest" class="pinterest-but" href="http://pinterest.com/weblogizm/" target="_blank"></a></li>
        <li><a alt="Google Plus" class="google-but" href="https://plus.google.com/+weblogizmedya" target="_blank"></a></li>
        <li><a alt="YouTube" class="youtube-but" href="http://www.youtube.com/user/weblogizmtv" target="_blank"></a></li>
        <li><a alt="RSS Feed" class="rss-but" href="http://feeds.feedburner.com/weblogizm"></a></li>
     
</ul>
    </div><!--content-social-->
<div class="search-wrapper">
            <div class="search-box" style=" ">
              <form action="/search" id="searchform" method="get">
                <input id="q" name="q" onblur="if (this.value == &quot;&quot;) { this.value = &quot;Search site&quot;; }" onfocus="if (this.value == &quot;Search site&quot;) { this.value = &quot;&quot;; }" type="text" value="Search site" /> <input id="search-button" type="hidden" />
              </form>
            </div><!--search-box-->
          </div></div>

Evet  kodları ekledik ve son yayınlar barımızı oluşturduk. Manuel bir bar istediğimiz gibi konuları değiştirebilirsiniz. Otomatik barları bulmak için sitemizi dolaşabilirsiniz. Otomatik son yayınlar barı yakında paylaşılacaktır. Bu yazıyı paylaşarak bize destek olabilirsiniz.
Gönderen

Benzer Yayınlar

Son Yayınlar 2006983042278936618
Sonraki Kayıt Önceki Kayıt Ana Sayfa item

Yorum GönderNormal Yorum

emo-but-icon

Tabs

Google Reklamları

Son Yayın

Reklam

Tavsiye Bağlantılar
Lokmacı

Popüler Yayınlar

  • Erkekler kaşlarını nasıl almalılardır ?
      erkekler kaş alır mı  erkekler kaş alma  erkekler kaş aldırır mı  erkekler kaş almak günah mı  erkekler kaş alması günahmıdır  ...
  • Altın fiyatları son 4 ayın zirvesine çıktı
    Altın fiyatları son 4 ayın zirvesinde . Yeni yıl ile beraber yükselirken iki ayda tam yüzde 11 yükselme gerçekleşti. Uluslararası piyas...
  • Mozilla 55 Liralık Telefon Üretecek !
    Mozilla firması firefox işletim sistem ile çalışan cihazlar üretmek için karar almış bulunuyorlar. Mozilla tarafından yapılan resmi açıkl...
  • İnsan kaç gün uyumadan durabilir?
    Uyumak , bir çocuk için büyümek gelişmek , diğer bireyler içinde rahatlamak anlamına gelir.  Peki ya uyumadan kaç gün geçirebiliriz? ...
  • Fuck Buddy (Fakbadi) Nedir?
    Günümüzde çok popüler olan bir ilişki türüdür. Kadın ve erkek arasında olan cinsel birlikteliktir ama asla duygu ile yürüyen bir ilişki deği...
  • Rem ve Nrem Uykusu
    İnsanlar her kafasını yastığa koyduğunda iki tür uyku türüne geçiş yapar. Uykumuzda ya derin bir uyku pozisyonuna geçeriz yada hafif bir u...
item