Cara Membuat Menu Bar di Blog Untuk Pemula

Salam sobat... kali ini saya ingin berbagi -Cara Membuat Menu Bar di Blog Untuk Pemula. Singkat cerita, saya sendiri pernah sempat menghabiskan waktu berjam-jam karena kebingungan untuk membuat menu bar pertama kali, apalagi dengan mengotak atik kode yang ada di HTML. Hingga akhirnya berkat penelusuran bersama Om Google mampir sana mampir sini, saya pun bisa membuat menu bar diblog saya sendiri. Mungkin sebagian besar sudah tau caranya. Tetapi untuk yang pemula, pasti mencari-cari bagaimana cara membuat menu bar diblog yang baru dibuat biar tampilannya kelihatan menarik dan tertata bagus. Fungsi dari pada menu bar sendiri adalah untuk menyimpan link-link yang ada di suatu blog agar mudah mengunjungi halaman-halaman utama atau di anggap penting yang ada pada blog tersebut. Langkah-langkahnya seperti berikut ini :

1. Login ke blog sobat

2. Masuk ke halaman Template

3. Pilih Edit HTML

4. Arahkan kursor ke dalam Template kemudian Ctrl+f akan muncul kotak pencari

5. Cari kode   ]]></b:skin>   paste (Ctrl+v) ke kotak pencari

6. Masukkan kode dibawah ini di atas kode ]]></b:skin>

#menubar{
width:930px;
height:38px;
background:#00FF00;
margin: 0 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{
border-right:1px solid #00FF00;
float:left;
padding:10px 12px;
color:#fff;
text-decoration:none;
font-size:15px;
font-weight:0;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#000000;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:33px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #00FF00;
color: #000000;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:35px;
border:1px solid ##F0512D;
}
#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
}

7. Simpan Template, setelah itu masuk ke halaman Tata Letak
8. Tambahkan Gadget yang ada di bawah header
9. Pilih HTML/Javascript dan masukkan kode dibawah ini di dalamnya

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://varsinfo.blogspot.com'>Menu</a></li>
<li><a href='http://varsinfo.blogspot.com'>Menu 1</a></li>
<li><a href='http://varsinfo.blogspot.com'>Menu 2</a></li>
<li><a href='http://varsinfo.blogspot.com'>Menu 3</a></li>
<li><a href='http://varsinfo.blogspot.com'>Menu 4</a></li>
</ul>
</div>

KETERANGAN :

Untuk tulisan yang berwarna Merah adalah URL yang ingin sobat arahkan. Misalnya diganti dengan alamat blognya sobat dan untuk tulisan yang berwarna Biru adalah nama menu bar yang sobat inginkan. Sedangkan untuk tulisan yang berwarna Hijau adalah kode-kode warna HTML. Sobat bisa ganti kapan saja dengan warna yang disukai.

SARAN :

Sebelum mengotak-atik kode HTML, Back Up dulu template sobat sebelum merubah/menambah script di atas, supaya bisa di pulihkan kembali saat terjadi kesalahan dalam mengotak-atik kode HTML.

Baiklah sekian dulu dari saya, semoga artikel ini bisa membantu sobat sekalian. Terimakasih   

Posted by Unknown

Tweet