Cara Membuat Menu Drop Down Di Blogspot

Cara Membuat Menu Drop Down Di Blogspot

Hari yang sangat cerah,di luar angin berhembus sepoi-sepoi, langit berwarna biru dengan awan putih yang berarak saling berkejaran sungguh indah hari ini !. Di hari yang cerah ini kembali hadir dengan sebuah postingan tentang cara membuat menu drop down di blogspot, sebagai pelengkap dari beberapa tutorial serta cara memepercantik tampilan blog yang ada, maka hadirlah cara pembuatan menu drop down ini.

Pada beberapa template bawaan blogger (default) terkadang menu drop down ini tidak tersedia,nah ! Untuk mengatasi hal tersebut aku rasa sobat datang pada tempat yang tepat. Karena di sini aku akan coba mengurai tentang tata cara pembuatannya hingga selesai terpasang ke dalam blog sobat. Baik, untuk membuat menu drop down langkah-langkah pembuatannya adalah sebagai berikut:

1-Login kedalam dasbor blog

2-Pilih Template.

3-Pilih edit HTML.

4-Beri tanda centang pada kotak expand template widget.

5-Lalu carilah kode seperti berikut ini ]]></b:skin>

6-jika sudah menemukannya kemudian copy paste kode yang berada di bawah ini, dann letakkan (pastekan) tepat diatas kode ]]></b:skin>

#catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTuB0NdneGsd9o5UJrQWF4HUHdj9nBszW5lU9HFt51G-YCyh421pc1pKEpDMKRQQvF1e_xCmKOdX0we0TuBY5LPjLb4TJ53ZyxdpbLHVsp7UU0lUnHY8C04O-PW4W-ISyM197NGmOG1tpG/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}


#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTuB0NdneGsd9o5UJrQWF4HUHdj9nBszW5lU9HFt51G-YCyh421pc1pKEpDMKRQQvF1e_xCmKOdX0we0TuBY5LPjLb4TJ53ZyxdpbLHVsp7UU0lUnHY8C04O-PW4W-ISyM197NGmOG1tpG/) repeat-x;
height:33px;
}


#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}


#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}


#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}


#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHSWV8O3ZSYVRI8FlsFnxRBxZz1F_sOZOZTQLHCwun09C_YwT6p98frGBJYcvjtM3SdhMvqZfqbP1SJrEUxSz58lm3YVzkX3VUbbHKKhD7xNxCFZ17htciRkaUaPHyj9y8uGBtfhF3bm1E/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}


#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;


}


#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHSWV8O3ZSYVRI8FlsFnxRBxZz1F_sOZOZTQLHCwun09C_YwT6p98frGBJYcvjtM3SdhMvqZfqbP1SJrEUxSz58lm3YVzkX3VUbbHKKhD7xNxCFZ17htciRkaUaPHyj9y8uGBtfhF3bm1E/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}


#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}


#catmenu li li {
}


#catmenu li ul a {
width: 140px;
}


#catmenu li ul a:hover, #catmenu li ul a:active {
}


#catmenu li ul ul {
margin: -34px 0 0 170px;
}


#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}


#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}


#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

7-Pilih pratinjau template terlebih dahulu,jika tidak terjadi Error pada template lanjutkann dengan mengklik simpan template.

8-Jika sudah, sekarang cari lagi kode seperti ini </head> kemudiann copy paste kode dibawah ini dan letakkann tepat di atas kode tersebut.

<div id='catmenucontainer'>
<div id='catmenu'>


<ul>
<li><a href='/'>Home</a></li>
<li><a href='#' title='Link-Title'>NGOMIK</a>
<ul class='children'>
<li><a href='#' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='#' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='#' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='#' title='Link-Title'>BLOGSPOT</a>
<ul class='children'>
<li><a href='#' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='#' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='#' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='#' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='#' title='Link-Title'>WORDPRESS</a>
<ul class='children'>
<li><a href='#' title='Link-Title'>Link-Name-3-1</a></li>
<li><a href='#' title='Link-Title'>Link-Name-3-2</a></li>
<li><a href='#' title='Link-Title'>Link-Name-3-3</a></li>
</ul>
</li>
<li><a href='#' title='Link-Title'>CERITA BERSAMBUNG</a></li>
<li><a href='#' title='Link-Title'>CERITA BERGAMBAR</a>
<ul class='children'>
<li><a href='#' title='Link-Title'>Link-Name-5-1</a></li>
<li><a href='#' title='Link-Title'>Link-Name-5-2</a></li>
<li><a href='#' title='Link-Title'>Link-Name-5-3</a></li>
<li><a href='#' title='Link-Title'>Link-Name-5-4</a></li>
</ul>
</li>
<li><a href='#' title='Link-Title'>MUSIK</a>
<ul class='children'>
<li><a href='#' title='Link-Title'>Link-Name-6-1</a></li>
<li><a href='#' title='Link-Title'>Name menu</a></li>
</ul>
</li>
<li><a href='#' title='Link-Title'>SPORT</a></li>
<li><a href='#' title='Link-Title'>LIFESTYLE</a></li>
</ul>

</div>
</div>


<div class='clear'/>

9-Pilih pratinjau template terlebih dahulu, kemudiann jika tidak terjadi hal aneh pada template sobat, lanjutkan dengan mengklik simpan template.

Pada beberapa kode yang sengaja aku warnai silahkan sobat ganti dengan Url serta Nama Menu sobat masing-masing. Demikianlah cara membuat menu drop down di blogspot, kurang lebih hasilnya akan terlihat seperti pada gambar di atas. Selamat mencoba aku ucapkan,sukses selalu buat sobat semua. Bye-bye....