Cara Membuat Pesan Melayang Di Atas Header

Kali ini Saya akan membahas cara membuat pesan melayang di atas header.

Dengan memasang tutorial ini, pengunjung akan tahu pesan yang kita sampaikan.

Demo bisa dilihat pada header blog Saya ↑

Tanpa berlama-lama langsung saja ke cara pembuatannya.

Caranya :

• Login ke blogger.com, jika sudah,
• Pilih Template → Edit HTML → Expand Template Widget
• Cari kode ]]></b:skin> agar mudah mencari tekan f3
• Letakkan script di bawah ini di atas kode ]]></b:skin>

#DADnavbar{
font-family: Comic Sans Ms;
font-size: 8pt; color: #7b0000;
background:url(http://widgets.amung.us/classic/00/1.png) no-repeat center left fixed black;
border: 3px double #7b0000;
padding: 3px;
z-index: 100000000;
top: 2px; left: 2px; right: 2px;
position: fixed;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
}
#DADnavbar .dmnavleft{float:left;font-weight:bold;padding:2px 10px;}
#DADnavbar .dmnavright{float:right;padding:0px 2px;}

• Kemudian cari kode </body>
• Letakkan script di bawah ini di atas kode </body>

<div id='DADnavbar' style='position:fixed;'>
<span class='dmnavleft'>
Welcome To Surya Chandra Gobel ! Silahkan Melihat-lihat !
</span>
<span class='dmnavright' style='font-family:verdana;'>
</span>Jangan Lupa Berkomentar. Thx !</div>

• Simpan dan lihat hasilnya

Keterangan :

• Tulisan berwarna merah adalah kode warna font dan border, bisa Anda ganti dengan warna lain.
• Tulisan berwarna biru adalah deskripsi pesan yang disampaikan.

Selamat mencoba !