Blogger Kayan Yazı Kurulumu Nasıl Yapılır?

Blogger için hoş bir görüntü sağlayan kayan yazı kurulumunu blogunuza nasıl uygulayacağınızı ve nasıl kullanabileceğinizi detaylı şekilde açıklayacağız.

Blogger Kayan Yazı Nedir? Ne İşe Yarar?

Haber sitelerinde pek çok kez gördüğümüz son dakika haberleri, en son yazılar, ilgili yazılar gibi içeriklerinin okunmasını sağlamak amacıyla kullanılan eklentidir. Blogger kayan yazı eklentisi sayesinde ziyaretçilerinize ilgili yazılar sunarak sitenizde kalma sürelerini artırabilirsiniz.

Örnek Görünüm

Blogger Kayan Yazı Nasıl Yüklenir?

Blogger kayan yazı eklemek istediğiniz blogunuza veya siteniz giriş yapın Tema bölümünde HTML düzenle </head> bulun ve bir üstüne aşağıdaki kodları ekleyiniz. Kayan yazı eklenti kurulumu için css kodlarını uygun alana yerleştiriniz.

<style type='text/css'>
/* Breaking News */
#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin:20px auto 0 auto;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba(0,0,0,0.1)}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size:13px;padding:0}#breakingnews .tulisbreaking{background:#e74c3c;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height:28px;float:left;margin:7px 14px 0 7px;text-align:center;border-radius:3px}#recentbreaking{float:left;margin:0;font-size:13px;color:#222;font-weight:600}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:0 10px 0 0}
@media screen and (max-width:768px) {
#breakingwrapper{background-color:#e74c3c;color:#fff;margin:10px auto 20px auto;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}
</style>

Blogger tema kodları arasından </body> bulun ve hemen üstüne aşağıdaki kodları ekleyin. Eklediğiniz kodların arasında işaretli alanı kendi bloğunuza göre değiştirin sayı ile ifade edilen alan ise kayan yazı alanında kaç adet yazı göstermek istediğiniz ile ilgilidir.

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://www.bloguzmani.com/",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&amp;max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})}var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><i class="fa fa-check-square"></i><a href="'+n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function(){t()},5e3)}else $("#recentbreaking").html("<span>There nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Son aşama olarak aşağıdaki kodları blogger kayan yazı (Newsticker) göstermek istediğiniz alana uygun yerleştirmeniz. Kayan yazıyı Tema > HTML düzenle bölümünde uygun yere yerleştirmekte zorlanıyor iseniz Yerleşim> Gadget Ekle > HTML/JavaScript bölümünde görülmesini istediğiniz alana ekleyerek de uygulanabilir. Son dakika Ve yükleniyor alanı için yazıyı değiştirebilirsiniz.

<div id='breakingwrapper'>
   <div id='breakingnews'>
     <span class='tulisbreaking'>Son Dakika<span class='breakhidden'/></span>
      <div id='recentbreaking'>Yükleniyor...</div>
      <div class='blog-date'>
         <script language='Javascript'>
            var dayName = new Array(&quot;Pazar&quot;, &quot;Pazartesi&quot;, &quot;Salı&quot;, &quot;Çarşamba&quot;, &quot;Perşembe&quot;, &quot;Cuma&quot;, &quot;Cumartesi&quot;);
            var monName = new Array(&quot;Ocak&quot;, &quot;Şubat&quot;, &quot;Mart&quot;, &quot;Nisan&quot;, &quot;Mayıs&quot;, &quot;Haziran&quot;, &quot;Temmuz&quot;, &quot;Ağustos&quot;, &quot;Eylül&quot;, &quot;Ekim&quot;, &quot;Kasım&quot;, &quot;Aralık&quot;);
            var now = new Date();
            document.write(&quot;&quot; + &quot; &quot; + dayName[now.getDay()] + &quot;,&quot; + &quot; &quot; + now.getDate() + &quot; &quot; + monName[now.getMonth()] + &quot;&quot;);
         </script>
      </div>
   </div>
</div>
<div class='clear'/>

Blogger kayan yazı eklentisine ait kodları yerleştirdikten sonra temanızı kaydedin ve sonucu görün.