Berikut ini adalah cara membuat menu navigasi drop down khususnya untuk mempercantik tampilan menu link yang kita pasang di blog dengan tujuan mempermudah user untuk menemukan Artikel ataupun Kategori yang ada di blog kita nah, di bawah ini adalah cara untuk memasangnya di dalam blog terutama untuk template yang khusus untuk blogspot
1. Login ke Account Blog
2. Pilih blog yang akan di pasang
3. Pilih menu Edit Template
4. Cari kode ]]></b:skin> supaya mudah ditemukan tekan tombol ctrl f pada keyboard Pc atau laptop anda, maka akan muncul sebuah kotak kolom untuk search setelah itu ketik ]]></b:skin> dan tekan enter
#topbar{;border: 1px solid #222;background-color: #111;background-image: -moz-linear-gradient(#444, #111);background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));width:100%;border-top:1px solid #000;margin:0 auto;padding:0 auto;border-top:5px solid #ff6600;}
#top-wrapper{width:100%;height:30px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font-size:13px;font-weight:700;text-transform:uppercase;color:#fff;padding:6px 10px 8px;border-left:1px solid #ccc}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyNPBw51I9ykprXCtqeGhYmXyM3SPZ5md3wulSF9_COGz0S11dzfNCQr9ukhtimmfwLzm_OEONObMBoTZzGlmhI7iQKLa4oHEfTfedtIL9-322Dod7DTqcWeEqX9is8nkCGaCcJdtuslw/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:6px 24px 8px 10px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:160px}
#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:4px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#4c4c4c;padding-bottom:0;}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background:#ff6600;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#fff;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #444;display:block;font-size:1px;height:0;line-height:0;margin:0}
#top ul a:hover{background-color:#ff6600!important;color:#fff!important;text-decoration:none}
5. Untuk membuat menu Navigasi Drop Down nya, temukan Kode di bawah ini yang sudah ada tersedia dalam setiap template yang berbasis Blogspot
<div id='header-wrapper'>Copy kode HTML dibawah ini dan paste tepat di bagian akhir kode HEADER
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog (Header)' type='Header'/>
</b:section>
</div>
<!-- end header-wrapper -->
<div id='topbar'>Ganti semua tanda # dengan URL yang di tuju. dan juga ganti Judul menu sesuai dengan yang anda buat
<div id='top-wrapper'>
<ul id='top'>
<li><a href='/' style='background:#ff6600;'>Home</a></li>
<li><a href='#'>About Us</a></li>
<li><a class='arrow' href='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Sport</a></li>
<li><a href='#'>Culture</a></li>
<li><a class='arrow' href='#'>Entertainment</a>
<ul>
<li><a href='#'>Music</a></li>
<li class='hr'/>
<li><a href='#'>Movie</a></li>
<li class='hr'/>
<li><a href='#'>Television</a></li>
</ul>
</li>
<li><a href='#'>Health</a></li>
<li><a class='arrow' href='#'>Design</a>
<ul>
<li><a href='#'>Art</a></li>
<li class='hr'/>
<li><a href='#'>Blog</a></li>
<li class='hr'/>
<li><a href='#'>Website</a></li>
</ul>
</li>
<li><a class='arrow' href='#' style='background:#ff6600;'>More</a>
<ul>
<li><a href='#'>Themes</a></li>
<li class='hr'/>
<li><a href='h#'>Tutorial</a></li>
<li class='hr'/>
<li><a href='#'>Resource</a></li>
<li class='hr'/>
<li><a href='#'>Advertise</a></li>
<li class='hr'/>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
6. Klik Preview untuk melihat hasilnya, jika tidak terjadi kesalahan atau error klik Save
