Menu Horizontal Cantik Pengganti Navbar

Kang Muroi

7 Jun, 2012

Untuk sebagian blogger navbar dianggap tidak penting dan mengaggu pemandangan. Namun bisa kita siasati dengan menggantinya dengan menu horizontal cantik yang tentunya bisa mempercantik blog sobat. Demonya bisa dilihat pada blog ini.

Postingan ini sekaligus menjawab pertanyaan dari sobat Nhinis yang mempertanyakan menu diatas.

Buat sobat yang mau dengan menu diatas, silakan ikuti tutorial berikut :

Login ke blogger
Click tab "rancangan" (kalau dalam bahasa indonesia)
Terus click sub tab "Edit HTML"
Sebelum edit template sobat, ada baiknya untuk membackup templatedahulu.

Copy code dibawah ini dan paste code tersebut tepat di "diatas tag ]]></b:skin>"

/* Menu Horizontal */
#menuwrapperpic {background:#900622 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZlkouV-qooDwdwCNd6hedLQrCFnHWEgYHnmxVE5fugjEz0dqMbyljcxblYfV3ZFfS5sCCGrkXIsb3N8MukTiHl7Pn4oIeHYxp4xlqJ5WKAbpua-K_W5DUbIqxMafcSYNYXNZEJ4iqe5on/s1600/menudown.gif) repeat-x top center;width:100%;margin:0 auto;padding:0 auto;border-bottom:1px solid #333}
#menuwrapper {width:930px;margin:0 auto;height:41px;}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#menubar {width:100%;}
#menubar, #menubar ul {padding: 0;margin: 0;list-style: none;font-family:Arial;}
#menubar a {display: block;text-decoration: none;padding: 13px 12px 13px 12px;font-size:12px;font-weight:bold;text-transform:none;color:#d1d8e5;border-left:1px solid #84001A}
#menubar a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzr7uzgrZ0aYEVFExDLt9opwHKCB2k7OAFgx0RedGFcGkBLsuhRoBdEN8nlY0fLmgEfkehRLFYXlO-3KxU68GA1WVdeZplHC72Lf7ZE66zWirJIB_73D8noPLbEUoACR53nK6RjpcaG8M/s1600/arrow.gif);background-repeat: no-repeat;padding: 13px 20px 13px 12px;background-position: right center;}
#menubar li {float: left;position: relative;}
/* hide from IE mac \*/
#menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */
#menubar li ul, #menubar ul li {width:180px;}
#menubar ul li a {text-align:left;color:#d1d8e5;padding: 6px 12px;font-size: 12px;font-weight:bold;text-transform:none;font-family:Arial;border:none;}
#menubar li ul {z-index:100;position: absolute;display: none;background:#7D0019;padding-bottom:5px;}
#menubar li ul {-moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
#menubar li ul {-moz-box-shadow:0 5px 5px rgba(0, 0, 0, 0.6); -webkit-box-shadow:0 5px 5px rgba(0, 0, 0, 0.6);filter:alpha(opacity=95);-moz-opacity:.95;opacity:.95;}
#menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#7D0019;color:#d1d8e5;text-decoration:none;}
#menubar li:hover ul, #menubar li.hvr ul {display: block;}
#menubar li:hover ul a, #menubar li.hvr ul a {color:#d1d8e5;background-color:transparent;text-decoration:none;}
#menubar li ul li.hr {border-bottom:1px solid #9A001F; border-top:1px solid #5D0013; display:block; font-size: 1px; height: 0px; line-height: 0px; margin:4px 0; }
#menubar ul a:hover {background-color: #3B0B0B!important;color: #d1d8e5 !important;text-decoration:none;}

Selanjutnya copy juga code dibawah ini dan paste tepat dibawah tag "<body>"

<div id='fixed'>
<div id='fixedinner'>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>

<li><blink><a href='/'>Home</a></blink></li>
<li><a href='url Google Plus'>About Me</a></li>
<li><a class='trigger' href='#'>Contact Me</a>

<ul>

</ul>
</li>
<li><a href='#'>Blogger Templates</a></li>
<li><a href='#'>Top Commentators</a></li>
<li><a class='trigger' #'>Buku Tamu</a>

</li>
<li><a href='#'>Daftar Isi Blog</a></li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
</div><!-- end fixedinner -->
</div><!-- end fixed -->

Silakan sobat meng-custom menu horizontal dengan selera sobat masing-masing dengan merubah warna background, tulisan dan lain-lain. Untuk memilih warna, silakan sobat bisa lihat DISINI.
Ganti tanda # dengan url sobat.

Semoga bermanfaat, happy blogging....

Unknown June 7, 2012 at 6:18 PM

keren nih menu horisontalnya sobat...
- Kang Muroi June 7, 2012 at 9:54 PM
  
  makasih sob, happy blogging
Reply
Benny Dwi June 7, 2012 at 7:25 PM

hahayy,,
matap lah, mungkin yg template bawaannya gak ada menu bisa di tambahin pake script sobat ini :D
- Kang Muroi June 7, 2012 at 9:55 PM
  
  hampir semua template tidak ada menu seperti ini sob, silakan kalo berminat bisa dipasang, trims
Reply
Dini Haiti Zulfany June 7, 2012 at 7:27 PM

Baeklah, terimakasih tipsnya akhi..
- Kang Muroi June 7, 2012 at 9:56 PM
  
  sama sama, trims silaturrahimnya
Reply
Aryadevi June 7, 2012 at 7:50 PM

sip mas mau sy coba
- Kang Muroi June 7, 2012 at 9:57 PM
  
  silakan sob, bisa di custom sendiri sesuai dengan warna templatnya
  
  trims kunjungannya
Reply
ubaybingokil June 7, 2012 at 8:36 PM

mantappp....

happy blogging bang Muro'i :)
- Kang Muroi June 7, 2012 at 9:58 PM
  
  makasih bang ubay..
  
  happy blogging juga!
Reply
Anak Rantau June 7, 2012 at 10:48 PM

Kayaknya bagus juga kalo di modif kayak gini menu horisontalnya ya sob hehehe...
- Kang Muroi June 7, 2012 at 11:06 PM
  
  ya kalo tertarik silakan sob, boleh dicoba
  makasih kunjungannya:}
Reply
Kertas Gratis June 7, 2012 at 11:16 PM

makasih kang infonya
- Kang Muroi June 7, 2012 at 11:19 PM
  
  sama sama sob, makasih juga kunjungannya
Reply
penyuluh perikanan June 7, 2012 at 11:25 PM

Terima kasih sobat atas postingannya, menu Horisontal memang sangat keren, terima kasih kawan, jangan lupa mampir juga yah...
- Kang Muroi June 8, 2012 at 8:59 AM
  
  sama sama sob, oke deh langsung ke TKP
Reply
Unknown June 8, 2012 at 4:54 AM

menu horizontalnya yang seperti terpasang di blog sobat ini kan???
- Kang Muroi June 8, 2012 at 8:59 AM
  
  ya bener sob, makasih sudah berkunjung lagi
Reply
Asuka June 8, 2012 at 6:06 AM

Waduh, navbar gue terlanjur ilang sob. Lupa cara munculin nya lagi.
- Kang Muroi June 8, 2012 at 9:00 AM
  
  ya bisa diganti dengan menu ini sob jika mau
Reply
Kang Ajay June 8, 2012 at 7:34 AM

lumayan kang kemarin saya cari cari tidak ketemu,eh taunya di sini,
hatur nuhun kang.
ke bde di cobaian abdi teu gaduh menu
- Kang Muroi June 8, 2012 at 9:01 AM
  
  sami sami kang, mangga di cobian semoga berhasil
Reply
Madhek Blog June 8, 2012 at 9:02 AM

Bagus Sob, ... nambah ilmu lagi nih.
- Kang Muroi June 8, 2012 at 9:03 AM
  
  makasih sob atas kunjungan perdananta, happy blogging
Reply
Unknown June 8, 2012 at 12:14 PM

menu horizontal di blog saya sudah ada bang. jadi cuma mau nyimak aja deh *peace*
- Kang Muroi June 8, 2012 at 2:48 PM
  
  oke sob ga papa, makasih kunjungannya
Reply
emmethe June 8, 2012 at 12:43 PM

hahaiy ... :D
kayanya kalo tmpelate blog bawaan bloger pake kode ini, lebih cantik ...
- Kang Muroi June 8, 2012 at 2:49 PM
  
  yah bisa jadi sob, tapi tergantung templatenya sih, bisa cocok bisa ga
  happy blogging
Reply
Uswah June 8, 2012 at 1:15 PM

aduh,, tiap coba2 gt selalu amburaDUL bang desainku :/
- Kang Muroi June 8, 2012 at 2:53 PM
  
  ngoprek template memang butuh kesabaran dan ketelitian, jadi jangan putus asa, boleh coba-coba lagi
Reply
stupid monkey June 8, 2012 at 3:37 PM

iya sob, saya juga pasti bakal ilangin navbar tuh, tp asik juga nih kl di ganti jadi menu horison ya, hmmm, tapi kira2 diisi apa ya, hmmm, okey, makasih sob :D
- Kang Muroi June 8, 2012 at 5:30 PM
  
  hmm kok bingung, apaan aja deh, yg penting ada gunanya hehe
  
  trims kunjungannya
Reply
Jane Doe June 8, 2012 at 4:42 PM

Sama nih papan komentnya! hehe
- Kang Muroi June 8, 2012 at 5:31 PM
  
  iya sob, kebetulan kali hehe, maaf yah yang dari sobat ane pake sebentar, biar ga bosen gitu:]
  
  happy blogging sob
Reply
ICAH BANJARMASIN June 8, 2012 at 8:31 PM

Nahhhh...ini yang mantef bang Muro'i...sipppppp...hahahhayyy
- Kang Muroi June 8, 2012 at 9:01 PM
  
  makasih bang icah hahayyy
  
  happy blogging
Reply
Anonymous June 9, 2012 at 1:35 AM

wah keren nih menunya :D

admin " variasi blogger "

Reply
Unknown June 9, 2012 at 4:42 AM

mampir lagi sobat, wah belum juga ada postingan terbaru yach sobat???

Reply
Blog Keperawatan June 9, 2012 at 6:42 AM

Trima kasih sahabat atas berbagi pengetahuannya ini tentang cara membuat menu horisontal

Reply
cerita anak kost June 9, 2012 at 8:37 AM

mmakasih nie gan, buat koleksi lah. lumayan. heheh, tenkyu ya.

Reply
Anonymous December 9, 2012 at 4:56 PM

NICE ARTCLE
VISIT ME BACK AT BANGJONI.COM

Reply
PSDink March 14, 2013 at 7:45 AM

jajal praktek gan

Reply

Add Comment