-->
Selamat datang di website www.imamkunblog.com - Tempat Sharing Tips Trik Android, Komputer, Internet dll

Cara Memasang Widget Breaking News di Blog

Cara Memasang Widget Breaking News di Blog
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!!
Show comments
Hide comments

0 Response to "Cara Memasang Widget Breaking News di Blog"

Post a Comment

Berkomentar dengan Baik dan Jangan Buat Spam
1. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×
-->