Membuat Headline News di Blogspot

Headline News di Blog, atau berita berjalan yang biasanya terdapat di bawah navigasi menu atau diatas header pada sebuah blog atau biasa disebut newsticker. Banyak sudah artikel yang membahas mengenai newsticker ini di internet, misalnya dengan menambah efek marquee sehingga teks tersebut dapat berjalan, tapi kali ini saya akan menjelaskan cara memasang Headline News dengan sentuhan jQuery sehingga hasilnya akan lebih menarik dan yang pasti dapat mempercatik blog anda.
Mungkin masih ada yang bingung apa sih sebenarnya Headline News pada blog itu, coba perhatikan gambar berikut ini :

gambar diatas merupakan contoh gambar headline news yang saya pasang pada blog saya,

untuk membuat Headline News di blog, ikutilah langkah-langkah berikut ini :
 
1. Login ke blogger dengan akun anda
2. Kemudian klik Template > pilih Edit HTML
3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
4. Letakkan kode berikut di atas kode ]]></b:skin>

.newspic {background:#252525 url(http://3.bp.blogspot.com/-
GoZGUMDvx8g/T1je4hEa9iI/AAAAAAAAA7E/aOfllbW_qOc/s1600/BRK+NW.png) no-repeat top
left;width:970px;margin:0 auto;padding:0 auto; height:24px;color:#fff;}
.news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.2em;text-align:left;font-family:Arial;font-
size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000000;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}

Catatan :
Sesuaikan kode yang berwarna merah dengan ukuran template blog anda

5. Kemudian letakkan kode berikut di atas kode </head>

 

<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-
m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script>
<script src='http://e55up.googlecode.com/files/Headline.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:#aaa;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 14px Arial;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 780px;
height: 14px;
border: 0px solid #aaa;
padding: 0px;
font:bold 14px Arial;
text-transform:none;
text-align:left; background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
#example1 a:hover {color:#C8D3F2;text-decoration:none;}
</style>

6. Cari kode <div id='header-wrapper'> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya.

<div class='newspic'>
<div style='float:left;width:979px;padding:1px 0 6px 130px; 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://alamat-url.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>

Catatan :
- Ganti kode yang berwarna merah ( alamat-url ) dengan alamat url blog anda

7. Klik Simpan dan lihat hasilnya


Semoga Bermanfaat "Indahnya Berbagi Pengetahuan"