Rabu, 04 Agustus 2010

Cara membuat menu bar pada blog

| Rabu, 04 Agustus 2010 | 16 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(http://3.bp.blogspot.com/_C6KkooKXCEw/S_pAYyD7wvI/AAAAAAAAF0A/hwsUD_hlo_o/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(http://1.bp.blogspot.com/_C6KkooKXCEw/SiP-v5e8XPI/AAAAAAAAEUY/-xpJkShHdqA/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 :)

16 komentar :

vos©ot mengatakan...

wah2, menu bar~ asyik nih kayaknya....cobain ah

PIK Remaja Al-Hikmah mengatakan...

Ku ambil codenya kawan, langsung ku coba nich buat nambah-nambah pengetahuan

Muhammad Chandra mengatakan...

mantab kawan
Salam:

Batch File Programming | Keajaiban Om Google | Dunia Tips dan Trick | Free Software

sofilmendo mengatakan...

wah,, kayaknya seru sob,, thank ya tutorialnya...

Ka Damar mengatakan...

nav menu bar y :D

PIK Remaja Al-Hikmah mengatakan...

Kira-kira mempengaruhi loading blog ga shob, coz mau pasang atut klo blog jd berat

wiz mengatakan...

kebanyakan css ngabisin benwit nih, tapi memang oke dari segi tampilan...dan kalo cuma pake hosting gratisan, ya woke woke ajah...

Serba Blog mengatakan...

wah keren nich...
nyoba ah,,

Gieterror mengatakan...

wahhh tambah cantik tampilannya kalo pake menubar yya,,,
mksi kawan infonya

AZ COMSOFT mengatakan...

kebetulan saya baru aja ganti template danmau pasang navbar

coretan blogger 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

prayuza zafin mengatakan...

tengkiuu sob..ini yag saya cari-cari..izin coba

budi2610 mengatakan...

Makasih sob infonya.
Bermanfaat sekali buat aku.

mieny_angel mengatakan...

mau coba ah ;;)

Blinking4u mengatakan...

Hai....Blog yang kreatif salam sukses aku dah pake tips'y makasih ya......terus berkarya......

Said cah bument mengatakan...

mantab, artikelnya. salam kenal ya.
gan, follow blogku donk
www.saidoto.co.cc
terima kasih

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Poskan Komentar

 

Blogroll

Flagcounter

free counters
© Copyright 2010. K-blogger . All rights reserved | K-blogger is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com
Pasang Iklan Gratis Sebagai Awal Mulai Bisnis Online