Cara Membuat Widget Breaking News Sederhana Di Blog

00:23:00
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.

Cara Membuat Widget Breaking News Sederhana Di Blog




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

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Next Article
Next Post
Previous Article
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

0 Comments