Cara Membuat Dropdown Menu di Blog

Tampilan dropdown menu memang sangat bagus untuk mempercantik letak menu yang kita buat di blog ,banyak juga para pakar seo adanya dropdown menu bisa membuat blog kita seo frendly dengan kata lain dapat memaksimalkan nilai seo blog kita.

Baiklah langsung saja mulai membahas tentang bagaimana cara membuat menu dropdown di blogspot atau di blogger yang seo frendly,langkah-langkahnya tentunya tidak sulit, kali ini kita hanya perlu memasukan 1 script ke TEMPLATE dan 1 script lagi ke bagian menu TATA LETAK.

Berikut saya perjelas langkah membuat menu dropdown !

1. Login ke www.blogger.com menggunakan akun blog sobat masing-masing.

2. Buka menu TEMPLATE, pilih EDIT HTML

3. Cari kode ]]> </b:skin>

(Gunakan CTRL+F untuk memudahkan pencarian)

4. Setelah ketemu, masukan kode dibawah ini tepat di atas kode ]]> </b:skin>

#catdropdowncontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://1.bp.blogspot.com/-
HWnzqeoLkqM/TZfDIsnBUJI/AAAAAAAAC6Y/HLNb-3kfkec/s1600/2.gif) 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;
}
#catdropdown{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url
(https://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk-
6MwLI/catdropdown.jpg) repeat-x;
height:33px;
}
#catdropdown ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catdropdown li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catdropdown li a, #catdropdown li a:link, #catdropdown li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}
#catdropdown li a:hover, #catdropdown li a:active {
background:url
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeJd0GvaONfwVOAwn-x9xAUgbWxjBabJwEDuZHjuWKskdVvehKWgW_gXNdo44AASqJqvUj5pYLY27NTBEgOHk9fXxZcvBzUXhSULNBpootQtllKB4jr9NpJDu-iEH7jFHQ-uRDxKd0bb2C/
uhov.jpg) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}
#catdropdown li li a, #catdropdown li li a:link, #catdropdown 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;
}
#catdropdown li li a:hover, #catdropdown li li a:active {
background:url
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeJd0GvaONfwVOAwn-x9xAUgbWxjBabJwEDuZHjuWKskdVvehKWgW_gXNdo44AASqJqvUj5pYLY27NTBEgOHk9fXxZcvBzUXhSULNBpootQtllKB4jr9NpJDu-iEH7jFHQ-uRDxKd0bb2C/
uhov.jpg) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}
#catdropdown li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}
#catdropdown li li {
}
#catdropdown li ul a {
width: 140px;
}
#catdropdown li ul a:hover, #catdropdown li ul a:active {
}
#catdropdown li ul ul {
margin: -34px 0 0 170px;
}
#catdropdown li:hover ul ul, #catdropdown li:hover ul ul ul,
#catdropdown li.sfhover ul ul, #catdropdown li.sfhover ul ul ul {
left: -999em;
}
#catdropdown li:hover ul, #catdropdown li li:hover ul,
#catdropdown li li li:hover ul, #catdropdown li.sfhover ul,
#catdropdown li li.sfhover ul, #catdropdown li li li.sfhover ul {
left: auto;
}
#catdropdown li:hover, #catdropdown li.sfhover {
position: static;
}

6. Bila sudah, silahkan SIMPAN template sobat

7. Sekarang kita menuju menu TATA LETAK

8. pilih TAMBAH GADGET/ADD GADGET lalu cari HTML/JAVA SCRIPT

9. Letakan script html di bawah ini di kolom yang disediakan. oh iya untuk kolom judul gadget sebaiknya tidak perlu diisi.

 <div id='catdropdowncontainer'>
<div id='catdropdown'>
<ul>
<li><a href='https://mansyur81.blogspot.com/' rel='nofollow' target='_blank'>Halaman Utama</a></li>
<li><a href='https://mansyur81.blogspot.com/' title='Komputer'>Komputer</a>
<ul class='children'>
<li><a href='#' title='Electronic'>Electronic</a></li>
<li><a href='#' title='Download'>Download</a></li>
<li><a href='https://mansyur81.blogspot.com/#' title='Fashions'>Fashions</a></li>
</ul>
</li>
<li><a href='#' title='Olah Raga'>Olah Raga</a>
<ul class='children'>
<li><a href='#' title='Celebritis'>Celebritis</a></li>
<li><a href='#' title='Technology'>Technology</a>
<ul class='children'>
<li><a href='#' title='sub tecnologi 1'>sub
tecnologi 1</a></li>
<li><a href='#' title='sub tecnologi 2'>sub
tecnologi 2</a></li>
</ul>
</li>
<li><a href='#' title='Aneka Masakan'>Aneka
Masakan</a></li>
<li><a href='#' title='Aneka Kue'>Aneka
Kue</a></li>
</ul>
</li>
<li><a href='#' title='Bisnis Internet'>Bisnis
Internet</a></li>
<li><a href='https://mansyur81.blogspot.com/' title='Hiburan'>Hiburan</a></li>
</ul>
</div>
</div>

10.untuk kode "#" itu adalah alamat link dari dropdown yang sobat buat. Sengaja saya beri tanda  # agar tidak menuju halaman apapaun, silahkan sobat ganti dengan alamat link yang sobat inginkan.

11. Bila sudah klik SIMPAN, dan lihat perubahannya pada blog sobat.Bila sobat melakukannya dengan benar, maka seharusnya tampilan dropdown akan seperti yang ada pada contoh gambar diatas. Namun bila berbeda, coba perhatikan kembali langkah-langkah di atas. Baiklah saya rasa itu saja postingan saya kali ini mengenai Cara Membuat Dropdown menu di Blogspot semoga bermanfaat dan nantikan terus update saya berikutnya.

12. o ya untuk langkah nomor 9 bagi para sobat semua kode html tersebut dapat diletakkan langsung di menu edit html tanpa menambahkan gadget di sidebar blog sobat,coba letakkan kode html tersebut tepat di bawah kode di bawah ini :

<div id='content-wrapper'>
Atau juga bisa sobat letakkan kode html tersebut tepat di atas kode seperti berikut :
<div id='sidebar-wrapper2'>
silahkan lihat dan praktekkan mana yang lebih cantik dan indah untuk tampilannya di blog sobat.Salam.

Share :