Menampilkan News Line

Kemarin sempat jelajah-jelajah blognya pendekar adsense, nemu salah satu trik blogging untuk menampilkan status line ala firefox. Contohnya ya bisa dilihat langsung di blog nya pak Cosa di bagian paling atas, ada pesan kecil tampil mirip alertnya mozilla firefox saat ada plugin yang belum di install. Pada tulisan tersebut beliau memberikan trik untuk buat yang begituan. Namun beliau mengkhususkan penggunaan trik tersebut untuk wordpress, walau beliau juga menyebutkan trik ini juga bisa dipakai untuk blogspot.

Trus iseng-iseng sedikit saya modif, dengan menggabungkan tips tersebut dengan tips auto hide navbarnya blogspot. Agak seneng juga sih saat berhasil...hasil utak-atik tersebut, jadinya adalah:

Statusline ala firefox yang saat mouse over (cursor focus), status line tersebut akan secara otomatis tampil. dan ketika cursor tidak focus padanya, status line tersebut akan hilang. Contohnya bisa dilihat diSINI.

Coba arahkan cursor anda di bagian paling atas halaman, insyaAllah akan tampil pesan yang saya maksudkan.

Tertarik untuk membuatnya? Berikut ada trik sederhana untuk membuatnya:

Sediakan code CSS untuk statusline (kita sebut newsline aja ya..! :D) tersebut. Contohnya:


#newsline{padding:5px;background-color:#f2ff91;margin:0;border:3px inset #c7d93f;width:100%;left:0px;top:0px;position:absolute;font-family:sans-serif;font-size:1em;text-align:center;opacity:0.0;filter:alpha(Opacity=0)}

#newsline:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}



Letakkan di bagian CSS blogspot Anda, Tepatnya di atas code ]]></b:skin>.



Setelah itu, letakkan code berikut ini di dalam body. Contohnya, letakkan saja di atas code </body>


<div id="newsline" class="newsline">
pesan yang ditampilkan taruh disini
</div>


Andaikan anda tidak ingin newsline tersebut hilang saat cursor tidak focus, maka anda bisa menghapus code yang saya tandai warna hijau, maka newsline tersebut akan tetap tampil :).
Sudah? Silakan Simpan saja. Dan lihat hasilnya!

Silakan dimodifikasi sesuai selera Anda. Jangan lupa komentarin postingan ini, baik berhasil ataupun gagal.

Terima kasih. :)