Cara Memasang/Modifikasi Widget Breaking News di Blog

Cara Memasang/Modifikasi Widget Breaking News di Blog

Cara Memasang/Modifikasi Widget Breaking News di Blog - Widget Breaking News ini membantu pengguna atau pengunjung blog melihat update terbaru dari artikel yang Anda publikasikan atau menambahkan widget ini, Anda juga dapat dengan mudah menampilkan posting terbaru Anda. Widget Breaking News yang akan saya bagikan sangatlah ringan. Jadi, anda tidak perlu khawatir blog anda akan berat. Jika anda tertarik untuk Memasang/Modifikasi Widget Breaking News di Blog, silakan ikuti tutorial :


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.
Load comments