Cara Membuat Headline News Di bawah Header

Cara membuat Headlines News - Salah satu aksesories blog yang sangat penting adalah Headlines News, karena berfungsi menampilkan beberapa postingan terbaru blog anda sehingga pengunjung akan dengan mudah melihat apa artikel terbaru yang ada dalam blog anda.

Headlines News sama dengan Recent Post hanya saja tampilannya lebih simpel yang hanya menampilkan title atau judul dari beberapa postingan terbaru. Yang paling populer saat ini adalah menempatkan Headlines News di bagian bawah header, ada juga yang menempatkan di bagian atas dan di bawah menu (header). Namun sciptnya sama saja, untuk menempatkan di posisi mana itu terserah anda, namun pada kali ini saya akan membahas dengan cara menampilkan Headline News di bawah Header seperti yang ada pada gambar berikut.

Untuk membuatnya tidak terlalu sulih, dengan sedikit keberanin untuk mengotak atik script template blog anda kemudian menambahkan sedikit script di beberapa tag elemen Insya Allah langsung berhasil. Untuk lebih jelasnya berikut langkah langkahnya.

Pertama masuk ke akun blogger anda lalu KLIK Template => Edit HTML => Lanjutkan Kemudian CENTANG pada Expand Template Widget lalu cari kode ]]></b:skin> untuk memper cepat atau memudahkan pencarian CTRL+Fkemudian copy paste kode ]]></b:skin> pada kolom yang muncul. Setelah menemukan kode di atas copy kode di bawah ini kemudian pastekan pas sebelum atau di atas kode ]]></b:skin> yang telah di cari tadi.

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

Ganti yang berwarna Hijau dengan  url gambar sesuai dengan background headlines news yang anda inginkan, kemudian yang berwarna Merah boleh diganti dengan angka sesuai dengan lebar yang di inginkan.

Kemudian cari kode </head> untuk memudahkan gunakan kembali CTRL+F. Setelah ketemu Copy kode di bawah ini lalu pastekan sebelum atau 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>

Kemudian cari kode berikut ini <b:section class='header' id='header' . hingga kurang lebih seperti berikut ini.  

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

Setelah ketemu kode seperti di atas copy kode di bawah ini kemudian pastekan pas dibawahnya berikut kodenya.

<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("example1", "example1class", 3000, "_new") cssfeed.addFeed("Latest Movies", "http://GANTI DENGAN URL BLOG ANDA/feeds/posts/default") //Specify "label" plus URL to RSS feed cssfeed.displayoptions("date") //show the specified additional fields cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date cssfeed.entries_per_page(1) cssfeed.init() </script><br /> </div> </div> <div style='clear:both;'/> </div>

Ganti tulisan url Blog ANDA misanya url blog saya : pekalongan-zul.blogspot.com lalu klik Simpan Template dan lihat hasilnya.