Cara Memasang Widget Breaking News di Blog

Cara Memasang Widget Newsticker di Blog - Pada artikel kali ini saya akan membagikan cara membuat news ticker atau yang biasa sering disebut dengan Breking News (Berita Terbaru) di blog dengan mudah.

Widget News Ticker atau Breaking News adalah sebuah widget yang berisikan teks berjalan seperti yang sering digunakan pada template Megazine atau website berita.

Memasang News Ticker di blog memilik banyak manfaat dan salah satu anfaatnya apabila memasang widget newsticker adalah dapat memberitahukan kepada pengunjung blog mengenai artikel yang baru rilis.

Membuat widget Newsticker kali ini sudah responsive dan dengan tampilan yang clean dan modern. Memasang Widget Breaking News di Blog sangatlah mudah hanya dengan menampatkan kode CSS dan kode Javascript saja.

Baiklah tidak perlu berlama-lama lagi mari kita langsung mulai saja!

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?

Baca Juga: Cara Membuat Tanda Ceklik di Samping Judul artikel blog

Demikianlah artikel kali ini cara memasang widget breaking news atau newsticker di blog dengan mudah. Semoga artikel kali ini bermanfaat sekian dan terima kasih!!