Cara membuat menu dropdown dengan background di blogspot

Halo selamat malam, sobat masih bertemu dengan saya nih, Pada kesempatan kali ini saya akan berbagi tips lagi nih kepada anda sobat blogger, yaitu Cara membuat menu dropdown dengan background di blogspot. Sudahkah sobat tahu apa itu menu dropdown? ya sebuah navigasi untuk memudahkan pengunjung menarik scrool ke atas atau ke bawah, baik itu dari postingan ataupun daftar isi pada blog sobat. Navigasi dropdown seperti ini sangatlah di butuhkan walaupun tidak di wajubkan, karena ya itu tadi salah satunya untuk menarik pengunjung agar tidak bosan melihat-lihat isi blog sobat. Memang scroll seperti ini tidak begitu memiliki tampilan yang bagus, tapi kelebihannya yang sangatlah bagus. Baik kita lanjut saja ke langkah-langkah pemasangannya berikut ini:
1. Login ke akun blogspot sobat
2. Pilih menu template lalu klik tab Edit HTML
3. Cari kode <b:skin><![CDATA[ lalu letakkan kode di bawah ini tepat di atas kode <b:skin><![CDATA[

<script>
var last_expanded = &#39;&#39;;
function showHide(id)
{
var obj = document.getElementById(id);
var status = obj.className;
if (status == &#39;hide&#39;) {
if (last_expanded != &#39;&#39;) {
var last_obj = document.getElementById(last_expanded);
last_obj.className = &#39;hide&#39;;
}
obj.className = &#39;show&#39;;
last_expanded = id;
} else {
obj.className = &#39;hide&#39;;
}
}
</script>

4. Jika kode di atas sudah di pasang lanjut mencari kode ]]></b:skin> dan letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

.dropdown-b {
background-image:url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu1.gif');
text-align:center;
width:165px;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom: 10px;
margin-top: 4px;
display:block;
text-decoration: none;
color: #000000;
height: 8px;
}
.dropdown-bg {
background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu2.gif');
text-align:center;
width:165px;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:13px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 8px;
}
.hide{
display: none;
}
.show{
display: block;
}
a{cursor: hand}

5. Setelah selesai klik save template
6. Langkah terakhir silahkan pilih menu Tata Letak lalu tambahkan gadget HTML/JavaScript
7. Lalu masukkan kode berikut ini

<a class="dropdown-b" onclick="showHide('dropdown-b-1')">Menu 1</a>
<div id="dropdown-b-1" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div>
<a class="dropdown-b" onclick="showHide('dropdown-b-2')">Menu 2</a>
<div id="dropdown-b-2" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div><a class="dropdown-b" onclick="showHide('dropdown-b-3')">Menu 3</a>
<div id="dropdown-b-3" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div><a class="dropdown-b" onclick="showHide('dropdown-b-4')">Menu 4</a>
<div id="dropdown-b-4" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
 <a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div>

 8. Ganti URL dengan alamat url yang akan sobat gunakan dab beri judul di link nya. Jangan lupa untuk menyimpan yang sudah di tambahkan.
Sekian Cara membuat menu dropdown dengan background di blogspot.
Semoga Bermanfaat