Blogger için “Son Dakika” Eklentisi Yapımı 2017

byEmre KURTOĞLU -23:58

Blogger için Son Dakika Eklentisi Yapalım

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.

AYRICA: Blogger için Harika Arşiv Sayfası Yapalım

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}
Baca Juga :iOS ve Android’de Twitter’ın Harcadığı Boş Alan Nasıl Temizlenir?
#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>
Baca Juga :Android Telefonları Daha Hızlı Şarj Etme Yöntemleri




<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'>
Baca Juga :Akıllı Telefonlardan İnternet Hız Testi Nasıl Yapılır?
//<![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>")}})});
Baca Juga :İnternet Hızı Nasıl Ölçülür?
//]]>
</script>