Breaking News olarak da bilinen “Son Dakika” eklentilerini birçok haber sitesinde görmüş olmalısınız. Sizce bu eklentiyi Blogger’da da kullanabilir miyiz? Kesinlikle, evet. Blogger‘daki son yazılarımızı listeleyebileceğimiz bir son dakika bölümü yapabilir ve CSS ile bu bölümü daha da güzel bir hâle getirebiliriz. Aşağıda yer alan adımları sorunsuz bir şekilde uygulamanızın ardından siz de sitenize son dakika bölümü ekleyebilirsiniz. Umarız faydalı bir anlatım olacaktır.
1) Temanızın CSS bölümüne aşağıdaki kodları ekleyin.
#breakingnews{width:100%;max-width:65%;display:inline-flex;margin-bottom:20px;line-height:29px;height:29px;overflow:hidden;font-size:13px;font-weight:700}
#breakingnews .tulisbreaking{display:block;padding:0 10px;font-size:11px;font-weight:700;height:29px;line-height:29px;float:left;text-align:center;color:#fff;background-color:#333;border-right:1px solid rgba(0,0,0,0.02);text-transform:uppercase}
#breakingnews .tulisred{background-color:#bbb;color:#fff;display:block;padding:0 12px;font-weight:normal;height:29px;line-height:29px;float:left;text-align:center;text-transform:uppercase}
#recentpbreaking{float:left;margin:0 0 0 10px;font-size:11px;color:#666}
#recentpbreaking ul,#recentpbreaking li{list-style:none;margin:0;padding:0}
#recentpbreaking li a{color:#666}#recentpbreaking li a:hover{color:#444}
2) Temanızın HTML bölümünde aşağıdaki kodu bulun.
<header>
3) Aşağıdaki kodları, yukarıdaki koddan önce ekleyin.
<div id='breakingnews'><i class='fa fa-rss'/><span class='tulisbreaking'>SON DAKİKA</span>
<div id='recentpbreaking'>Son içerikler yükleniyor...</div>
</div>
4) Temanızın HTML bölümünde aşağıdaki kodu bulun.
</body>
5) Aşağıdaki kodları, yukarıdaki koddan önce ekleyin.
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://blogunuzunadi.blogspot.com",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentpbreaking li:first").slideUp(function(){$(this).appendTo($("#recentpbreaking ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#recentpbreaking").html(s),setInterval(function(){t()},5e3)}else $("#recentpbreaking").html("<span>No result!</span>")},error:function(){$("#recentpbreaking").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>
Not: Kırmızı alanı blogunuzun adı ile değiştirmeyi unutmayın.
Bilgi: Temanızda jQuery kütüphanesi bulunduğundan lütfen emin olun.
Bilgi: Temanızda jQuery kütüphanesi bulunduğundan lütfen emin olun.