Widget - Cara Menambahkan WidgetBreaking News Feed Di Blog– bagi anda yang sudah memiliki Blog dengan pengunjung yang cukup banyak pasti memiliki Pengunjung setia yang selalu rutin mengunjungi Blog sobat untuk mencari Artikel atau informasi terbaru pada blog sobat. maka sangat penting adanya sobat mengetahui Cara Menambahkan Widget Breaking News Feed Di Blog. Dengan memasang Widget Breaking News di blog sobat maka Pengunjung akan lebih termudah kan untuk mencari artikel terbaru di blog sobat.

Cara Menambahkan Widget Breaking News Feed Di Blog

Bagi anda yang khawatir akan kecepatan blog yang berkurang sangat banyak apabila menambah Widget baru di blog sobat, ini adalah solusinya. Karena cara yang saya ajarkan ini sudah sangat ringan dengan menggabungkan CSS, HTML dan Javascript. Baiklah, langsung saja kita cari tahu cara membuatnya berikut ini.

1. Pertama Buka Blog sobat > Template > Edit Html >
2. Tambahkan Kode di bawah ini tepat di atas kode  ]]></b:skin> atau </style>

CSS
/* 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>

Javascript
<script type='text/javascript'>

//<![CDATA[

// Breaking News
$(document).ready(function(){var e="http://azmidzgn.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://azmidzgn.blogspot.com dengan alamat blog Sobat

Kemudian simpan kode di bawah ini di mana saja bebas, terapkan di dalam Tag body (di antara tag pembuka <body> dan tag Penutup </body>)

HTML
<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>

<div id='adbreakingnews'>Loading...</div></div>

Jika ingin menampilkan breking news ini hanya pada halaman utama saja, silahkan bungkus Markup di atas dengan tag kondisional khusus halaman utama

HTML
<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>

3 terakhir simpan Template dan Lihat Hasilnya.


Demikianlah informasi mengenai Cara Menambahkan Widget Breaking News Feed Di Blog. Semoga bermanfaat dan menambah ilmu pengetahuan Tips Blogger sobat. selamat Mencoba.