Cara Membuat Newsticker atau Breaking News Di Blog

Saat pertama kali kalian melihat Oploverz pasti disana terdapat "Rekomendasi" diatas "Featured Post". Tapi itu tidak ada animasi berjalan nya, itu bisa disebut Newsticker atau Breaking News.

Newsticker atau breaking news ini biasa kita temukan di blog atau web majalah atau magazine, Newsticker tersebut biasanya random atau acak. Supaya lebih memudahkan pembaca untuk melihat post yang mungkin sudah lama terbenam.

Pada kesempatan kali ini saya akan mencoba membagikan cara membuat Newsticker atau Breaking News Tersebut. Untuk langkah-langkah pemasangannya silahkan ikuti tutorial dibawah ini.
1. Masuk ke Blogger kamu.
2. Lalu ke menu Tema dan Edit HTML.
3. Setelah itu salin kode dibawah ini dan pastekan diatas ]]></b:skin> atau </style>

/* Newsticker / Beaking News CSS */
#kanggira-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}}

4. Pastekan juga kode dibawah ini tepat diatas kode </head>

<script type='text/javascript'>
var blog_url = "https://gilangramadhan11.blogspot.com";
var latest_post = 4;
var scrolling_speed = "5";
var close_button = false;
var info_text = true;
</script>
Ganti https://gilangramadhan11.blogspot.com dengan url blog sobat.

5. Langkah selanjutnya salin juga kode dibawah dan pastekan diatas kode </body>

<script src='https://dl.dropboxusercontent.com/s/nsn9y6kytgg1qqb/kanggira.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("kanggira-newsticker").appendChild(document.getElementById("recent_post"));
//]]>
</script>

6. Langkah terakhir adalah tempatkan kode dibawah ini bebas teresah kamu ingin di tempatkan dimana juga.

<div id='kanggira-newsticker'/>

7. Simpan Template dan lihat hasilnya.

Sekian tutorial Membuat Newsticker atau Breaking News Di Blog, jika kamu ada masalah silahkan untuk berkomentar.

Comments