Cara buat menu blog / Cara buat menu bar

ikhsanudin on

Thursday, February 14, 2013

Menu bar adalah sebuah bar yang biasanya berada dibawah header atau atas header.

• HOME
• Tutorial
• Blogger
• Wordpress
• Facebook
• Twitter

Pada template asli / bawaan blogger biasanya menu bar ini belum terpasang, sebenarnya kita juga bisa membuat menubar melalui menu Layout > Add Gadget. tetapi kali ini kita coba membuat menu bar dengan menggunakan kode html

1. Jangan lupa Login ke blogger
2. Template >>> Edit HTML (Contreng "Expand Template Widget " )
3. Letakkan kode berikut dibawah

</header>

<style> #exenav-left{float:left; display:inline; width:100%; padding-left:2px; padding-top:5px} #exenav{clear:both; margin:0 auto} #exenav ul{position:relative; overflow:hidden; padding:0; margin:0; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:12px} #exenav li{cursor:pointer; float:left; margin:0 1px 0 0; padding:0 1px 0 0; height:40px; display:inline;} #exenav ul li a, #exenav ul li a:visited{text-decoration:none;border:0px solid #000000; margin:0 1px 0 0; float:left; padding:8px 9px; color:#fff; font-weight:bold; font-size:12px;margin-top:-2px; background:#0000FF; border-radius:4px 4px; -moz-border-radius:4px 4px 0 0; -khtml-border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0} #exenav ul li a:hover{border:2px solid #111; background:#FF0000 top left repeat-x; border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px} #exenav ul li a.current, #exenav ul li a.current:visited, <!--ikhsanu.blogspot.com --> a:hover {text-decoration:none;} a img {border-width:0;} #hb{height:40px;margin-bottom:10px; margin-top:50px; background:#0000FF; border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px} #exenav-element{width:100%; margin-top:-24px; padding:0} </style><br /> <div id='hb'><div id='exenav-element'><div id='exenav-left'><div id='exenav'><ul><li><a href='http://ikhsanu.blogspot.com'>HOME</a></li> <li><a href='http://ikhsanu.blogspot.com'>Tutorial</a></li> <li><a href='http://ikhsanu.blogspot.com'>Blogger</a></li> <li><a href='http://ikhsanu.blogspot.com'>Wordpress</a></li> <li><a href='http://ikhsanu.blogspot.com '>Facebook</a></li> <li><a href='http://ikhsanu.blogspot.com'>Twitter</a></li> </ul></div></div></div></div>

4. Ganti url http://ikhsanu.blogspot.com dengan link yang kita inginkan
5. save