Cara Membuat Menu Drop Down

pada Blogspot
Posted in Ngeblog by farahikha

1 Votes
haii semangaaaat pagiiiiii !!!
Rasanya sudah lama sekali tidak posting di blog ini :D maaf, karena kesibukan di kantor yang
makin menggila (xixixi*sok sibuk ya). Selain itu juga karena saya makin ketagihan sama
project craft saya :D, bener looh bermain dengan warna & kain ituuusesuatuuu :D, makin
ditekuni, makin ketagihan :D
Udah ah yaa pembukaannya. Kali ini saya pengen posting Cara membuat menu drop down
pada Blogspot. Tutorial nya sepertinya sudah banyak banget yaa di internet, hanya saja saya
ingin menulis nya dalam blog saya untuk dokumentasi pribadi (catatan buat saya supaya
suatu saat kalau cari cari lagi gampang :D ) Daan buat temen-temen yang kebetulan mampir
kesini, semoga bermanfaat juga info nya.
Thx to pandawalima yang sudah sharing tutorial ini. Sumber tutorial bisa dilihat disini ya :D
Oiya..biar ada gambaran, apa siih yang dimaksud menu & sub menu atau dorp down menu,
seperti ini kira-kira tampilannya

Nah berikut cara untuk membuat menu & sub menu pada blogspot

1. Login Blogspot
2. Klik menu Design

3. Klik Menu Template Klik Backup/Restore (supaya aman, kita save dulu template
yang sekarang) Kemudian klik Edit HTML

4. Cari scrip berikut div class=main-outer> dengan cara tekan ctrl+f

5. Setelah dapat, copas script berikut tepat sebelum (diatas) script yang dicari tadi
<style>
/* Menu Horizontal + Sub Menu */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;borderright:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal;
font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none;
line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, &quot;Times New Roman&quot;, Times, serif; fontstyle:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px;
line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li { height:30px; border-top:1px solid #fff; }
#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px;
padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul

ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul,
#secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id=cat-nav>
<ul class=fl id=secnav>
<li><a href=http://kucintahandmade.com>Home</a></li>
<li><a href=http://www.kucintahandmade.com/search/label/Pillow>Pillow</a>
<ul id=sub-custom-nav>
<li><a href=http://www.kucintahandmade.com/search/label/Appllique%20Pillow>Bansi
(Bantal Aplikasi Perca)</a></li>
<li><a href=http://www.kucintahandmade.com/search/label/marker%20chusion>Bankis
(Bantal Lukis)</a></li>
</ul>
</li>
<li><a href=#>Menu3</a>
<ul id=sub-custom-nav>
<li><a href=#>Sub Menu3a</a></li>
<li><a href=#>Sub Menu3b </a></li>
</ul>
</li>
<li><a href=#>Menu4</a>
<ul id=sub-custom-nav>
<li><a href=#>Sub Menu4a</a></li>
<li><a href=#>Sub Menu4b </a></li>
</ul>
</li>
<li><a href=#>Menu5</a></li>
</ul>
</div>
6. Ganti tulisan warna biru dengan url/link yang di akan dituju
7. Ganti tulisan warna merah dengan nama Menu & Sub Menu yang anda inginkan
8. Save template yang sudah di edit
Selamat mencoba ya teman-teman, semoga bermanfaat