Jumat, 20 September 2013

Cara Membuat Menu navigasi

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='#' title='artikel'>Artikel</a> </li>
<li><a href='#' title='blogger, blogspot, blog'>Blogger</a></li>
<li><a href='#' title='wordpress, blog wordpress, wordpress themes, faster'>Wordpress</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='#' title='makalah, makalah pendidikan, anak usia dinni, pembentukan'>Makalah</a></li>
<li><a href='#' title='servise manual, panduan servis, photo copy, ir6000'>ServiseManual</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='http://1.bp.blogspot.com/_C6KkooKXCEw/TIBqtV6pdmI/AAAAAAAAGyM/QUBsym_R9V0/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, 

  1. Ganti link # dengan link yang akan sampeyan pasang.
  2. Ganti yg Merah dengan judul tab 
  3. Ganti yg Hijau dengan deskripsi tab
SIMPAN TEMPLATE

sumber : http://www.ikhsanudin.com/2013/04/cara-membuat-menu-navigasi.html#.Ujw5_tJBKpc

Please Give Us Your 1 Minute In Sharing This Post!
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

Ditulis Oleh : Alfrandhy dharwisi // 19.11
Kategori:

Comments
0 Comments

0 komentar:

Poskan Komentar

umpan balik saya hargai dan saya akan membalas pertanyaan yang menyangkut artikel di Blog ini sesegera mungkin

1. Komentar SPAM akan dihapus segera setelah saya review
2. Pastikan untuk klik "Berlangganan Lewat Email" untuk membangun kreatifitas blog ini
3. Jika Anda memiliki masalah cek dulu komentar, mungkin Anda akan menemukan solusi di sana
4. Bila menyebarluaskan artikel ini harap cantumkan baclink nya

Bila anda senang dengan artikel ini silahkan Klick Disini atau berlangganan geratis Artikel dari blog ini. Pergunakan vasilitas diatas untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui komentar atau share sesuai dengan artikel diatas.

 

Maaf Kenyamanan Anda Terganngu Website Sedang Direnobvasi

×

Powered By Facebook and Get This Widget

Site info

My Friend

lingkaran google plus