Padahal cuman iseng bikin @,@ Ternyata banyak yang minta juga. Ini dia, kalau kalian mau dan pengen banget punya simple navbar seperti punyaku diatas, berikut ini tutorial membuatnya ==v
- Kalau sudah masuk ke blogger, klik Rancangan / Design, lalu masuk ke Edit HTML.
- Copy kode dibawah ini:
#DADnavbar{
font-family: Comic Sans Ms;
font-size: 11pt; color: white;
background:url(/favicon.ico) no-repeat center left fixed black;
border: 1px solid red;
padding: 3px;
z-index: 100000000;
top: 1px; left: 1px; right: 1px;
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;}
Lalu masukkan kode tersebut diatas kode
]]></b:skin>
- Kemudian copy lagi kode dibawah ini:
<div id='DADnavbar' style='position:fixed;'>
<span class='dmnavleft'>
GANTI TEXT INI DENGAN KATA KATAMU SENDIRI (isi navbar sebelah kiri)
</span>
<span class='dmnavright' style='font-family:verdana;'>
GANTI TEXT INI DENGAN KATA KATAMU SENDIRI atau widget lain (untuk isi navbar sebelah kanan)
</span></div>
Masukkan kode tersebut diatasnya kode: </body>
- Kemudian template kamu.
Apa navbarnya selalu sama kayak DickeyMaru? Nggak ==" Kamu bisa mengubah tampilan navbarnya sesuka hati kok. Entah itu diganti warna font, ukuran dan lain-lain. Berikut ini adalah petunjuk untuk mengisi content navbar kamu, mengatur atau memodifikasinya.
- Ganti yang berwarna emas dengan font yang kamu inginkan.
- Ganti yang berwarna pink dengan ukuran font yang kamu inginkan.
- Ganti yang berwarna kuning dengan warna teks yang ada di navbar dengan warna sesukamu.
- Ganti yang berwarna coklat dengan warna background navbar yang kamu inginkan.
- Ganti yang berwarna merah dengan ukuran, style, dan warna border / garis tepi sesukamu sendiri. Jangan nanya cara gantinya gimana, cari di Google.
- Untuk yang berwarna hijau, top itu artinya, nanti navbarmu akan melayang sisi atas. Jika kamu ingin memindahkan navbarmu agar tampil di sisi bawah browser, tinggal ganti saja dengan bottom.
- Untuk kode yang ditulis miring, itu pengaturan untuk garis meengkung di setiap sudut navbar kamu. Jika kamu ingin sudut navbarmu tetep runcing, atau bentuk navbarnya tetap persegi (gak pakai melengkung) maka tinggal hapus saja kode tersebut.
- Ganti yang berwarna orange dengan teks / kata-kata atau apalah yang ingin kamu masukkan ke dalam navbar kamu. Terserah apa saja boleh asal muat :v
Untuk logo atau favicon blog kamu (yang ada di pojok kiri navbar) itu nanti akan muncul secara otomatis sesuai dengan favicon blog yang kamu pakai. Kalau belum memasang favicon, silahkan pasang faviconnya dulu.
Baca disini untuk cara memasangnya.
Semoga berhasil :D
Belum ada tanggapan untuk "Simple Navbar Blogger (Trick)"
Posting Komentar