Cara Menambahkan Breaking News Feed di Blog

Posted by : Unknown Senin, 15 Juni 2015

Berikut cara penerapannya :

Catatan : Sebelumnya sobat sudah menautkan fontawesome pada template

Pertama buka Blogger > Template > Klik Edit HTML

Tambahkan kode di bawah ini tepat sebelum ]]></b:skin> atau </style>

/* 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;}}

Kemudian tambahkan kode di bawah ini sebelum tag penutup </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://twistedshape.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://twistedshape.blogspot.com dengan alamat blog sobat

Selanjutnya simpan kode di bawah ini di mana saja bebas, terapkan di dalam tag body (Diantara tag pembuka <body> dan tag penutup </body>)

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

Jika ingin menampilkan breaking news ini hanya pada halaman utama saja, silakan 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>

Terakhir simpan template.

Ditulis Oleh : Unknown

Terimakasih atas kunjungan Kamu Karena telah Mau membaca artikel Cara Menambahkan Breaking News Feed di Blog. Tapi Kurang Lengkap Rasanya Jika Kunjunganmu di Blog ini Tanpa Meninggalkan Komentar, untuk Itu Silahkan Berikan Kritik dan saran Pada Kotak Komentar di bawah. Kamu boleh menyebarluaskan atau mengcopy artikel Cara Menambahkan Breaking News Feed di Blog ini jika memang bermanfaat bagi kamu, tapi jangan lupa untuk mencantumkan link sumbernya. Pengunjung yang baik akan memberikan komentarnya di sini :p. Terima Kasih :)