Cara Memasang Widget Newsticker Berjalan Di Blog

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

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

Untuk tampilan widget ini masih aku buat simple dan gampang untuk dikreasikan.

Demo

Cara Membuat Widget Newsticker Pada Blog

Pastikan sudah terdapat jQuery pada blog sobat..

Langkah Pertama 😃 : Letakan CSS di bawah ini sempurna di atas arahan ]]></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 arahan berikut di atas arahan </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 arahan </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 😯 teman hanya perlu meletakan HTML berikut di kawasan yang teman 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. 😊

Sumber https://www.idblanter.com