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 :Alexa Değerini Yükseltmek
#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 :FTP ve Cpanel’den Silinmeyen Dosyaları Silmek




<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 :Arama Motorlarını Etkileyebilecek En Önemli Backlink Faktörleri
//<![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 :SMS Doğrulama İçin Özel Numara Siteleri
//]]>
</script>