Cara Membuat Widget Breaking News Sederhana Di Blog

Selamat datang agan atau aganwati, kali ini saya akan berbagi tentang tips blogging yaitu cara membuat widget breaking news sederhana di blog, widget ini berfungsi untuk menampilkan artikel-artikel yang pernah anda buat sebelumnya dan tentu saja akan membuat pengunjung lebih mudah untuk mengakses artikel terdahulu anda tanpa harus mencari sendiri artikel tersebut, langsung saja untuk penerapannya;

Langkah

1. Login pada blog anda masing-masing,

2. Pada menu dashboard blog pilih menu template, lalu pilih edit template,

3. Setelah itu cari kode </b:skin> dengan cara

Ctrl

+

F

,

4. Setelah itu copy script di bawah ini, lalu paste tepat di atas kode </b:skin>,

 /* 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 screen and (max-width:480px) {#breakingnews{display:none} .notif-show{display:none} .close-1{margin:0;color:#444!important}} 

5. Setelah itu simpan template,

6. Setelah itu pada menu dashboard pilih menu tata letak, lalu pilih tambahkan gadget, lalu pilih menu html / javascript,

7. Copy script di bawah ini lalu paste pada kolom html / javascript yang telah tersedia,

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

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

8. Simpan dan lihat hasilnya.

Nah itu saja dari saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar anda terima kasih.

Sumber script www.arlinadzgn.com/2016/02/cara-menambahkan-breaking-news-feed-di-blog.html

Share this