Sobat sekalian, artikel kali ini akan membahas tentang bagaimana memasang menu dropdown bergambar, pastikan kamu login ke Blog, laulu pilih desain, lalu pilih template, kemudian pilih
Edit HTML, jangan lupa centang terlebi dahulu Expand Template Widget,
Kemudian copy seluruh text css dibawah ini tepat diatas kode ]]></b:skin> biar mudah mencarinya gunakan saja CTRL+F
/* Menu Drop Down By cinghedotcom */
/* Reset */
.menu,.menu ul,.menu li,.menu a {margin: 0;padding: 0;border: none;outline: none;}
/* Menu Start*/
.menutop{height: 35px;width: 980px;background: #4c4e5a;}
.menu li {position: relative;list-style: none;float: left;display: block;height: 35px;}
.menu li a {display: block;padding: 0 14px;margin: 6px 0;line-height: 18px;text-decoration: none;border-left: 1px solid #393942;border-right: 1px solid #4f5058;font-family: Helvetica, Arial, sans-serif;font-weight: bold;font-size: 13px;color: #f3f3f3;text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #8fde62; }
/* Sub Menu Start*/
.menu ul {position: absolute;top: 35px;left: 0;opacity: 0;background: #1f2024;
-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;-o-transition: opacity .25s ease .1s;-ms-transition: opacity .25s ease .1s;transition: opacity .25s ease .1s;}
.menu li:hover > ul { opacity: 1; }
.menu ul li {height: 0;overflow: hidden;padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;}
.menu li:hover > ul li {height: 30px;overflow: visible;padding: 0;}
.menu ul li a {width: 100px;padding: 4px 0 4px 35px;margin: 0;border: none;border-bottom: 1px solid #353539;}
.menu ul li:last-child a { border: none; }
/* Icon */
.menu a.submenu1 { background: url(.../url gambar anda.png) no-repeat 5px center; }
.menu a.submenu2 { background: url(.../url gambar anda.png) no-repeat 5px center; }
elanjutnya kita memasang kode navigasinya di blog dengan cara menambahkan text dibawah kode <body> blog kita :
<div class='menutop'>
<ul class='menu'>
<li><a class='home' href='#url blog anda'>Home</a></li>
<li><a href='#url blog anda'>Menu 1</a>
<ul>
<li><a class='submenu1' href='#url blog anda'>Nama sub menu 1</a></li>
<li><a class='submenu2' href='#url blog anda'>Nama sub menu 2</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
</div>
Keterangan :
height dan width menunjukkan lebar dan panjang menu
.menu a.submenu1 merupakan gambar di submenu, anda bisa menggunakan gambar berukuran 24x24 piksel. untuk menambah submenu dengan gambar lain anda bisa menambahkan dibawahnya .menu a.submenu3 dan seterusnya. tambahkan kode berikut untuk menambahkan submenu lagi.
<li><a class='submenu3' href='#url blog anda'>Nama sub menu 3</a></li>
Tapi harus diingat bahwa di atas ]]></b:skin> juga ditambahkan kode .menu a.submenu3
Selamat mencoba
BACA JUGA :
0 Comments