Cara membuat menu navigasi

ikhsanudin on

Thursday, April 4, 2013

Cara membuat menu navigasi. Menu navigasi biasanya digunakan untuk menempatkan link terpenting, yang pada umumnya menu navigasi memuat / tempat meletakkan link Home, Label Posting, About dll. dan tanpa panjang lebang menjelaskan tentang menu navigasi, berikut ini sedikit tentang Cara membuat menu navigasi :
1. Login ke blogspot / blogger.com
2. Template > Edit html dan centang Expant Templat Widget
3. Cari kode ]]></b:skin>
Masukkan kode berikut diatasnya :

#menubar{
width:920px;
height:38px;
background:#3b5998;
border-radius:2px;
float:center;
margin:0px auto;
}
#menubar-left{
float:left;
width:720px;
padding:0 0 2px 2px;
}
#menubar-right{
float:right;
width:170px;
padding-top:8px;
padding-right:18px
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
float:left;
padding:12px 10px;
color:#fff;
position:relative;
font-weight:bold !important;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
border: 1px 0px 0px 1px solid #8b9dc3;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a {
text-decoration:none;
background:#8b9dc3;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #3b5998;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:35px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #8b9dc3;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:37px;
border:1px solid #8b9dc3;
border-radius:0px 0px 0px 0px;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
#search{
border:1px solid #FFFFFF;
height:20px;
width:180px;
background:#FFFFFF;
}
#search input{
color:#777;
border:none;
}
#s-m{
font-size:11px;
width:180px;
padding-left:4px;
padding-top:5px;
margin:0;
}
#search-t #search{
background-color:#FFFFFF;
border:1px solid #FFFFFF;
border-radius:4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
-khtml-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}
#search-t #s-m{
width:155px;
padding-top:3px;
}


4. Setelah selesai yang atas, lalu cari lagi kode :

<div class='region-inner main-inner'>

Masukkan kembali kode berikut di atasnya :

<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://ikhsanu.blogspot.com/search/label/Artikel?max-results=8' title='artikel'>Artikel</a> </li>
<li><a href='http://ikhsanu.blogspot.com/search/label/Blogger?max-results=8' title='blogger, blogspot, blog'>Blogger</a></li>
<li><a href='http://ikhsanu.blogspot.com/search/label/Wordpress?max-results=8' title='wordpress, blog wordpress, wordpress themes, faster'>Wordpress</a>
<ul>
<li><a href='http://ikhsanu.blogspot.com/'>Sub menu 1</a></li>
<li><a href='http://ikhsanu.blogspot.com/'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='http://ikhsanu.blogspot.com/search/label/Makalah?max-results=8' title='makalah, makalah pendidikan, anak usia dinni, pembentukan'>Makalah</a></li>
<li><a href='http://ikhsanu.blogspot.com/search/label/Servis%20Manual?max-results=8' title='servise manual, panduan servis, photo copy, ir6000'>Servise Manual</a></li>
<li><a href='http://www.blogcrowds.com/resources/parse_html.php'>Parse</a></li>
</ul>
</div>
<div id='menubar-right'>
<div id='search-t'>
<div id='search'>
<form action='/search' method='search' target='_blank'>
<input class='keyword' id='s-m' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel disini..&quot;;}' onfocus='if (this.value == &quot;Cari artikel disini..&quot;) {this.value = &quot;&quot;}' type='text' value='Cari artikel disini..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSrUAOC_SgTFo6Jwscqp5POifWa-YkzvQqdYwC7FgyOd6amm7vEr7Uw5WFRjdvzP09A92A8eZctaOIFPcyU9zlfneSzYak5UH0gCFbhlA_ZOYCd26ExdvzF0yKgAMmoaAd0Lh_77f-9A/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>


Sebelum menyimpan template, Ganti link http://ikhsanu.blogspot.com/search/label/Blogger?max-results=8 dan link lainnya dengan link yang akan sampeyan pasang.
SIMPAN TEMPLATE

Labels: Blogger, Tips dan Trik, Tutorial

Thanks for reading Cara membuat menu navigasi. Please share...!