Cara Memasang/Modifikasi Widget Breaking News di Blog
Cara Memasang/Modifikasi Widget Breaking News di Blog
1. Login Blogger > Template > klik Edit HTML > Copy dan tambahkan kode CSS dibawah ini tepat sebelum kode ]]></b:skin> atau </styke>
/* CSS Breaking News */
#breakingnews{position:relative;font-family:'Roboto Condensed',sans-serif;margin:20px 20px 0 20px;height:50px;line-height:26px;overflow:hidden;padding:4px 0;border-top:2px solid #ecf0f1;border-bottom:2px solid #ecf0f1}
#breakingnews:after{content:'f0c9';font-family:fontawesome;color:#bdc3c7;position:absolute;right:18px;font-size:1.2rem;font-weight:normal;top:12px;text-align:center}
#breakingnews .breakhead{background:#e74c3c;color:#fff;display:inline-block;float:left;font-size:17px;font-weight:700;padding:6px 12px}
#adbreakingnews{float:left;margin-left:12px;margin-top:6px;line-height:28px}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
#adbreakingnews li a {font-weight:400;color:#000;margin-top:10px;}
#adbreakingnews li a:hover {color:#e74c3c;}
#adbreakingnews li a:before{content:'f079';font-family:fontawesome;display:inline-block;float:left;margin:0 8px 0 0;line-height:29px;}
2. Lanjut, Copy dan tambahkan kode dibawah ini sebelum kode </body>
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://tipsryand.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>
Jangan lupa untuk mengganti url yang sudah di block dengan url kalian
3. Kemudian tambahkan kode dibawah ini dan bebas mau di letakkan di bawah kode <body> atau diatas kode </body>
<div id='breakingnews'><span class='breakhead'>Breaking News</span>
<div id='adbreakingnews'>Loading...</div></div>
4. Simpan Template, jika terjadi error mungkin kalian belum teliti membacanya.
Mungkin itu saja, tunggu updatean berikutnya, jika ada yang inin ditanyakan silahkan tinggalkan dikomentar. Terimakasih.