oke kita langsung saja ke TKP
1. seperti biasa anda harus login dulu ke blogger anda dan masuk ke EDIT HTML
2. centang EXPAND TEMPLATE di pojok kiri
3. cari kode ]]></b:skin> (biar mudah pakai CTRL+F)
4. Copas script berikut dan letakkan tepat di atas kode ]]></b:skin> tadi
/* 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; }
<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 :
warna merah di ubah sesuai lebar dan panjag menu blog sobat
warna biru) URL gambar sobat yang telah di upload terlebih dahulu.
orange adalah submenu dari menu navigasi yang akan muncul dalam blog sobat, 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
<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
wah banyak kode yg mesti dimodifikasi supaya nampak menawan blog'y,......terima ksih informasinya mas...