• About
  • Contact
  • Sitemap
  • Buku Tamu

Membuat Headline News Melayang di Blog

 on Nov 27, 2013  

Membuat Headline News Melayang di Blog, Headline News Berjalan di blog, headline di blogger yang berjalan, headline news melayang untuk blogspot atau entah apalagi lah namanya menurut blogger. Widget Blog ini berguna untuk menampilkan beberapa artikel terbaru blog dengan cara melayang dan berganti-ganti agar selalu dilihat pengunjung blog. Lihat contohnya yang ada diatas pada blog ini.


Beberapa waktu lalu ada pengunjung blog ini yang menanyakan Bagaimana Cara Membuat Headline News di Blog nah demi memenuhi permintaan pengunjung *ciee* kali ini saya akan bagikan Wiget Headline News yang keren ini muehehehe.

OK sebelumnya saya ucapkan terimakasih kepada Mas Taufik Niurrochman karena saya memakai breadcrumb melayangnya sebagai dasarnya dari Headline News Melayang ini. Tak lupa kepada Mastemplate yang telah menyediakan kode Headline News nya *maaf gak minta ijin :p*, dan terimakasih juga kepada diri saya sendiri yang sukses puyeng dibuatnya *maklum nubi dalam utak-atik css*. Terimakasih kesiapa lagi ya? Oia Terimakasih kepada pembaca blog ini, kepada yang copas artikel ini *maybe* dan memberikan sumber live linknya.

Lanjut ke pokok bahasan Membuat Headline News Blog, pertama login Blogger > Dashboard > Template > Edit HTML > Expand Template Widget > Tekan Ctrl + F pada keyboard kemudian ketikkan dan temukan kode ini ]]></b:skin>  letakkan css berikut tepat diatas kode tersebut

.headline-wrapper{position:fixed;background:#333 repeat-x bottom;width:98%;height:29px;border-bottom:3px solid #999;
padding:1px 1% 1px 1%; z-index:9999;
-webkit-box-shadow:0 0 7px #000;
-moz-box-shadow:0 0 7px #000;
box-shadow:0 0 7px #000; }
.headline{width:930px;line-height:1.4em;text-align:left;font-family:Arial;font-size:12px;color:#fff;overflow:hidden;clear:both;margin:0 auto;padding:0 auto}
.headline a:hover{color:#eace12;text-decoration:underline}

Sesuaikan dengan selera dan template anda bila warna, tinggi dan lebarnya kurang tepat.
Langkah berikutnya cari kode <body letakkan kode berikut tepat dibawahnya


<div class="headline-wrapper">
<div class="headline">
<div style="float: left; padding: 7px 5px 1px 7px;">
<img alt="feed" src="https://lh5.googleusercontent.com/-XBadRr77VlQ/UKuqlUE8yFI/AAAAAAAABBE/f98uqqUIm5g/s47/rss_rectangle.png" />
</div>
<div style="float: left; overflow: hidden; padding: 7px 0; position: relative; width: 800px;">
<script type="text/javascript">
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 3000, &quot;_new&quot;)
cssfeed.addFeed(&quot;HeadlineNews&quot;,&quot;http://anwar-lahai.blogspot.com/feeds/posts/default&quot;)
cssfeed.addFeed(&quot;Headline News&quot;, &quot;http://blif-indo.blogspot.com/feeds/posts/default&quot;)
cssfeed.displayoptions(&quot;date&quot;)
cssfeed.setentrycontainer(&quot;div&quot;)
cssfeed.filterfeed(20, &quot;date&quot;)
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div>
</div>

Ganti yang berwarna kuning dengan alamat blog Anda, terakhir tambahkan javascript ini diatas </head>

<script src='http://anwar-lahai.googlecode.com/files/headline.js' type='text/javascript'/>

Simpan template Anda. Jika berhasil maka akan menjadi seperti pada Blog Demo ini http://kopas-us.blogspot.com.

*NB : sebaiknya simpan kode js nya di hosting anda sendiri mosal yourjavascript.com

Demikian Cara Membuat Headline News Melayang di Blog semoga bermanfaat, bila ada pertanyaan silahkan tulis di komentar.

Membuat Headline News Melayang di Blog 4.5 5 Anwar Sofii Nov 27, 2013 Membuat Headline News Melayang di Blog, Headline News Berjalan di blog, headline di blogger yang berjalan, headline news melayang untuk blogspot Membuat Headline News Melayang di Blog, Headline News Berjalan di blog , headline di blogger yang berjalan, headline news melayang untuk bl...


32 comments:

  1. nice tutorial. Ijin bookmark gan .. :)

    ReplyDelete
  2. sip banget.. makasih tips nya mas

    ReplyDelete
  3. kalau kaya ini bisa buat lemot ya sob

    ReplyDelete
  4. manteb templatenya, :(
    sayang ane gak punya template model begini

    ReplyDelete
  5. Wuahhhh nice tips.

    Kunjungan baliknya yah Blogger Hack, Tips, SEO and many more.

    Thanks.

    ReplyDelete
  6. nanti bisa jadi seperti blog berita ya ada headline newsnya
    terima kasih sudah berbagi ilmu

    ReplyDelete
  7. salam BLOGGER dan salam kenal dari blogger asal kota padang, sumatra barat.
    maaf,saya masih Newbie
    yozidahfilputra.blogspot.com

    ReplyDelete
  8. wah mantep nih artikel tutorialnya,, ijin coba dulu bro

    ReplyDelete
  9. wah. ini dia :). ijin coba dulu kawan. terima kasih atas infonya. kalau ada waktu, silahkan mampir da tonggalkan komen di blog ane yak :)

    ReplyDelete
  10. mantep tutorialnya gan.. langsung dicoba...!!! :)
    sukses buat artikelnya....

    ReplyDelete
  11. udah terpasang sob :D
    thanks yak :D

    ReplyDelete
  12. thank's menarik sekali.., bikin load blog berat gk yah.?

    ReplyDelete
  13. terima kasih infonya, boleh dicoba tuh..

    ReplyDelete
  14. Semoga aku bisa mencobanya...

    ReplyDelete
  15. artikel nya ke index robot google ga bg........

    ReplyDelete
  16. Min coba cek pnya ane ada yg salah dimana yaa
    riezkyworld.blogspot.com

    ReplyDelete
  17. Mampir juga yaa Di Gubuk Sederhanaku :)
    Jangan lupa bawa Rombongan :D
    Hehehehhe

    ReplyDelete
  18. terima kasih yah mas atas tutorialnya,, saya sudah masang di blog,,, skali lagi trima kasih,, ini sangat membantu,,,
    cek di www.hiburdunia.com

    ReplyDelete
  19. Akhirnya dapat disini...izin kang langsung sedot.

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. mantap gan saya cari-cari ternyata ada yang berhasil juga ,
    makasih udah berbagi.
    http://thewitwicky.blogspot.com/

    ReplyDelete
  22. Boleh juga nih pakai headline di blog.
    makasih infonya gan :)

    ReplyDelete

Pembaca Yang Baik ialah Pembaca Yang Meninggalkan Komentar Yang Nyambung dengan isi artikel, komentarmu = sifatmu!!!
- Jangan tinggalin link dalam komentar, bila terjadi akan saya hapus!
- Dilarang Komentar kasar, kotor, dan sara!

J-Theme