Cara Memasang Widget Newsticker Berjalan di Blog

04 January 2017

Newsticker atau biasa kita lihat sebagai widget Breaking News berjalan adalah sebuah widget yang biasa kita temukan pada template-template berita ataupun magazine.

Perbedaan widget ini dengan widget breaking news biasanya yaitu efek geraknya yang berbeda, biasanya widget breaking news memiliki efek naik atau turun dan hanya memunculkan satu link saja dalam beberapa detik, berbeda dengan widget newsticker ini yang menggunakan efek bergerak dari kanan ke kiri dan memunculkan beberapa link sekaligus. 😁

Untuk tampilan widget ini masih saya buat simple dan mudah untuk dikreasikan.

Demo

Cara Membuat Widget Newsticker Pada Blog

Pastikan sudah terdapat jQuery pada blog sobat..

Langkah Pertama 😃 : Letakan CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* Newsticker CSS */
#blanter-newsticker{margin:20px 0;position:relative}
#recent_post{position:relative;border-bottom:1px solid #ddd;z-index:9;overflow:hidden;padding:8px;width:100%!important}
#recent_post a{margin:0 15px;line-height:2}
.newstitle{float:left;background:#1b77ea;color:#fff;padding:7px 10px;font-weight:bold;border-radius:4px;text-transform:uppercase}
#recent_post .wrapper{width:1120px;max-width:100%;margin:0 auto}
@media screen and (max-width:684px){
.newstitle{font-size:14px;padding:3px 10px!important}#recent_post{top:60px!important;padding:0!important}#recent_post marquee{width:67%!important;line-height:2}}

Langkah Kedua 😆 : Simpan kode berikut di atas kode </head>

<script type='text/javascript'>
var blog_url = "http://www.idblanter.com";
var latest_post = 4;
var scrolling_speed = "5";
var close_button = false;
var info_text = true;
</script>

Ganti http://www.idblanter.com dengan link blog sobat.

Langkah Ketiga 😐 : Simpan Javascript di bawah ini di atas kode </body>

<script src='https://cdn.rawgit.com/blanter/design/master/blanter-newsticker.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("blanter-newsticker").appendChild(document.getElementById("recent_post"));
//]]>
</script>

Terakhir 😯 sobat hanya perlu meletakan HTML berikut di tempat yang sobat inginkan.

<div id='blanter-newsticker'/>

Simpan Template.

Baca Juga : Cara Membuat Material Design Threaded Comment di Blog

Sekian, Tutorial Cara Memasang widget Newsticker berjalan di blog. Semoga bermanfaat. 😊

Dunia Blanter