Banyak sobat blogger yang bertanya mengenai cara menambahkan navbar menu pada template yang tidak ada navbar menunya. Bahkan tidak jarang diantara mereka ada yang meminta dikirimi email untuk penjelasannya. Bukannya apa-apa, bukannya saya tidak mau memberikan penjelasan mengenai hal ini, tapi karena script-nya yang panjang dan membutuhkan penjelasan yang memadai, membuat saya selalu mengurungkan untuk mempostingnya. Namun akhirnya, demi memenuhi keinginan para sobat blogger tadi, saya pun mempostingnya juga.
Ada dua bentuk navbar menu, yaitu: navbar menu biasa dan navbar menu droftdown atau navbar menu yang memiliki sub-sub menu (children) di bawahnya. Navbar menu droftdown inipun terbagi dua: ada yang berbentuk animasi, seperti navbar menu pada blog Prasstya Blog, dan ada pula yang biasa (non-animasi), seperti navbar menu pada blog ini atau blog ini. Nah, pada tulisan kali ini saya akan membahas cara menambahkan navbar menu droftdown (dikenal juga dengan istilah Category menu) yang non-animasi kedalam template blog.
Langkah-langkah untuk menambahkan navbar menu ini adalah sebagai berikut:
#catmenucontainer {
height:34px;
background: url(link gambar latar) repeat-x;
display:block;
padding: 0px 0px 0px 0px;
font: 12px Tahoma,Century gothic,verdana, Arial, sans-serif;
font-weight:normal;
text-transform:title;
}
#catmenu {
margin: 0px 0px 0px 0px;
padding: 0px 15px;
list-style: none;
height:33px;
}
#catmenu ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
height:33px;
}
#catmenu a {
color:#ffffff;
display: block;
font-weight: normal;
padding: 10px 15px 9px 15px;
}
#catmenu a:hover {
color:#ffffff;
display: block;
text-decoration: none;
font-weight: bold;
background:#999999;
}
#catmenu li {
float: left;
margin: 0px 0px;
padding: 0px 0px;
}
#catmenu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px;
width: 130px;
}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background: url(link gambar latar) repeat-x;
width: 130px;
float: none;
margin: 0px 0px;
padding: 7px 10px 7px 10px;
color:#ffffff;
font-weight:normal;
}
#catmenu li li a:hover, #catmenu li li a:active {
background:#999999;
color:#ffffff;
font-weight:bold;
}
#catmenu li ul {
position: absolute;
left: -999em;
z-index:200;
background: url("") bottom;
width:170px;
}
#catmenu li:hover ul {
left: auto;
display: block;
}
#catmenu li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
* Gambar latar (background:url) : belum ditentukan
* Warna huruf : putih (#ffffff)
* Warna latar link hover : abu gelap (#999999)
* Padding menu utama : 10px 15px 9px 15px
* Lebar submenu (children) : 130px
* Padding submenu (children) : 7px 10px 7px 10px
Kamu dapat mengubah settingan tersebut disesuaikan dengan template blog kamu. Untuk memilih gambar latar (background: url), kamu bisa memilihnya pada Catatan tambahan di akhir tulisan ini. Atau jika tidak ingin memakainya, hapus kalimat link gambar latar pada perintah background: url(link gambar latar).
Untuk memudahkan pencarian, tekan Control F atau F3.
<div id='catmenucontainer'>
<div id='catmenu'>
<ul>
<li><a expr:href='data:blog.homepageUrl' title='Halaman Muka'>Home</a>
</li>
<li><a href='' title='Menu 1'>Menu 1</a>
<ul class='children'>
<li><a href='Link URL' title='Submenu 1.1'>Submenu 1.1</a></li>
<li><a href='Link URL' title='Submenu 1.2'>Submenu 1.2</a></li>
<li><a href='Link URL' title='Submenu 1.3'>Submenu 1.3</a></li>
<li><a href='Link URL' title='Submenu 1.4'>Submenu 1.4</a></li>
<li><a href='Link URL' title='Submenu 1.5'>Submenu 1.5</a></li>
</ul>
</li>
<li><a href='' title='Menu 2'>Menu 2</a>
<ul class='children'>
<li><a href='Link URL' title='Submenu 2.1'>Submenu 2.1</a></li>
<li><a href='Link URL' title='Submenu 2.2'>Submenu 2.2</a></li>
<li><a href='Link URL' title='Submenu 2.3'>Submenu 2.3</a></li>
<li><a href='Link URL' title='Submenu 2.4'>Submenu 2.4</a></li>
<li><a href='Link URL' title='Submenu 2.5'>Submenu 2.5</a></li>
</ul>
</li>
<li><a href='' title='Menu 3'>Menu 3</a>
<ul class='children'>
<li><a href='Link URL' title='Submenu 3.1'>Submenu 3.1</a></li>
<li><a href='Link URL' title='Submenu 3.2'>Submenu 3.2</a></li>
<li><a href='Link URL' title='Submenu 3.3'>Submenu 3.3</a></li>
<li><a href='Link URL' title='Submenu 3.4'>Submenu 3.4</a></li>
<li><a href='Link URL' title='Submenu 3.5'>Submenu 3.5</a></li>
</ul>
</li>
<li><a href='' title='Menu 4'>Menu 4</a>
<ul class='children'>
<li><a href='Link URL' title='Submenu 4.1'>Submenu 4.1</a></li>
<li><a href='Link URL' title='Submenu 4.2'>Submenu 4.2</a></li>
<li><a href='Link URL' title='Submenu 4.3'>Submenu 4.3</a></li>
<li><a href='Link URL' title='Submenu 4.4'>Submenu 4.4</a></li>
<li><a href='Link URL' title='Submenu 4.5'>Submenu 4.5</a></li>
</ul>
</li>
<li><a href='' title='Menu 5'>Menu 5</a>
<ul class='children'>
<li><a href='Link URL' title='Submenu 5.1'>Submenu 5.1</a></li>
<li><a href='Link URL' title='Submenu 5.2'>Submenu 5.2</a></li>
<li><a href='Link URL' title='Submenu 5.3'>Submenu 5.3</a></li>
<li><a href='Link URL' title='Submenu 5.4'>Submenu 5.4</a></li>
<li><a href='Link URL' title='Submenu 5.5'>Submenu 5.5</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /Catmenucontainer -->
Karena setiap template berbeda-beda, bisa juga diletakkan di bawah <div id='header-wrapper'>, jika ingin diletakkan di bawah header, tepatnya di bawah penutup widget id='Header1' (</b:section>).
Nah, cukup ribet kan? OK coy, selamat mencoba....
Berikut adalah gambar latar yang bisa kamu pilih:
URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-biru1.gif
URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-biru2.gif
URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-hijau1.gif
URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-hijau2.gif
URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-merah1.gif
URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-merah2.gif
URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-pink1.gif
URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-pink2.gif
URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-ungu1.gif
URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-ungu2.gif
Kopikan URL-nya lalu paste di bagian link gambar latar.
Supaya warna latar link hover sesuai dengan gambar yang kamu pilih (tidak abu gelap), ubah saja kode background:#999999; pada #catmenu a:hover dan #catmenu li li a:hover dengan warna yang sesuai (untuk mencari warna bisa kamu kunjungi situs HTML Color Codes), atau ubah menjadi background: url (link gambar latar); dengan gambar latar yang sesuai, misalnya: jika gambar latar menu memakai Merah1 maka pada hover memakai Merah2 atau sebaliknya. Atau bisa juga menghilangkan background ini dengan cara menghapusnya atau mengubahnya menjadi background: none;.
Menambahkan Most Popular Post (Artikel Terpopuler) Pada Sidebar
-
Ingin tahu artikel apa saja yang paling banyak direspon oleh pembaca?
Gampang saja, kamu tinggal menambahkan *most popular post* pada *sidebar*
blog kamu. ...
13 tahun yang lalu
0 comments:
Posting Komentar