Cara Membuat Widget Newsticker di Blog 

Pertama, login ke blogger.com > Pilih Tema > Pilih Edit HTML dan cari kode ]]></b:skin> dan tempatkan kode css dibawah ini tepat diatas kode tersebut.
/* Breaking News */
#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin:20px auto 0 auto;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba(0,0,0,0.1)}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size:13px;padding:0}#breakingnews .tulisbreaking{background:#3749a2;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height:28px;float:left;margin:7px 14px 0 7px;text-align:center;border-radius:3px}#recentbreaking{float:left;margin:0;font-size:13px;color:#222;font-weight:600}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222;text-decoration:none}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:0 10px 0 0}
@media screen and (max-width:768px) {
#breakingwrapper{background-color:#438e68;color:#fff;margin:10px auto 20px auto;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}

Selanjutnya tambahkan kode javascript dibawah ini tepat diatas kode </body>

&lt;script type=&#039;text/javascript&#039;&gt;
//&lt;![CDATA[
// Breaking News
$(document).ready(function(){var e=&quot;https://imamkunblog.com/&quot;,t=12;$.ajax({url:&quot;&quot;+e+&quot;/feeds/posts/default?alt=json-in-script&amp;amp;max-results=&quot;+t,type:&quot;get&quot;,dataType:&quot;jsonp&quot;,success:function(e){function t(){$(&quot;#recentbreaking li:first&quot;).slideUp(function(){$(this).appendTo($(&quot;#recentbreaking ul&quot;)).slideDown()})}var n,r,a=&quot;&quot;,i=e.feed.entry;if(void 0!==i){a=&quot;&lt;ul&gt;&quot;;for(var l=0;l&lt;i.length;l++){for(var s=0;s&lt;i[l].link.length;s++)if(&quot;alternate&quot;==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+=&#039;&lt;li&gt;&lt;i class=&quot;fa fa-check-square&quot;&gt;&lt;/i&gt;&lt;a href=&quot;&#039;+n+&#039;&quot; target=&quot;_blank&quot;&gt;&#039;+r+&quot;&lt;/a&gt;&lt;/li&gt;&quot;}a+=&quot;&lt;/ul&gt;&quot;,$(&quot;#recentbreaking&quot;).html(a),setInterval(function(){t()},5e3)}else $(&quot;#recentbreaking&quot;).html(&quot;&lt;span&gt;There nothing here?&lt;/span&gt;&quot;)},error:function(){$(&quot;#recentbreaking&quot;).html(&quot;&lt;strong&gt;Error Loading Feed!&lt;/strong&gt;&quot;)}})});
//]]&gt;
&lt;/script&gt;
Jika ingin mengubah warnah background breaking news ubah kode #438e68 dengan kode warna keinginan anda.
Silahkan ganti imamkunblog.com dengan alamat blog anda.
Ganti angka 12 dengan angka sesuai keinginan untuk enampilkan jumlah post yang akan muncul.

Langkah terakhir simpan template dan lihat hasilnya!!

Seperti itulah cara memasang widget newsticker di blog dengan mudah, bagaimana mudah bukan?


ARTIKEL TERBARU