Cara Membuat Menu Navbar / Meta Bar di Blog

Membuat Navbar Menu di Blog. Navbar menu atau Meta bar di bagian atas blog yang fungsinya mungkin untuk notice atau pemberitahuan dsb. Oh ya, cara membuat menu navbar ini hanya untuk pengguna blogger / blogspot. 

Cara membuat Navbar Menu di Blogspot

• Login ke Blog anda > Design > Edit HTML
• Cari kode ]]></b:skin> ( Gunakan CTRL + F biar gampang )
• Copy kode di bawah ini dan paste di atas kode ]]></b:skin>

#mta_bar{background:#FFFFE1 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn3kt9qbeZTKxFsqt3eLqgajDZchZ_6ZZnjKrRMLILbhiriwZTQahag9NQAwT8uCIxnuWz7AoTMlvTlnWSWZa0KyIll-gDrpH8FFEUhRe0hLZE-nQA71y2OxdYbWWiaSoeFsPs9Q_3Qo_a/s400/wow.gif?imgmax=800') repeat-x; border-bottom:1px solid #808080; margin:0 0 3px 0; padding:4px 0; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed}
* html #mta_bar{/*IE6 hack*/position:absolute; width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")}
#mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:13px; font-weight:bold; font-style:normal; color:#fff; width:65%}
#mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:13px; font-weight:normal; font-style:normal; color:#fff; width:20%}
#mta_bar .right{font-family:verdana,Arial,Helvetica,sans-serif; float:right; text-align:center; font-weight:normal; font-size:10px; letter-spacing:0; width:30px; white-space:nowrap}
#mta_bar .right a{font-size:10px; color:#fff; text-decoration:underline}
#mta_bar .right a:hover{font-size:10px; color:#fff; text-decoration:none}
#left_bar a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU-4htN2i3BNiGsUEDjS1wF6nHvo6H84CLnost8agtkd0G3bpD2-fTAXmK7pe4tcF2J8MD1BTe2DOqauI6StDWa0WqEQ0c4ZjnS2dfGd0-holEhBY2HVfOdXS5LGfu_W7-6mXOtavlfWFZ/s400/stripead-feed.gif') no-repeat; text-decoration:none; color:#fff; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:0}
#left_bar a:hover{text-decoration:underline; color:#fff}
#left_bar a:hover{text-decoration:underline; color:#00F}

• Selanjutnya cari kode </body> dan paste kode berikut di bawah </body>

<div id='mta_bar'><div id='left_bar'><span class='center'><a href='http://feeds.feedburner.com/SekedarWawasan' target='_blank'>Sekedar Wawasan</a></span> </div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;blog-triks.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4eUEgqa9uL25gnZeB60fOuFzL5CALd5jw6gfFGqFYeCuwBwnDJgVr4tECY_sRJo1_Oa5B7Lc13uQoO9e3mEKqgNYHEoGOiGwMKWd8ZtLLjwebjvyUH72b7-d8yyBejXk9wcvmohV4xyk1/s400/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>

Simpan
Catatan :

• Kode yang berwarna merah adalah Isi Link dan pesan singkat navbar menu tersebut, bebas bisa anda ganti susuai keinginan anda.
• Kode yang warna hijau adalah warna background dari navbar menu tersebut juga bisa di sesuaikan dengan warna background blog anda.

Membuat Navbar Menu di Blog

Membuat Navbar Menu di Blog ala Bamz.Us ini memang tergolong simpel dan tidak terlalu banyak modifikasi. Kalau anda cukup paham Css anda bisa mempercantik tampilan navbar menu itu sendiri. Setelah saya lihat-lihat / berkunjung ke blog lain ternyata fitur navbar menu ini banyak dipakai untuk menarik visitor agar mau berlangganan via Feed. Yah memang kemungkinan besar visitor akan tertarik untuk berlangganan dengan adanya rayuan pada navbar menu tsb :). Semoga artikel Membuat navbar menu ini bermanfaat buat sobat smua. 

Sumber

Cara Membuat Menu Navbar / Meta Bar di Blog ditulis Oleh Sekedar Wawasan pada 2011-12-16T12:39:00+07:00 dengan rating 4 oleh 95 voters on Sekedar Wawasan.

Tweet

Artikel terkait :