Kali ini saya akan berbagi tentang tutorial membuat menu bar pada blog. Caranya lumayan susah juga sih bagi newbie seperti saya ini,karena harus mengganti warna-warna agar sesuai dengan blog yang akan dipasang. Mengapa saya membuat tutorial ini? Sebab, ada sebagian template blogger yang tidak menyertakan menu bar seperti yang saya gunakan ini. Jadi, menurut saya tidak ada salahnya untuk membuat menu bar sendiri untuk memudahkan peng-index-an. Tapi sekedar share aja biar semua juga bisa memasang menu bar sesuai keinginan agan" :) Yasudah,langsung aja kita lihat langkah"nya :
1. Langkah Pertama
-login dulu ke akun Blogger yang akan dipasang menu bar.
-masuk ke menu Design lalu pilih Edit HTML,gak pake dicentang expand widget templatenya.2. Langkah Kedua
-cari code : ]]></b:skin>
-lalu copy code di bawah ini tepat diatas code : ]]></b:skin>
(versi yang menggunakan search bar)
#NavbarMenu{background:#005094;border-top: 1px solid #3373a9;border-bottom: 1px solid #3373a9;width:968px;height:32px;color:#FFF;font:bold 8px Arial, Tahoma, Verdana;clear:both;margin:0 auto;padding:0}#NavbarMenuleft{width:758px;float:left;margin:0;padding:0}#search{width:210px;font-size:11px;float:right;margin:0;padding:0}#nav li{list-style:none;float:left;background:#005094;border-left:1px solid #3373a9;border-right:1px solid #003867;margin:0;padding:0}#nav li a,#nav li a:link,#nav li a:visited{color:#fff;display:block;text-transform:capitalize;font:normal 12px Georgia, Times New Roman;margin:0;padding:10px 9px 6px}#nav li a:hover,#nav li a:active{background:#1a4c76;color:#red;text-decoration:none;margin:0;}#nav li li a,#nav li li a:link,#nav li li a:visited{background:#005094;width:200px;color:#fff;text-transform:capitalize;float:none;border-bottom:1px solid #3373a9;border-top:1px solid #003867;font:normal 11px Georgia, Times New Roman;margin:0;padding:7px 10px}#nav li li a:hover,#nav li li a:active{background:#1a4c76;color:#fff;padding:7px 10px}#nav li a.enclose,#nav li a.enclose:visited{border-bottom: 1px solid #000;}#nav li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:170px;margin:0;padding:0}#nav li ul a{width:140px}#nav li ul ul{margin:-75px 0 0 171px}#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul{left:-999em}nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul{left:auto}#nav li:hover,#nav li.sfhover{position:static}#searchform{overflow:hidden;display:inline;margin:0;padding:0}
#searchbox{background:#ddd;margin:0;padding:0}#search input{background:transparent;color:#fff;float:left;font-size:12px;width:158px;border:1px solid #fff;font:normal 10px arial, verdana, Times New Roman;margin:7px 0 0 10px;padding:3px 7px}#search .btn{width:auto;border:0;margin:7px 0 0;padding:0}
#subnavbar{background:#004313;width:962px;height:24px;color:#FFF;margin:0;padding:0}
#subnav li a,#subnav li a:link,#subnav li a:visited{color:#f9fc01;display:block;font-size:11px;text-transform:capitalize;margin:0 5px 0 0;padding:3px 13px}
#subnav li a:hover,#subnav li a:active{color:#DCD900;display:block;text-decoration:none;margin:0 5px 0 0;padding:3px 13px}
#nav ul,#subnav ul,#subnav li{float:left;list-style:none;margin:0;padding:0}*,#nav,#subnav{margin:0;padding:0}
(versi tanpa search bar)
#NavbarMenu{background:#9A9A9A;border-top: 1px solid #AEAEAE;border-bottom: 1px solid #AEAEAE;width:968px;height:32px;color:#FFF;font:bold 8px Arial, Tahoma, Verdana;clear:both;margin:0 auto;padding:0}
#nav li{list-style:none;float:left;background:#9A9A9A;border-left:1px solid #AEAEAE;border-right:1px solid #707070;margin:0;padding:0}
#nav li a,#nav li a:link,#nav li a:visited{color:#fff;display:block;text-transform:capitalize;font:normal 12px Georgia, Times New Roman;margin:0;padding:10px 9px 6px}
#nav li a:hover,#nav li a:active{background:#dfdfdf;color:#red;text-decoration:none;margin:0;}
#nav li li a,#nav li li a:link,#nav li li a:visited{background:#9A9A9A;width:200px;color:#fff;text-transform:capitalize;float:none;border-bottom:1px solid #AEAEAE;border-top:1px solid #707070;font:normal 11px Georgia, Times New Roman;margin:0;padding:7px 10px}
#nav li li a:hover,#nav li li a:active{background:#1a4c76;color:#fff;padding:7px 10px}
#nav li a.enclose,#nav li a.enclose:visited{border-bottom: 1px solid #000;}#nav li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:170px;margin:0;padding:0}
#nav li ul a{width:140px}
#nav li ul ul{margin:-75px 0 0 171px}
#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul{left:-999em}
#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul{left:auto}
#nav li:hover,#nav li.sfhover{position:static}#searchform{overflow:hidden;display:inline;margin:0;padding:0}
#subnavbar{background:#84847D;width:962px;height:24px;color:#FFF;margin:0;padding:0}
#subnav li a,#subnav li a:link,#subnav li a:visited{color:#f9fc01;display:block;font-size:11px;text-transform:capitalize;margin:0 5px 0 0;padding:3px 13px}
#subnav li a:hover,#subnav li a:active{color:#DCD900;display:block;text-decoration:none;margin:0 5px 0 0;padding:3px 13px}
#nav ul,#subnav ul,#subnav li{float:left;list-style:none;margin:0;padding:0}*,#nav,#subnav{margin:0;padding:0}
3. Langkah ketiga
-cari code di bawah ini atau yg mirip,yang penting ada titel blog anda di code tersebut,kalo ada berarti itu yang dicari.. nah di bawah ini code yang harus dicari :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='blog title anda' type='Header'/>
</b:section>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl' title='This Blog Address'>Home</a></li>
<li><a href='#'>menu</a>
<ul>
<li><a href='#'>menu</a></li>
<li><a href='#'>menu</a></li>
<li><a href='#'>menu</a></li>
</ul></li>
<li><a href='#' title='menu'>menu</a>
<ul>
<li><a href='#'>menu</a></li>
<li><a href='#'>menu</a></li>
</ul></li>
<li><a href='#' title='menu'>menu</a></li>
<li><a href='#'>menu</a></li>
</ul></div>
</div>
4. Langkah Terakhir ,preview dulu,kalo udah berhasil langsung diSave Template.
selamat mencoba dan semoga bermanfaat bagi semua,,amiin.. :)
NB : untuk yang warna merah dan biru bisa diganti sesuai keinginan anda.
untuk yang tanda (#) ganti dengan alamat yang diinginkan dalam menu.
untuk yang tulisan (menu) ganti dengan judul menu yang diinginkan.
No comments:
Post a Comment