Cara Memasang Headline News di Blog

Cara Memasang Headline News di Blog

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.

  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

About

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.

Next
« Prev Post
Previous
Next Post »

2 komentar

Click here for komentar
M Afrizal Majid
admin
16 Juli 2013 pukul 10.20 ×

mantap (y) tutorialnya komplit thanks gan

Reply
avatar
Unknown
admin
16 Juli 2013 pukul 10.30 ×

thanks kunjungannya gan..

Reply
avatar

# Silahkan Anda Berkomentar dengan Baik dan Sopan
# Pesan dilarang Mengandung SARA dan Spam
# Terima Kasih Telah berkunjung di Blog Sederhana ini ConversionConversion EmoticonEmoticon

:)
:(
=(
^_^
:D
=D
=)D
|o|
@@,
;)
:-bd
:-d
:p
:ng
:lv
Thanks for your comment
Langganan: Posting Komentar (Atom)