> > Tampilkan Status Line di Blogspot

Tampilkan Status Line di Blogspot

Posted on 2008-08-07

Kalo dulu om Cosa punya plugin untuk menampilkan status line khusus Wordpress, sekarang bersyukurlah kita *hiperbola* karena akhirnya kita juga bisa mencomot apa yang dirasakan oleh WP. Arti dari status line dalam blognya mas Cosa adalah sebagai berikut

Status bar seperti ini biasanya dimunculkan oleh Firefox pada momen-momen tertentu, seperti apabila ada jendela pop-up yang tertangkap, plugin yang tidak terinstall, dan sebagainya.
Nah...udah mudeng kan. Lanjuuuutt........

Untuk membuat status line yang contohnya daoat dilihat di bagian atas blog saya itu kodenya pendek kok. Nggak panjang kayak postingan yang satu ini. Ya...biar nggak lama langsung embat aja deh...

1. Masuk ke Blogger dengan IDnya masing-masing (lha...emang sampeyan tahu ID saya?)
2.Pilih Tata Letak -> Edit HTML.
3.Backup dulu template blog anda. Penting!...Lalu klik kotak "Expand Template Widget"
4.Cari kode ]]></b:skin>, lalu masukkan kode ini diatasnya

#topbar { visibility: hidden; z-index: 100; position: absolute;
margin:-1px; }
.statusLine { padding: 4px 0px 4px 0px; background-color: #FFF; margin: 0;
border-bottom:1px solid #e9d6ac; width: 100%; left: 0px; top: 0px; font-family:
sans-serif; font-size: 1em; text-align:center; color:#000; }
.statusLine a { color:#4f250d; text-decoration:underline; }
.statusLine a:hover{ text-decoration:none; }
.statusImg { float: right; padding-right: 4px; vertical-align: middle;
display:inline; cursor: pointer;
}

Untuk mengganti warna background, tinggal ganti kode atribut background-color: #FFF; menjadi yang anda inginkan. Atau ingin seperti yang punya saya itu, cukup ganti menjadi background-color: lightyellow;.

5.Cari kode </head>...lalu tambahkan kode dibawah ini diatasnya

<script language='javascript' type='text/javascript' src='http://istifajar.net78.net/statusline.js'></script>

Silahkan upload sendiri filenya ke hostingan anda untuk menghindari masalah "Kehabisan Bandwidth" yang pernah dialami BlogMenjerit.

6.Lalu, tambahkan kode berikut dibawah tag <body>.
<div id='topbar' class='statusLine'>
<div class='statusImg'><img src='http://imagecows.net/out.php/i3837_close.png' onclick='closebar();
return false' alt='close' /></div>
<p>Tes Pesan Status Line</p></div>

Anda bisa menghilangkan tombol close bila dikehendaki. Caranya hilangkan kode berwarna merah tersebut.

7.Terakhir SIMPAN TEMPLATE-nya....dan semoga beruntung :D

Sumber : diotak-atik dari http://weanku.blogspot.com


Category Article