MASIGNALPHA101
6536304137350128937

Cara Memasang Widget Newsticker Berjalan Style Keren di Blogger

Cara Memasang Widget Newsticker Berjalan Style Keren di Blogger
10/26/2018

Baca Juga

Cara Memasang Widget Newsticker Berjalan Style Keren di Blogger

Setelah sekian lama ngga update atau buat postingan baru, kali ini saya akan membuat postingan tentang sebuah tutorial, yaa iseng iseng buat ngisi waktu luang aja... hehe dari pada blog ngga keurus, mending diisi postingan apalah yang sekiranya bermanfaat buat orang banyak. Tutorial kali ini yaitu tentang "Cara Memasang Widget Newsticker Berjalan Style Keren di Blogger".

Dari judulnya aja sudah kelihatan "Style Keren" pasti keren abis niih... hehe. Newsticker ini berisi tentang cuplikan atau judul sebuah artikel sehingga bisa memberikan informasi terbaru kepada pengunjung blog tentang artikel yang baru di update dan pada akhirnya pengunjung dari blog kita tidak akan ketinggalan informasi terbaru.

Widget ini bisa kita sebut juga dengan "Breaking News" berjalan yaitu sebuah widget yang bisa kita temukan pada blog atau website tentang berita. Akan tetapi kedua widget tersebut ( Newsticker dan Breaking News ) ada perbedaannya, yaitu efek geraknya yang berbeda, biasanya widget breaking news memiliki efek naik atau turun dan hanya memunculkan satu link saja dalam beberapa second, berbeda dengan widget yang akan saya bahas kali ini yaitu widget newsticker yang menggunakan efek bergerak dari kanan ke kiri dan bisa memunculkan beberapa link sekaligus.

Untuk penampakan widget nya bisa kalian lihat demonya DISINI

Cara Memasang Widget Newsticker Berjalan Style Keren di Blogger

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 = "https://www.agus-jenro.com";
var latest_post = 4;
var scrolling_speed = "5";
var close_button = false;
var info_text = true;
</script>

Ganti https://www.agus-jenro.com dengan link blog kalian.

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.

Sekian, Cara Memasang Widget Newsticker Berjalan Style Keren di Blogger. Semoga bermanfaat 😊 jangan lupa share ke teman kalian sesama blogger, barangkali ada yang membutuhkan tutorial ini 😊

Sumber : https://www.idblanter.com/2017/01/memasang-widget-newsticker-di-blog.html
Berkomentar adalah hak asasi bagi semua pengguna internet dan akan berdampak kembali kepada diri masing - masing, maka berkomentar dengan bahasa yang baik dan sopan adalah suatu hal positif dan sangat dianjurkan.