Cara Memasang Newsticker Berjalan Pada Blog

Kali ini saya akan share bagaimana Cara Memasang Widget Newsticker Pada Blog. Sebelum saya menjelaskan lebih lanjut yang harus anda ketahui dahulu.

Apa itu Newsticker? 

Newsticker atau biasa kita sebut sebagai Widget Breaking News yaitu sebuah widget yang fungsinya untuk menampilkan daftar beberapa artikel terbaru dengan animasi slide, namun yang di tampilkan hanya dalam bentuk postingan saja. Seperti blog berita yang sering kita lihat.

Widget Breaking News ini berbeda dengan widget yang sering anda lihat seperti efek gerak nya, biasanya Widget Breaking news memiliki efek naik atau turun dan hanya menampilkan satu link saja dalam beberapa detik.

Berbeda dengan widget Newsticker yang saya bagikan ini yaitu menggunakan efek gerak dari kanan ke kiri dan memunculkan judul link artikel terbaru.

Demo Widget Newsticker Breaking News yang akan kita buat tersebut terlihat seperti berikut.

CARA MEMASANG NEWSSTICKER DI BLOG

Ok sobat blogger Silahkan anda simak langkah-langkah Cara Memasang Widget Newsticker Breaking News.

Sebelum anda memasang nya, anda pastikan terlebih dahulu sudah terdapat jQuery pada blog sobat.

1. Letakkan Kode CSS di bawah ini tepat diatas 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}}

2. Selanjutnya, Simpan kode berikut di atas kode </head>

<script type='text/javascript'>
var blog_url = "https://informasi-beritaandre.blogspot.com";
var latest_post = 4;
var scrolling_speed = "5";
var close_button = false;
var info_text = true;
</script>

Silahkan sobat ganti https://informasi-beritaandre.blogspot.com dengan link blog sobat.

3. Simpan kode Javascript berikut 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>

4. Langkah terakhir letakkan kode HTML berikut di tempat yang anda inginkan.

<div id='blanter-newsticker'/>

5. Silahkan Pratinjau Tamplate anda terlebih dahulu untuk melihat apakah ada error, jika tidak ada -> Simpan Tamplate

Itulah Tutorial Cara Membuat Newsticker di Blog. Semoga bermanfaat.
Sumber:idblanter.com

Share :