Kali ini saya akan sharing bagaimana cara membuat menu bar tidak
menggunakan dropdown nah sekarang
saya akan mencoba sharing cara membuat menu bar Dropdown
saya akan mencoba sharing cara membuat menu bar Dropdown
Yuk kita mulai... semoga saja penjelasan saya ini dapat membantu
Pertama
:
1. Login
pada blogger
2. masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>
2. masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>
#menubar{
width:900px;
height:32px;
background:#de360f;
float:center;
margin-bottom:10px;
}
#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
}
width:900px;
height:32px;
background:#de360f;
float:center;
margin-bottom:10px;
}
#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
}
7. Selanjutnya cari kode <div id="content-wrapper">
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7
<div id='menubar'>
<ul>
<li><a
expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
<li><a href= http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
<li><a href= http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
</ul>
</div>
9. Simpan
Template dan lihat hasilnya
Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini
Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini
<div id='menubar'>
<ul>
<li><a
expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a>
<ul>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
</ul></li>
</ul>
</div>
Keterangan:
- Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
- Ganti tulisan berwarna Biru (Ganti Menu) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
- Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat
- Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.
http://albarnation.blogspot.com/2012/08/membuat-menu-bar-dan-cara-settingnya.html
Kedua
:
Setelah kebingungan mencari
<div id="content-wrapper"> yang tak ditemukan di blog saya, bahkan beberapa artikel
mengatakan cara pertama takkan berhasil diblog bila kode <div id="content-wrapper"> tidak ditemukan, sedikit putus asa iseng saya coba Masuk
ke Menu Layout > add
Gadget > HTML/Javascript dan pastekan kode :
<div id='menubar'>
<ul>
<li><a
expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a>
<ul>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
<li><a href=' http://gimayblog.blogspot.com/'>Ganti Menu</a></li>
</ul></li>
</ul>
</div>
Kemudian edit sesuai
petunjuk pertama
- Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
- Ganti tulisan berwarna Biru (Ganti Menu) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
- Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat
Nah, jika sobat ingin
menambah item menubar (list), sobat hanya tinggal Copy kode yang
bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.
1 comment:
sangat membantu bro
Post a Comment