Pada akhirnya mencoba untuk mengganti design templatte yang berbeda, tapi masih templatte bawaan yang diberikan oleh pihak Blogger, akhirnya berhasil. Pada satu kesimpulan ternyata tidak semua design templatte yang diberikan oleh pihak Blogger bisa membuat menu navigasi dengan fungsi dropdown, hanya templatte tertentu saja yang bisa.
Menu dropdown atau sub-menu biasanya tidak muncul dikarenakan tertutup oleh elemen body. Script HTML yang dimasukkan pada bagian head di templatte tertentu biasanya dibuat tidak setara dengan body, atau secara simpelnya elemen yang ada pada bagian atas dibuat paling dalam, sehingga fungsi dari menu dropdown tidak terlihat karena terhalang oleh latar utama pada bagian entry,
Untuk membuat menu navigasi dengan fungsi dropdown biasanya sama saja, hanya script nya saja yang sedikit berbeda. Kalau ingin mencoba debgan cara yang sederhana, bisa ikuti atau copy-paste saja script pada tutorial kali ini. Langkah-langkah yang harus dilakukan sebagai berikut:
- Login ke Blogger
- Masuk pada dashboard Blogger lalu pilih pada pilihan Templatte
- Klik edit HTML, lau akan muncul script HTML keseluruhan
- Klik sembarang pada bagian HTML, tekan tombol CTRL + F untuk mempermudah pencarian
- cari atau ketikkan kode ]]></b:skin>
- Copy-paste script di bawah ini
#Menudp {
background: #fff;
width: auto;
height: 35px;
font-size: 12px;
font-family: Impact;
color: #fff;
font-weight: bold;
margin-bottom: 30px;
padding: 2px;
}
#Box {
width: 875px;
float: left;
margin: 0;
padding: 0;
}
#punch {
margin: 0;
padding: 0;
}
#punch ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#punch li {
list-style: none;
margin: 0;
padding: 0;
}
#punch li a, #punch li a:link, #punch li a:visited {
color: #333333;
display: block;
font-size: 16px;
font-family: Impact, sans-serif;
font-weight: normal;
text-transform: none;
margin: 0;
padding: 9px 15px 8px;
}
#punch li a:hover, #punch li a:active {
background: #e31d28;
color: #fcfbf8;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#punch li li a, #punch li li a:link, #punch li li a:visited {
background: #fcfbf8;
width: 150px;
color: #eb2626;
font-size: 14px;
font-family: Impact;
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#punch li li a:hover, #punch li li a:active {
background: #1f1e1e;
color: #ffffff;
padding: 7px 10px;
}
#punch li {
float: left;
padding: 0;
}
#punch li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#punch li ul a {
width: 140px;
}
#punch li ul ul {
margin: -32px 0 0 171px;
}
#punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul {
left: -999em;
}
#punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul {
left: auto;
}
#punch li:hover, #punch li.sfhover {
position: static;
}
}
background: #fff;
width: auto;
height: 35px;
font-size: 12px;
font-family: Impact;
color: #fff;
font-weight: bold;
margin-bottom: 30px;
padding: 2px;
}
#Box {
width: 875px;
float: left;
margin: 0;
padding: 0;
}
#punch {
margin: 0;
padding: 0;
}
#punch ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#punch li {
list-style: none;
margin: 0;
padding: 0;
}
#punch li a, #punch li a:link, #punch li a:visited {
color: #333333;
display: block;
font-size: 16px;
font-family: Impact, sans-serif;
font-weight: normal;
text-transform: none;
margin: 0;
padding: 9px 15px 8px;
}
#punch li a:hover, #punch li a:active {
background: #e31d28;
color: #fcfbf8;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#punch li li a, #punch li li a:link, #punch li li a:visited {
background: #fcfbf8;
width: 150px;
color: #eb2626;
font-size: 14px;
font-family: Impact;
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#punch li li a:hover, #punch li li a:active {
background: #1f1e1e;
color: #ffffff;
padding: 7px 10px;
}
#punch li {
float: left;
padding: 0;
}
#punch li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#punch li ul a {
width: 140px;
}
#punch li ul ul {
margin: -32px 0 0 171px;
}
#punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul {
left: -999em;
}
#punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul {
left: auto;
}
#punch li:hover, #punch li.sfhover {
position: static;
}
}
- Save atau Simpan Templatte
Catatan:
Letakkan script tersebut tepat diatas kode ]]></b:skin>. Pada bagian warna bisa Anda rubah dan disesuaikan dengan tema warna yang anda gunakan, Pada script diatas menggunakan warna dasar merah(#e31d28), hitam(#333333), dan putih(#fff). Lanjut ke langkah berikutnya:
- Lalu pindah pada pilihan Tata Letak di dashbooard
- Pilih Tambahkan Gadget yang berada dibawah header
- Pilih HTML/JavaScript
- Judul biarkan saja kosong, pada bagian konten, masukkan script seperti dibawah ini
<div class="Menudp">
<div id="Menu">
<div id="Box">
<ul id="punch">
<li><a href="Masukkan URL Yang Anda Tuju">Home</a></li>
<li>
<a href="#">Dropdown Menu</a>
<ul>
<li><a href="Masukkan URL Yang Anda Tuju">Dropdown 1</a></li>
<li><a href="Masukkan URL Yang Anda Tuju">Dropdown 2</a></li>
<li><a href="Masukkan URL Yang Anda Tuju">Dropdown 3</a></li>
</ul>
</li>
<li><a href="Masukkan URL Yang Anda Tuju">Tanpa Dropdown</a></li>
<li>
<a href="#">Dropdwn Menu 2</a>
<ul>
<li><a href="Masukkan URL Yang Anda Tuju">Dropdown 1</a></li>
<li><a href="Masukkan URL Yang Anda Tuju">Dropdown 2</a></li>
<li><a href="Masukkan URL Yang Anda Tuju">Dropdown 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="Menu">
<div id="Box">
<ul id="punch">
<li><a href="Masukkan URL Yang Anda Tuju">Home</a></li>
<li>
<a href="#">Dropdown Menu</a>
<ul>
<li><a href="Masukkan URL Yang Anda Tuju">Dropdown 1</a></li>
<li><a href="Masukkan URL Yang Anda Tuju">Dropdown 2</a></li>
<li><a href="Masukkan URL Yang Anda Tuju">Dropdown 3</a></li>
</ul>
</li>
<li><a href="Masukkan URL Yang Anda Tuju">Tanpa Dropdown</a></li>
<li>
<a href="#">Dropdwn Menu 2</a>
<ul>
<li><a href="Masukkan URL Yang Anda Tuju">Dropdown 1</a></li>
<li><a href="Masukkan URL Yang Anda Tuju">Dropdown 2</a></li>
<li><a href="Masukkan URL Yang Anda Tuju">Dropdown 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
- Klik save atau simpan
Catatan:
Utuk mempermudah mengeditnya, saya sarankan untuk copy-paste di Notepad terlebih dahulu agar lebih mudah merubahnya. Pada bagian "Masukkan URL Yang Anda Tuju" adalah dimana URL akan tertuju saat di klik. Pada bagian namanya, Anda bisa rubah sesuai yang Anda inginkan. Anda bisa menambahkan ataupun mengurangi pilihan pada menu. Untuk pilihan menu dengan pilihan dropdown tertulis:
<li>
<a href="#">Dropdown Menu</a>
<ul>
<li><a href="Masukkan URL Yang Anda Tuju">Dropdown 1</a></li>
<li><a href="Masukkan URL Yang Anda Tuju">Dropdown 2</a></li>
<li><a href="Masukkan URL Yang Anda Tuju">Dropdown 3</a></li>
</ul>
</li>
Selamat mencoba
