Membuat Headline News Di Bawah Header

Membuat Headline News Di Bawah Header

Pagi ini akan saya coba share cara Membuat Headline News Di Bawah Header seperti yang ada pada blog Kompi Ajaib ini yang letaknya di bawah header. Kebetulan pada waktu yang lalu ada nanya bagaimana cara membuat latest post / headline news seperti blog Kompi Ajaib. Headline News ini menampilkan 10 postingan terbaru dari blog Anda.

Silahkan Anda masuk di Dashboard >> Template >> klik Edit HTML >> centang pada Expand Widget Templates karena kita akan sedikit mengobok-obok HTML. Setelah itu silahkan cari kode ]]></b:skin> , gunakan CTRL + F pada keyboard untuk memudahkan pencarian. Setelah ketemu silahkan copy kode di bawah ini dan paste DI ATAS kode tadi.

.headline-wrapper{background:url(https://lh3.googleusercontent.com/-leV22rchdzc/UAP58mLNrFI/AAAAAAAADb4/sRUlcvkSIsA/s38/headline-bg.png) repeat-x;width:960px;height:30px;margin:0 auto;padding:0 auto}
.headline{width:960px;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}

Perhatikan tulisan https://lh3.googleusercontent.com/-leV22rchdzc/UAP58mLNrFI/AAAAAAAADb4/sRUlcvkSIsA/s38/headline-bg.png yang berwarna merah. Itu adalah gambar yang akan menjadi background headline news. Silahkan sesuaikan warnanya dengan warna dari tema blog Anda. Silahkan buat gambar yang kecil saja kira-kira ukuran sizenya sekitar 200 - 300 byte saja. Di sini saya bikin gambar dengan pixel dimensinya lebar 7 pixels dan tingginya 38 pixels di Photoshop dan save dengan format png. Kemudian upload gambar Anda tadi dan ganti url yang berwarna merah tersebut dengan url gambar Anda tadi. Untuk tulisan 960px, itu ukuran lebar headline news. Silahkan sesuaikan dengan lebar headernya atau header-wrapper.

Kemudian cari kode </head> dan copy kode di bawah ini kemudian letakan DI ATAS  kode tadi.

<script src='https://www.google.com/jsapi?key=ABQIAAAAlQIoliUVPjZwD8UDgw_U3RTUhB4JyH-ajz-fA9t4yePPPdGAfRTC_mtuh6Iq1MLEipD0I2rCi30Png' type='text/javascript'/>
<script src='http://kompiajaib.googlecode.com/files/newsticker2.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 <b:section class='header' id='header' dan Anda akan melihat kode seperti di bawah 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'>

Silahkan copy kode di bawah ini dan letakan SETELAH / DI BAWAH kode tadi. 

<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;'>
Latest Posts :
</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://kompiajaib.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>

Tulisan Latest Posts yang berwarna merah tersebut bisa Anda ganti dengan Headline News atau yang lainnya. Tulisan kompiajaib.blogspot.com silahkan Anda ganti dengan blog Anda. Namun di sini Anda harus sudah membuat atau mempunyai akun Feedburner blog Anda agar headlinenya bisa berjalan.

Sehingga penampakannya akan tampak seperti di bawah 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'>

<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;'>
Latest Posts :
</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://kompiajaib.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>

Setelah itu silahkan lakukan review untuk memastikan pemasangannya sudah benar atau belum. Kemudian save dan selesai.

Demikian sharing cara Membuat Headline News Di Bawah Header kali ini. Sebenarnya headline ini bisa juga Anda letakan di atas header tergantung bagaiman selera Anda saja. Yang penting jangan takut untuk mencoba sesuatu yang baru. Semua orang pernah mengalami trial and error.