Bagi anda pencipta blog pastinya anda ingin kalau blog anda ada Menu Bar nya. Menu bar digunakan untuk memudahkan pengunjung ( visitor ) mencari kategori. Ya, sudah saya sudah memberikan infonya dibawah ini tentang Cara Memasang Menu bar di blog.
Cara Memasang Menu Bar di Blog :
- Login ke Blogger
- Pilih Template
- Klik Edit HTML
- Cari ]]></b:skin> (gunakan ctrl+f untuk memudahkannya)
- Pasang kode di bawah ini di atas kode ]]></b:skin> #menubar{
- Selanjutnya cari kode <div id="content-wrapper"> (gunakan ctrl+f untuk mempermudah). Pasang kode di bawah ini di Atas kode <div id="content-wrapper"> . Tetapi untuk yang tidak ada kode <div id="content-wrapper"> , anda bisa menaruh dielemen div id lainnya. Biasanya template blog terdapat kode seperti <div id='header.... Jadi, bila tidak ada anda bisa menaruhnya di bawah kode yang mirip dengan<div id='header...
width:900px;
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
}
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
</ul>
</div>
Tetapi bagi anda yang ingin memasang Menu Dropdown anda tinggal mengganti kode di atas menjadi kode dibawah ini :
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Dropdown 1</a></li>
<li><a href='#'>Menu 1</a></li>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Dropdown 1</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a>
<ul>
<li><a href='#'>Dropdown 2</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 3</a>
<ul>
<li><a href='#'>Dropdown 2</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a>
</ul></li>
</ul>
</div>
</ul>
</div>
7. Setelah itu simpan.
Keterangan :
- Ganti kode yang berwarna merah menjadi URL link anda.
- Ganti kode yang berwarna biru menjadi judul Menu anda.
0 komentar:
Posting Komentar