Membuat Headline News di Bawah Header

Sobat blogger kali ini saya akan berbagi tips baru yaitu cara membuat headline news di bawah header, aksesoris ini sebenarnya memiliki fungsi yang sama dengan recent post hanya saja letaknya di tempatkan di bawah header.
Keunggulan headline news adalah penampilanya yang lebih menarik, karena akan memunculkan satu-persatu judul artikel scara acak, lengkap dengan hari dan tanggal artikel ketika di publikasikan.

Untuk membuatnya tidaklah terlalu sulit, hanya membutuhkan ketelitian dan keberanian untuk mengutak-atik script template, kita tambahkan sedikit script di beberapa tag elemen dan insya Allah akan berhasil dengan apa yang kita harapkan.
Sepertinya tidak perlu panjang lebar untuk segera memulainya, berikut langkah-langkah yang harus sobat terapkan untuk bisa membuat headline news di bawah header :

1. Silahkan sobat login ke akun blogger sobat
2. Masuk ke pengaturan template dan klik Edit Template
3. Centang expand widget template
4. Cari kode ]]></b:skin> (gunakan Ctrl+F untuk memudahkan dalam pencarian)
5. Letakkan kode script berikut tepat di atasnya :

.headline-wrapper{background:url(https://lh3.googleusercontent.com/-leV22rchdzc/UAP58mLNrFI/AAAAAAAADb4/sRUlcvkSIsA/s38/headline-bg.png) repeat-x;width:950px;height:30px;margin:0 auto;padding:0 auto}
.headline{width:950px;line-height:1.4em;text-align:left;font-family:Arial;font-size:12px;color:#4f4f4f;overflow:hidden;clear:both;margin:0 auto;padding:0 auto;text-shadow: 1px 1px 1px #000}
.headline a:hover{color:#eace12;text-decoration:none}

     6.  Langkah selanjutnya adalah dengan meletakkan kode di bawah ini tepat di atas kode
           </head>

<script src='https://www.google.com/jsapi?key=ABQIAAAAlQIoliUVPjZwD8UDgw_U3RTUhB4JyH-ajz-fA9t4yePPPdGAfRTC_mtuh6Iq1MLEipD0I2rCi30Png' type='text/javascript'/>
<script src='http://exlorer-amran91.googlecode.com/files/HDN.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:#60BAFA;text-decoration:none;}
#example1 a:hover {color:#fff;text-decoration:none;}
</style>

    7.  Kemudian silahkan sobat cari kode <b:section class='header' id='header', dalam
          template blogger biasanya memiliki tampilan kurang lebih seperti berikut :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Title (Header)' type='Header'>
<b:includable id='main'>

     8.   Langkah terakhir adalah dengan meletakkan kode script di bawah ini tepat di bawah
           kode yang sudah di jelaskan pada nomor 7 :

<div class='headline-wrapper'>
<div class='headline'>
<div style='float:left;padding:5px 5px 5px 10px;font:bold 12px Arial;color:#aeaeae;text-transform:none;'>
Headlines News :
</div>
<div style='float:left;width:800px;padding:5px 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;Latest Movies&quot;, &quot;http://adjieumbara.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><div style='clear:both;'/>
</div>

Penting :

• Sebelum sobat menyimpan template ada baiknaya sobat melihat hasilnya secara pratinjau,jika ada kesalahan sobat bisa membatalkanya dengan cara klik kosongkan hasil editan
• Ganti URL yang berwarna merah dengan URL blog sobat, karena URL di atas adalah URL blog saya  (kecuali jika sobat ingin menampilkan artikel blog saya di blog sobat)

Demikian tutorial blog tentang cara membuat headline news di bawah header, semoga artikel ini bermanfaat, untuk kritik dan saran silahkan sobat sampaikan di kolom komentar.