04 January 2017

Cara Memasang Widget Newsticker Berjalan di Blog

Cara Memasang Widget Newsticker Berjalan di Blog

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.


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. 😊
Paket Kuota
Isi Ulang Kuota Internet Murah
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Emoticon
Konversi Code
Out Of Topic
😊
😉
😀
😁
😎
😍
😜
😑
😇
💖
😯
😱
😭
👍
🍻