Cara Memasang Headline News di Blog

Headline News di blog adalah salah satu fitur blog yang juga membuat blog anda tampak menarik dan keren. Jika didunia nyata Headline News menampilkan berita-berita terbaru, maka headline news di blog juga menampilkan postingan-postingan terbaru dari blog anda. Langsung saja deh, buat anda yang ingin memasangnya juga seperti yang ada di blog saya ini, silahkan ikuti langkah singkat dibawah ini.

Cara Memasang Headline News di Blog :

1. Login ke akun blogger anda
2. Klik Template > Edit HTML lalu centang pada Expand Template Widget
3. Cari kode ]]></b:skin> lalu letakkan kode dibawah ini tepat diatasnya
   Klik Buka untuk Melihat Script:

   /* News Ticker Wrapper
   ---------------------------------------------*/
   .newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw97Je1fk874LTMXCmL_qKi_thmvNa9sZ9iRb_2cFQDOQrkcVFfxiquWFYLj1uKblsyuXWWg6jx2AM_bpekh-fuJfNbiIwyEb1BoY5lL9j_PVsilmYMi8O56v-bEgRWzf-t9fhcyQkA3c/s1600/cth-2.gif) no-repeat top left;width:910px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}
   .news {width: 910px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
   .news a:link, .news a:visited{color:#fff;text-decoration:none;}
   .news a:hover {color:#ddd;text-decoration:underline;}
   Keterangan :
   
   • Silahkan ganti Url gambar yang berwarna merah dengan gambar yanga anda mau, contoh gambar yang bisa anda gunakan, bisa anda lihat di blog temen saya disini
   • sesuaikan juga lebar headline news dengan lebar blog anda, silahkan sesuaikan angka yang berwarna biru diatas
4. Selanjutnya cari kode </head> , kemudian letakkan kode dibawah ini tepat diatas </head>
   
   Klik Buka untuk Melihat Script:

   <script src="http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA"> <script src='http://rudi-break.googlecode.com/files/breaking.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: #ff0;} #example1 a:link, #example1 a:visited {color:#ffd966;text-decoration:none;} #example1 a:hover {color:#C8D3F2;text-decoration:none;} </style>

5. Headline news bisa diletakkan sesuai keinginan anda bisa dibawah navigasi menu atau diatas navigasi menu seperti blog saya ini. kode yang biasa dipakai untuk membuat navigasi menu yaitu seperti ini.
   
   (letakkan kode nya disini, jika ingin berada diatas navigasi menu)
   <div class='menu horizontal'>
   ...........................................
   ...........................................
   </div>
   (letakkan kode nya disini, jika ingin berada dibawah navigasi menu)
   
   atau punya saya seperti ini :
   
   (letakkan kode nya disini, jika ingin berada diatas navigasi menu)
   <div id="toppic">
   <div id="topwrapper">
   <ul id="top">
   ....................................
   ....................................
   ....................................
   </ul>
   </div>
   </div>
   (letakkan kode nya disini, jika ingin berada dibawah navigasi menu)
   
   Jika anda sudah menemukan kode navigasi anda, silahkan copy dan paste kode dibawah ini dan letakkan tepat sesuai petunjuk diatas.
   Klik Buka untuk Melihat Script:

   <div class="newspic"> <div style="float: left; overflow: hidden; padding: 6px 0 6px 180px; position: relative; width: 780px;"> <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://rudihartoyo.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>

   Silhkan ganti url blog yang berwarna merah, dengan alamat blog anda 
6. setelah selesai, lihat pratinjau terlebih dahulu untuk memastikan tidak ada error, setelah itu simpan Template
7. Selesai.

Selamat mencoba, Semoga tutorial sederhana tentang Cara Memasang Headline News di Blog bermanfaat ^_^..
Ingin membuat  Spoiler dalam postingan seperti yang diatas dengan tombol buka dan tutup, silahkan lihat disini

• Tweet
• Share
• Share
• Share
• Share

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post