Cara Pasang Widget Headline Breaking News MJM

Melanjutkan tutorial sebelumnya Cara Gampang Memasang Iklan In Feed Goole Adsense di Blog pada kesempatan ini Admin akan berbagi Tutorial Cara Membuat dan Memasang Widget Headline Breaking News Mantap Jiwa Mempesona. Widget ini sebenarnya berdasarkan fungsinya hampir sama dengan Widget Latest Post yaitu menampilkan beberapa judul Postingan terbaru dari suatu Blog. Namun dikemas sedemikian rupa sehingga widget ini terkesan tanpil lebih profesional dan Revponsive tentunya semakin mempercantik tampilan Blog. Untuk penampakannya silahkan perhatikan Screenshot di bawah ini Admin sudah sediakan Versi Dekstop dan Android.

Gimana menurut kalian semua sobat blogger, keren kan? Pasti Keren Donk! So Pasti Mantap Jiwa Mempesona dan Membahana. Yuk..... yang pengen ikutan coba pasang Widget Breaking News Download dulu Source Kodenya DISINI
Pertama-tama Login ke Blogger, kemudian pilih menu Tema pilih sub menu EDIT HTML

Pastikan dulu apakah template blog sobat sudah memiliki Code Jquery dengan cara tekan kombinasi tombol CTRL + F maka akan muncul kolom pencarian. Pada kolom input pencarian masukan kata kunci jquery.min.js kemudian tekan Enter. Apabila ternyata belum ada silahkan copy paste kode jQuery berikut ini kemudian pastekan di areah antara <head> dan </head>.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

Kemudian cari kode ]]></b:skin> Jika sudah ditemukan copy dan pastekan kode dibawah ini tepat diatasnya.



/* 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}}


<script type='text/javascript'>
var blog_url = &quot;<data:blog.homepageUrl/>&quot;;
var latest_post = 7;
var scrolling_speed = &quot;5&quot;;
var close_button = false;
var info_text = true;
</script>

Kemudian cari kode </body> Jika sudah ditemukan copy dan pastekan kode dibawah ini tepat di atasnya


<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>

Langkah Terakhir letakkan kode berikut ini <div id='blanter-newsticker'/> dimana widget breaking news akan dipasang, seperti contoh berikut ini admin memasangnya dibagian Header Blog.