Cara Membuat Menubar Di Blog

Sudah tahukan menubar itu apa? Baik untuk yang belum tahu menubar adalah sebuah kotak tab / bar yang isinya navigasi link. Menubar ini biasanya diisi oleh kategori –kategori atau sering disebut ”label” dari artikel di dalam blog anda sehingga dapat disimpulkan bahwa menubar ini berfungsi untuk memudahkan pengunjung atau sebagai navigasi untuk menuju ke dalam label – label atau kategori –kategori artikel yang sudah di tandakan, yang biasanya tempat untuk memperlihatkan label anda itu kecil. Langsung saja cara untuk membuat menubar tersebut, ada banyak cara untuk membuat menubar, ada cara yang klasik biasanya cara ini dibuat pada template blog yang klasik atau template blog yang berasal dari blogger. Tapi sekarang saya akan menggunakan cara yang lain, dikarenakan banyak blogger yang menggunakan template custom. Baiklah langsung saja diperhatikan caranya :

1. Buka dan masuk ke dalam akun blog 
2. Masuk ke menu template 
3. Pilih dan klik edit html 
4. Cari kode ]]></b:skin> ( gunakan ctrl + f agar lebih cepat ) 
5. Dan masukkan kode berikut ke atasnya


#menubar{
width:1000px;
height:32px;
background:#de360f;
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 #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a {
color:#ffa500;
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:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
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
}


6. Slanjutnya cari kode <div id="content-wrapper">
7. letakkan kode di bawah ini di Atas kode <div id="content-wrapper">. Jika kode <div id="content-wrapper"> tidak ada coba ganti dengan <div id="header-wrapper"> atau <div id="outer-wrapper"> atau  <div class='main-outer'>


<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://Donesiarony.blogspot.com/'>DONEsia1</a></li>
<li><a href='http://Donesiarony.blogspot.com/'>DONEsia2</a></li>
<li><a href='http://Donesiarony.blogspot.com/'>DONEsia3</a></li>
<li><a href='http://Donesiarony.blogspot.com/'>DONEsia4</a></li>
</ul>
</div>

Untuk yang menginginkan menu dropdown tinggal ganti kode diatas ini dengan kode di bawah ini


<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://Donesiarony.blogspot.com/'>DONEsia1</a></li>
<li><a href='http://Donesiarony.blogspot.com/'>DONEsia2</a></li>
<li><a href='http://Donesiarony.blogspot.com/'>DONEsia3</a>
<ul>
<li><a href='http://Donesiarony.blogspot.com/'>DONEsia3.1</a></li>
<li><a href='http://Donesiarony.blogspot.com/'>DONEsia3.2</a></li>
</ul></li>
</ul>
</div>


8. kemudian klik save atau simpan

keterangan :

• untuk kode yang berwarna merah ganti dengan link menubar yang diinginkan. Misalnya :link artikel , link kategori atau label, atau yang lain 
• untuk yang bertuliskan DONEsia ganti dengan nama judul menubar sesuai keinginan, missal: trik and tips, about ,dan lain-lain 
• yang bertulisakan DONEsia3.1 dan DONEsia 3.2 ganti dengan menu yang ingin digunakan untuk dropdown 

Tweet

Fb

Postingan terkait:

Ditulis Raka — Thursday, September 5, 2013 — Add Comment — Tutorial