Cara Membuat Top News alias Headline News Melayang

Top News adalah sebuah menu untuk meletakkan informasi terbaru dari sebuah berita. Dalam perkembangannya Top News a.k.a Breaking News juga sering digunakan publisher untuk memasang iklan. Posisinya yang melayang sangat menguntungkan bagi publisher yang ingin mendapatkan penghasilan lewat adsense.

Dibandingkan dengan posisi iklan pada umumnya yang terletak di header atau sidebar sebuah situs, posisi melayang jauh lebih efektif dan efisien menjaring pembaca untuk mengeklik iklan. Saya sendiri pernah memasang iklan mini diam di tempat pada posisi ini. Dan hasilnya sangat luar biasa fantastis.

Sayangnya untuk saat ini semua advertiser melarang posisi ini karena dianggap merugikan pihak pemasang iklan. Inilah salah satu bentuk ketidakadilan dari iklan Pay Per Click atau biasa disingkat PPC. Padahal pada posisi inilah peluang untuk dikunjungi pembaca semakin besar. Apa mereka takut membayar pemain ppc yang semakin hari jumlahnya semakin banyak?

Terlepas dari melanggar Term Of Service atau tidak, saya hanya ingin berbagi ilmu pengetahuan yang aku kuasai. Dalam hal ini yang aku maksud adalah bagaimana cara memasang headline news melayang dalam sebuah blog. Trik ini hanya memanfaatkan kode css saja tanpa javascript. Jadi bisa dipastikan tidak akan berpengaruh banyak terhadap loading blog anda. Justru website anda akan terlihat unik dan menarik dengan adanya menu ini.

Berikut cara membuat Breaking News melayang di Blog selengkapnya:
1. Login ke www.blogger.com
2. Klik template kemudian edit html seperti biasa
3. Cari kode ]]></b:skin> dengan bantuan CTRL + F
4. Jika sudah ketemu, silahkan salin kode dibawah ini tepat diatasnya.

#headline{position:fixed; bottom:-3px; right:0px; left:0px; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAiA6AfsKzIyU485dqvK7h6UKcVALw_0R_5oTswDCQREXrMtrHV8Hyz3Wddp9QpeMJGx1s-FbVqzpduF4KxNwmlaDrR-4FAKfeO2PXuds2E06lWebI90z_Ym3s5AkQ8tKpDDoe1At_yocB/s1600/top-news.jpg') left no-repeat, url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8dK7wJmd9cZM6w2-vPnoOsPPpFFgrwJ_Oh_wk7LW36UlUiAzBZBhxfmFJEa2VwqSUHVZQp4wlPuKltBrVdn-RCoVumpxDOcoiVAW7dbQEJT8GYQjlPkDDXt9e8rp9hKgKHo5R61qP14L/s1600/top-background.jpg') repeat-x; height: 27px;}
#headline-news{position:relative; top:0px; left:128px; color:blue; font-size:16px;}

5. Jika sudah sekarang cari kode </html> dengan bantuan CTRL + F juga
6. Setelah itu copy paste kode dibawah ini dan letakkan tepat diatas kode tersebut.

<div id='headline'><div id='headline-news'><marquee scrollamount="3" onmouseover="this.stop()" onmouseout="this.start()">
Letakkan kode iklan atau tulisan kamu disini....
</marquee></div></div>

7. Simpan template dan lihatlah hasilnya

Demikianlah tutorial singkat cara membuat breaking news melayang di blog. Semoga trik ini bisa menjadi bahan pembelajaran bagi temen-temen yang sedang menekuni dunia web designer. Jika sudah ahli, jangan segan-segan untuk berbagi kepada teman yang membutuhkan bantuan. Ingat, ilmu yang dibagikan akan jauh lebih bermanfaat daripada ilmu yang disimpan untuk dirinya sendiri.