Cara Memasang Breaking News Ticker Menarik Di Blogger

Widget Berbasis Feeds Di Blog - Headline News, begitulah para Blogger menyebut widget ini. Memang karena tampilan dan cara kerjanya yang mirip dengan Headline News di siaran TV lah, membuat widget satu ini disebut Headline News. Widget yang satu ini memanfaatkan Feed Blog sama halnya dengan Sitemap untuk Blogger (baca : Mengirim Peta Situs Ke Google Webmaster) yang juga memanfaatkan Feeds pada Blogger.

Perbedaan dari keduanya adalah Headline News dibuat dan diperuntukkan bagi para pengunjung Blog, sedangkan sitemap dibuat dan ditujukan untuk Search Engine. Contoh bagaimana tampilan Headline News ini dapat dilihat Pada Bagian Atas Blog Demo berikut. Bagaimana? tidak memerlukan banyak tempat, tetapi sangat berguna kan?.

Berminat untuk memasangnya pada Blog Anda? Berikut langkah - langkah pemasangannya:
1. Login ke Akun Blogger Anda
2. Pilih bagian Template > Edit HTML > Lanjutkan

3. Jangan lupa, untuk Back Up template Anda (hanya untuk berjaga - jaga bila terjadi sesuatu yang tidak di inginkan).

4. Beri centang pada bagian Expand Template Widget

5.  Cari kode  ]]></b:skin>, Kemudian copy dan paste kan kode berikut di atasnya :

/* -- Headline News -- */
.headline-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdz64w4yFeIt8GgbJm2BPEv4LfJIYS2yBBVH9Goe6Pc6PMw-Tg-3cwGQKqMY8kBbi9XMKaueb9gShLc9hTKy1_HluRyxY0L2JYZC2wrcxyWMp4DVE5MQyPMUsVRP91FIeggLWmBvfi8T79/s1600/headlines-bg.png) repeat-x;width:980px;height:22px;border-bottom:1px solid #022f36;margin:0 auto;padding:0 auto
}
.headline {
width:980px;line-height:1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;margin:0 auto;padding:0 auto
}
.headline a:hover {
color:#eace12;text-decoration:underline
}

Catatan : sesuaikan 980px dengan lebar Header Blog Anda

6. Masih dalam posisi Edit HTML, cari kode </Head> kemudian copy paste kode berikut diatasnya :

<script src='https://www.google.com/jsapi?key=ABQIAAAAlQIoliUVPjZwD8UDgw_U3RTUhB4JyH-ajz-fA9t4yePPPdGAfRTC_mtuh6Iq1MLEipD0I2rCi30Png' type='text/javascript'/>
<script src='http://script-idepelajar.googlecode.com/files/newsticker.js' type='text/javascript'/>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#666;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#fff;font:normal 12px Arial;}
#example1{ /*Demo 1 main container*/
width: 900px;
height: 12px;
border: 0px solid #aaa;
padding: 0px;
font:bold 12px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#ffd200;text-decoration:none;}
#example1 a:hover {color:#fff;text-decoration:none;}
</style>

 Catatan : Ganti API key berwarna Hijau dengan Google API Blog Anda, tapi jika Blog Anda masih baru ( saat ini,  google sudah tidak menerima pembuatan API key) Gunakan saja API Key diatas.

 7. Nah, langkah yang ini adalah langkah terakhir, yaitu tempat memasangan Headline News ini, silakan Anda letakkan kode dibawah ini ditempat yang Anda inginkan, tapi bila bingung, letakkan kode dibawah ini tepat diatas kode  <div id='content-wrapper'> :

<div class='headline'>
<div style='float:left;padding:2px 5px 5px 10px;font:bold 12px Arial;color:#fff;text-transform:none;'>
Headlines News :
</div>
<div style='float:left;width:800px;padding:2px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 3000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Headline News&quot;, &quot;http://www.fokusmanado.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><div style='clear:both;'/>
</div>

Sehimgga akan diperoleh susunan seperti ini :

<div class='headline'>
<div style='float:left;padding:2px 5px 5px 10px;font:bold 12px Arial;color:#fff;text-transform:none;'>
Headlines News :
</div>
<div style='float:left;width:800px;padding:2px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 3000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Headline News&quot;, &quot;http://www.fokusmanado.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><div style='clear:both;'/>
</div>
 <div id='content-wrapper'>

 Catatan : Ganti Kata Bercetak BIRU dengan URL Blog Anda.

8. Save/Simpan template Anda

Terkadang bila dipasang pada Blog yang masih baru, Headline News ini sulit muncul. Jangan panik!, jangan telfon polisi atau pemadam kebakaran!,hehehehe, Tenang saja, hal itu disebabkan Feeds Blog Anda yang belum dikenali. Jadi tetap posting atau tunggu kira - kira 2 hari, Mudah - mudahan Headline News ini akan segera muncul.