Pasang Menu Downlist (2)

Indonesia Furniture Handicraft Wholesale Marketplace

Menu dropdown selalu menarik untuk dipasang di blog. Apalagi blog yang hosting di Blogspot. Blogspot memberi keluasan kepada penggunanya untuk memasukkan aneka kode baik CSS maupun Javascript.

Kali ini saya akan bagikan design menu merupakan hasil pengembangan dari Downlist menu sebelumnya.Salah satu kelebihannya adalah saat menu disorot sampai ke sub menu, menu utama / induk ikut aktif, padahal menu yang saya pasang di blog ini malah ga bisa. Kalau tertarik silahkan ikuti petunjuk selanjutnya. Eh tampilan menunya seperti dibawah ini:

Langsung cara pasang ya..
PERTAMA:
Buka Template ----- Edit HTML ----- Jangan lupa lakukan backup template ----- kemudian beri tanda cek pada 'Expand Widget Templates' kemudian cari kode:

]]></b:skin>

copy code dibawah ini dan letakkan di atas kode yang diatas tadi, simpan template:

/*---------------------
menufs3 myokezone.blogspot.com
------------------------*/
#menufs3-wrapper {width:100%; height:27px; background: #000000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3bg.gif') repeat-x top left;
border-top:1px solid #333; padding-left:0px; margin-bottom:9px; overflow:hidden}
#menufs3-wrapper h2 {display:none}
#menufs3, #menufs3 ul {padding: 0px; margin: 0; list-style: none; font: normal 0.95em arial; color:#fff;}
#menufs3 a {display: block;text-decoration: none; border-right: 1px solid #000; border-left: 1px solid #202020; color: #fff;
background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3bg.gif') repeat-x top left;; padding-left:9px; padding-right:9px; padding-top:6px; padding-bottom:7px}
#menufs3 a.awal {padding: 0px; border-left: 0px none;width: 90px; height:27px;
background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3Awal.gif') no-repeat;}
#menufs3 a.awal:hover{background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3Awalhvr.gif') no-repeat;}
#menufs3 a.awal em {display:none;}
#menufs3 a.IndukMenu {font-weight:bold; text-transform:uppercase;}
#menufs3 a.akhir {padding: 0px; border-left: 0px none; border-right: 0px none; width: 27px; height:27px;
background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3logoVisited.gif') no-repeat;}
#menufs3 a.akhir:hover {background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3logoHvr.gif') no-repeat;}
#menufs3 a.akhir em {display:none;}
#menufs3 li {float: left;width: 9em;}
#menufs3 li.akhir{border-left: 1px solid #202020; height:27px; width: 1px; padding: 0px}
#menufs3 li.akhir em{display:none;}
#menufs3 li.kanan{float: right; border-left: 0px none;}
#menufs3 li ul, #menufs3 ul li {width: 14em;}
#menufs3 ul li a {color: #565656;border-left: 0px none; border-right: 0px none; padding-left:5px; padding-right:10px; padding-top:5px; padding-bottom:5px}
#menufs3 li ul {position: absolute; display: none; background-color: #000000; z-index:200;border-right: 1px solid #141414; border-left: 1px solid

#141414;
border-bottom: 1px solid #141414; margin-left:-1px;text-align: left;}
#menufs3 li:hover a, #menufs3 a:focus, #menufs3 a:active{color: #ffff00; background-color: #000;
background-image:url('http://www.geocities.com/f_415_47/HMenuImage/menufs3hvr.gif'); background-repeat:repeat-x}
#menufs3 li:hover ul{display: block;}
#menufs3 li:hover ul a{color: #fff; border-top:1px solid #141414; background-image:url('none');}
#menufs3 ul a:hover {background-color: #202020!important;color: #ffff00!important;}
#menufs3 li {width: auto;}

KEDUA:
Masuk pada Template --- Elemen halaman --- kemudian buat elemet baru atau klik "Tambahkan sebuah Elemen Halaman" --- tentu saja cari lokasi widget (gadget) yang disebelah atas halaman posisinya. Pilih "HTML/Javascript" --- dan masukkan kode dibawah ini. Sebelumnya kamu edit dengan link menu kamu sendiri.

<div id="menufs3-wrapper">
<ul id="menufs3">
<li><a class="awal" href="http://www.myokezone.blogspot.com/"><em>Home</em></a></li><!-- Menu Home -->

<li><a class="IndukMenu" href="#" title="silahkan pilih sub menu dibawah">Games</a>
<ul>
<li><a href="http://www.myokezone.blogspot.com">Tes Pribadimu</a></li>
<li><a href="http://www.myokezone.blogspot.com">Tipuan Mata</a></li>
<li><a href="http://www.myokezone.blogspot.com">File Sulap</a></li>
<li><a href="http://www.myokezone.blogspot.com">Tebak Pikiran</a></li>
</ul>
</li>

<li><a class="IndukMenu" href="www.myokezone.blogspot.com/">Islami</a>
<ul>
<li>
<a href="www.myokezone.blogspot.com">Hikmah</a>
</li>
<li>
<a href="http://www.myokezone.blogspot.com">Kajian Islam</a>
</li>
<li>
<a href="http://www.myokezone.blogspot.com">Kisah Islami</a>
</li>
<li>
<a href="http://www.myokezone.blogspot.com">Kisah Nabi</a>
</li>
<li>
<a href="http://www.myokezone.blogspot.com">Nasihat</a>
</li>
<li>
<a href="http://www.myokezone.blogspot.com">Renungan</a>
</li>
<li>
<a href="http://www.myokezone.blogspot.com">TAFSIR</a>
</li>
</ul>
</li>

<li><a class="IndukMenu" href="http://www.myokezone.blogspott.com">Guest Book</a>
<ul>
<li><a href="www.myokezone.blogspot.com">Contact me via direct email</a></li>
</ul>
</li>

<li class="akhir"><em>Akhir dari li (bullet) menufs1 Induk</em></li><!-- Penutup Menu jangan diedit-->
<li class="kanan"><a class="akhir" href="http://www.myokezone.blogspot.com" target="_blank" title="Menu Design by Myokezone"><em>ateonsoft</em></a></li>
</ul><!-- end ul menufs3 -->
</div><!-- end menufs3-wrapper -->

Langkah Ketiga:

Ganti semua kode warna merah dengan alamat blog/situs anda masing-masing.Jangan lupa ganti juga judul link-nya sesuai alamat link anda masing-masing.OK
Mudah bukan? Sekian posting dari saya.Dan terimakasih

Indonesia Furniture Handicraft Wholesale Marketplace