Cara Membuat Breaking News Feed di Blog

Cara Membuat Breaking News Feed di Blog - Feed yang berfungsi menampilkan berita-berita terbaru dari blog anda ini ternyata banyak yang mencari-cari.

Sebenarnya tidak cukup sulit untuk menambahkan feed ini, namun karena malas mencari atau menerapkan, mungkin itulah yang membuat sulit cara menambahkan feed ini.

Di postingan saya kali ini, saya ingin sekedar berbagi bagaimana caranya.

BERIKUT CARANYA

1. Buka blogger.com

2. Pilih template > edit HTML

3. Cari kode </style> dan letakkan kode dibawah, tepas diatasnya.

/* CSS Breaking News */
#breakingnews {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #e6e6e6;}
#breakingnews .breakhead {position:absolute;background:none repeat scroll 0 0 #363b40;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;}
#adbreakingnews li a {font-family:inherit;font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#359bed;}
#adbreakingnews {float:left;margin-left:75px;margin-top:6px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}

@media only screen and (max-width:640px){
#breakingnews {margin:20px 0 0 0;margin-right:0;}
#breakingnews .breakhead {padding:6.5px 14px;}
#adbreakingnews {margin-left:50px;}}

4. Cari kode </body> dan letakkan kode dibawah tepas diatasnya.

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://blognya-caypul.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(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews 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>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Ganti http://blognya-caypul.blogspot.com menjadi url blog anda.

5. Sekarang letakkan kode dibawah diantara tag pembuka <body> dan tag penutup </body> ( untuk letak bisa terserah anda )

<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adbreakingnews'>Loading...</div></div>

6. Jika anda menginginkan hanya diletakkan di halaman depan, silahkan bungkus markup di atas dengan tag kondisional khusus halaman utama.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adbreakingnews'>Loading...</div></div>
</b:if>

7. Selesai, tinggal simpan template saja.