Cara Membuat Menubar di Blog dengan Mudah

Cara membuat menubar di blog itu susah tidak ya? Mungkin itulah yang menjadi alasan kenapa Anda mengunjungi artikel kami yang satu ini. Kalau didalam benak Anda muncul sebuah pertanyaan diatas, maka disini Anda akan menemukan jawabannya. Sebelum saya memberikan langkah-langkahnya, seperti biasa akan saya jelaskan terlebih dahulu apa itu menubar. Karena, mungkin saja ada yang belum tahu tentang apa itu menubar.

Menubar adalah sebuah kotak tab/bar yang berisi kumpulan menu. Didalam menubar tersimpan beberapa link penting yang menjadi navigasi suatu blog. Ketika Anda memasang sebuah menubar didalam blog, maka Anda bisa memasukan beberapa link yang ingin Anda simpan didalam menubar tersebut. Misalkan, didalam menubar saya yang letaknya dibawah header ini tersimpan beberapa link yang menuju kategori-kategori yang berbeda. Adanya menubar pada suatu situs atau pun blog bertujuan untuk memudahkan para pengunjung dalam menjelajahi situs atau blog yang Anda kelola.

Menubar yang saya ketahui ada 2 jenis, yang pertama adalah menu biasa dan yang kedua adalah menu yang mempunyai submenu kebawahnya (dropdown menu).  Pada kesempatan ini saya hanya akan memberikan menu yang mempunyai submenu lagi kebawahnya. Kelebihan menu yang satu ini adalah bisa dijadikan menu biasa atau tidak tergantung kebutuhan Anda saja.

Cara Membuat Menubar di Blog

Untuk membuat atau memasang menubar di blog itu saya rasa tidaklah terlalu sulit, asalkan Anda teliti pasti bisa kok. Berikut ini merupakan tahapan-tahapan yang harus Anda lalui.

1. Log In pada akun blog Anda
2. Masuk pada halaman Template (tempat mengganti template dan edit html)
3. Klik Edit HTML
4. Cari kode ]]></b:skin> (Untuk memudahkan Anda dalam mencarinya, silahkan tekan tombol ctrl+f)
5. Copy kode dibawah ini dan letakan tepat diatas kode ]]></b:skin>

#menubar{
width:920px;
height:38px;
background:#117ac9;
border-radius:2px;
float:center;
margin:0px auto;
}
#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;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
text-decoration:none;
background:#0d5e99;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #117ac9;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:35px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #0d5e99;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:37px;
border:1px solid #117ac9;
border-radius:0px 0px 8px 8px;
}
#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
}

6. Cari kode <div id="content-wrapper">
7. Letakan kode dibawah ini, tepat diatas kode <div id="content-wrapper">

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#'>Sub menu 2</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a></li>
</ul>
</div>

8. Simplat template Anda dan lihat hasilnya

Catatan :

• Untuk tulisan yang berwarna biru silahkan ganti dengan URL link yang Anda inginkan
• Untuk tulisan yang berwarna merah bisa diganti dengan nama yang akan dijadikan menu. Contoh : About me, Daftar isi, dll.
• Untuk menambahkah item menubar lagi, silahkan Anda copy kode yang diberi tanda garis bawah dan letakan dibawah kode yang diberi tanda garis bawah tersebut.

Itulah tutorial blog kali ini mengenai cara membuat menubar bar di blog dengan mudah. Semoga bermanfaat dan selamat mencobanya ya!

Resource : http://blognya-reggy.blogspot.com/2011/11/cara-membuat-menu-bar-pada-blog.html

Tweet