Cara membuat menu bar pada blog

Diposting oleh Hizrian di 03.22 | Rabu, 04 Agustus 2010 | 17 komentar

Selamat membaca artikel diblog ini semoga bermanfaat :)

Pernahkah kamu melihat menu bar pada blog? mungkin ada yang bilang pernah ataupun belum pernah,bagi yang belum lihat bisa anda lihat di ZOOMTEMPLATE ataupun di Zona bebas
Inilah screenshot
Menu yang dimaksud adalah menu yang diatas

Setelah melihat screenshot bagi anda yang tertarik dapat mengikuti tutorial berikut:
1. Masuk ke blogger
2. Pilih rancangan --> edit html
3. Cari kode <body> lalu paste kode dibawah ini dibawahnya

<div id='mta_bar'>
<div class='mta_bar bar_logo'>
<a href='http://k-blogger1.blogspot.com/'>K-blogger</a>
</div>
</div>
<style>
#mta_bar{position:absolute}
#mta_bar{ background:#6D0290 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzXCfxRveC1zU3nby785-x1N2mu2zh7644j-QMwH1v_kVi7N-W-v2TjBgSNv2k2CTcF5B1bzg2yO1xM_lndOJ8pz1lTqojnV33AJWewf71qqRJtz1XiPmKwrPQN4aTKyvaAzlVLeo2VmAj/s400/nav-hover.jpg) top left repeat-x; border-bottom:1px solid #8704B3; z-index:100; padding-top:6px; width:100%; top:0; left:0; overflow:auto; height:25px; overflow:hidden }
#mta_bar .bar_logo{float:left; padding-left:7px; text-align:left; font-family:Arial; font-size:14px; font-weight:bold; font-style:normal; color:#fff; width:150px; padding-top:3px}
#mta_bar .bar_logo a{background:url(http://www.blogger.com/favicon.ico) 0px no-repeat; text-decoration:none; color:#fff; padding-left:21px; }
#mta_bar .bar_logo a:hover{text-decoration:underline; color:#fff}
#mta_bar .bar_search{float:left; padding:0; margin:0px; text-align:left; font-family:tahoma; font-size:14px; font-weight:bold; font-style:normal; color:#fff; width:165px}
#mta_bar .bar_search a{text-decoration:none; color:#fff; padding-left:21px; padding:0}
#mta_bar .bar_search a:hover{text-decoration:underline; color:#fff}
#mta_bar .bar_GoogleAds{float:right; text-align:left; font-family:tahoma; font-size:13px; font-weight:normal; font-style:normal; color:#999; width:468; padding:3px 1px}
#mta_bar .bar_share{float:left; text-align:left; font-family:arial; font-size:13px; font-weight:normal; font-style:normal; color:#fff; padding:3px 0px; width:140px}
#mta_bar .bar_share a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyvc2fmk1zXyE2KKVJpHlsXTO8MRqHoCYE3OYpPeo9Zt7hRU3ro3Mrh6sMhsQ4B6W0kbD2qnPYWl1lqqNfZu50VRgEE7WAfIDIF6Dup-jY_9HVgliDlTvjD9nXymruAgm_SaNq8tW-iGDH/s400/submit.png) 0px no-repeat; text-decoration:none; color:#fff; padding-left:21px; }
#mta_bar .bar_share a:hover{text-decoration:underline; color:#fff}
#mta_bar .bar_hide{float:left; text-align:left; font-family:arial; font-size:13px; font-weight:bold; font-style:normal; color:#fff; padding:3px 0px; width:50px}
#mta_bar .bar_hide a{background:url(http://js-kit.com/images/stars/gold.png) 0px no-repeat; text-decoration:none; color:#fff; padding-left:21px; }
#mta_bar .bar_hide a:hover{text-decoration:underline; color:#fff}
</style>

4. Lalu simpan template :)

17 komentar :

PIK Remaja Al-Hikmah mengatakan...: Ku ambil codenya kawan, langsung ku coba nich buat nambah-nambah pengetahuan; 4 Agustus 2010 pukul 04.21
Muhammad Chandra mengatakan...: mantab kawan
Salam:

Batch File Programming | Keajaiban Om Google | Dunia Tips dan Trick | Free Software; 5 Agustus 2010 pukul 03.28
sofilmendo mengatakan...: wah,, kayaknya seru sob,, thank ya tutorialnya...; 5 Agustus 2010 pukul 04.56
Ka Damar mengatakan...: nav menu bar y :D; 5 Agustus 2010 pukul 06.00
PIK Remaja Al-Hikmah mengatakan...: Kira-kira mempengaruhi loading blog ga shob, coz mau pasang atut klo blog jd berat; 5 Agustus 2010 pukul 23.43
wiz mengatakan...: kebanyakan css ngabisin benwit nih, tapi memang oke dari segi tampilan...dan kalo cuma pake hosting gratisan, ya woke woke ajah...; 6 Agustus 2010 pukul 00.36
Rumah Imajinasi mengatakan...: wah keren nich...
nyoba ah,,; 7 Agustus 2010 pukul 05.55
AZ COMSOFT mengatakan...: kebetulan saya baru aja ganti template danmau pasang navbar; 7 Agustus 2010 pukul 18.57
Maulana Sp mengatakan...: makasih sob,kalo ane make bar yg punya Apture,menurut gw dua-duanya sama-sama keren sob,jd makasih y..
sob mohon maaf lahir batin ya..
selamat menunaikan ibadah puasa; 9 Agustus 2010 pukul 23.51
Anonim mengatakan...: tengkiuu sob..ini yag saya cari-cari..izin coba; 13 Agustus 2010 pukul 22.51
budi2610 mengatakan...: Makasih sob infonya.
Bermanfaat sekali buat aku.; 23 Agustus 2010 pukul 21.05
Unknown mengatakan...: mau coba ah ;;); 25 Agustus 2010 pukul 21.02
Blinking4u mengatakan...: Hai....Blog yang kreatif salam sukses aku dah pake tips'y makasih ya......terus berkarya......; 12 September 2010 pukul 12.50
Unknown mengatakan...: mantab, artikelnya. salam kenal ya.
gan, follow blogku donk
www.saidoto.co.cc
terima kasih; 19 Juni 2011 pukul 20.30
Unknown mengatakan...: ya saya akan coba dulu ya..; 28 Oktober 2015 pukul 00.32
Unknown mengatakan...: ya saya akan coba dulu ya..; 28 Oktober 2015 pukul 00.39