Blogger yayınlarının üst kısmına popüler post slaytı ekleyin

Son 4 yıldır bir çok ünlü websiteleri yayınlarının üst kısmına slayt eklemektedir.Hangi güçlü ve ünlü websiteye girerseniz bunu görürsünüz.Bu durum okuyucuların websitenizde veya blogunuzda gezmesi kolaylaştırarak site kullanılabilirliğini artırmaktadır.Ekleyeceğiniz bu popüler post galeri veya slayt en popüler 10 yayınınızı gösterir.Alttaki resimde olduğu gibi:






Bu galeri veya slayt eklemden önce şablonunuzu yüklemeyi veya kaydetmeyi unutmayın çünkü bu galeri bazı şablonlar için uygun değil.Bunu eklemek için aşağıdaki adımları izleyin:


Adım 1:Blogger hesabınıza giriş yapınız sırasıyla Şablon>HTML'yi düzenle bölümlerine gidiniz.


Adım 2:HTML kodu içinde herhangi bir yere tıklayın ve CTRL+F kombinasyonunu kullanarak
]]></b:skin> kodu bulun.


Adım 3:Yukarıda bulduğunuz kodun hemen üstüne aşağıdaki kodu ekleyin:

#gallery{position:relative;margin:0 35px 20px;
width:590px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-
#gallery .belt{position:absolute;top:0;left:0;list-
#gallery .belt{position:absolute;top:0;left:0;list-
#gallery .belt{position:absolute;top:0;left:0;list-#gallery .belt{position:absolute;top:0;left:0;list-#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWcgwwtOe3wtiyMLMDH9R95FiskVQ19htZszEPcd6amJtHzuHMo4HWJ-Egv0_GWOIii3bKcUOztLwj4ottjtdSTU-RMSJF8dgZlzMdAOQs5G_f9ZxvpTBqcCEOeRhapvj3amt322zh7frm/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

Not:galerinizin veya slaytınızın boyutlarını kırmızı renkle belirtilen rakamlarla(590 ve 126) oynayarak değiştirebilirsiniz.

Adım 4:Şimdi </head> kodunu bulun.

Adım 5: bulduğunuz </head> kodun üstüne aşağıdaki kodu yapıştırın:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[stepcarousel.setup({galleryid: "gallery",beltclass: "belt",panelclass: "panel",autostep: {enable:true, moveby:1, pause:6000},panelbehavior: {speed:500, wraparound:true, persist:true},defaultbuttons: {enable: true, moveby: 2, leftnav: ["http://2.bp.blogspot.com/-0Iss3Wjr36Q/T393U65TcKI/AAAAAAAABq4/K_uzwyuNzrE/s1600/prev.png", -40, 36], rightnav: ["http://1.bp.blogspot.com/-DtspeRHclnQ/T393WdyB8EI/AAAAAAAABrA/TKHickb2iI8/s1600/next.png", 2, 36]},contenttype: ["external"]})//]]></script>

Bundan sonra yapmanız gereken galeriyi postlarınızın üstüne yerleştirmektir bunu yapmak için:

Adım 6:Alttaki kodu CTRL+F kombinasyonu yardımıyla bulun:

<b:section class='main' id='main' showaddelement='yes'>

Eğer bulamadıysanız alttaki kodu deneyin:

<b:section class='main' id='main' showaddelement='no'>

Adım 7:yukarıda bulduğunuz kodun hemen altına aşağıdaki kodu ekleyin:

<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'><b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'><div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'> <div id='gallery'> <ul class='belt'> <b:loop values='data:posts' var='post'> <li class='panel'> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> <b:else/> <div class='item-title'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> </div> <div class='item-snippet'> <data:post.snippet/> </div> </b:if> <b:else/> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'> <b:if cond='data:post.thumbnail'> <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/> <b:else/> <img alt='no image' src='http://2.bp.blogspot.com/-mRxY2oEkLJc/T393wpt0z_I/AAAAAAAABrI/4blMjDaSOUY/s1600/no-image.PNG'/> </b:if> </a> </b:if> </li> </b:loop> </ul> </div></div></b:if> </b:includable></b:widget>

Not:Eğer slaytların ana sayfa dışında da gözükmesini istiyorsanız yeşil renkle belirtilen yerleri silin.

Adım 8:Yaptığınız değişiklikleri bir daha kontrol ettikten sonra şablonunuzu kaydettin.