Cara Membuat Menu Drop Down pada Blogspot


haii semangaaaat pagiiiiii !!!

Rasanya sudah lama sekali tidak posting di blog ini😀 maaf, karena kesibukan di kantor yang makin menggila (xixixi…*sok sibuk ya). Selain itu juga karena saya makin ketagihan sama project craft saya😀, bener looh bermain dengan warna & kain ituuu…sesuatuuu😀, makin ditekuni, makin ketagihan😀

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😀 ) 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😀

Oiya..biar ada gambaran, apa siih yang dimaksud menu & sub menu atau dorp down menu, seperti ini kira-kira tampilannya

Cara membuat drop down menu pada blogspot

Nah berikut cara untuk membuat menu & sub menu pada blogspot

1. Login Blogspot

2. Klik menu Design

Klik Design

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

Klik Template

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;border-right: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; font-style: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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s