Cara membuat breaking news diblog

Pada TUTORIAL BLOGSPOT kali ini Diaz akan share Cara membuat breaking news diblog, agar blog sobat tambah kelihatan cantik dan keren tampilannya.

Breaking news atau biasa disebut juga newsticker ini selain mempercantik blog kita, juga berfungsi sebagai pemberitahuan kepada pengunjung akan artikel yang baru diposting pada blog kita.

Ternyata cara memasangnya sangat gampang sekali, dan jika Anda tertarik berikut ini langkah-langkah untuk membuatnya :

1. Login ke blogger dengan akun anda
2. Kemudian klik Tata Letak > pilih Edit HTML
3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
4. Letakkan kode berikut di atas kode ]]></b:skin>

/* News Ticker Wrapper
---------------------------------------------*/
.newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCatZCe5J57iaWHTZNdStwyk5_NcwX_P6OmyweYeUnbKA_QYMtnjlg_7eozjaCT2mzKyG8nKv9SdlUpLbqI6ICrb5krxBUedrXr00I3ECYUawvTnvMRg7pNjj0q5flMfNBS_9qGGCXmcA/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}
.news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#fff;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}

    5.Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>

Klik show untuk melihat

   6.Kemudian cari kode dibawah ini, atau kode yang biasa dipakai untuk meletakkan navigasi menu

    <div class='menu horizontal'>
    ...........................................
    ...........................................
    </div>

   7.Jika sudah ketemu letakkan kode berikut tepat dibawah kode </div> yang dipakai untuk menutup kode  navigasi menu pada template Anda.

<div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://diaz-box.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>

8.Ganti URL yang saya beri warna merah dengan URL blog anda dan jika blog anda masih baru newsticker ini biasanya tidak mau jalan karena google belum mengenal feed di blog Anda. Solusinya gampang Anda mesti buat API key sendiri di googlecode, atau langsung saja disini. Masukkan URL blog anda, kemudian ganti kode javascript paling atas pada langkah nomer 5 dengan kode yang barusan dapet dari googlecode.

9.Langkah terakhir save/simpan, lihat dibawah navigasi menu anda, kalau cara memasangnya sudah benar pasti akan muncul breaking news itu. Agar lebih ramping simpan kode javascript newsticker diatas (no.5) di tempat penyimpanan googlecode Anda.

Semoga artikel Diaz ini bisa bermanfaat untuk sobat-sobat blogger sekalian.Jika sobat mempunyai pertanyaan,kritik ataupun saran,silahkan tulis di kolom komentar yang berada di bawah postingan.Sampai jumpa di TUTORIAL BLOGSPOT berikutnya.