Setelah tiga hari mengarungi lautan maya untuk mencari cara edit tampilan pada blogspot, akhirnya saya mendapatkan apa yang saya cari yaitu menu page blogspot dengan dropdown, ternyata pembuatan menu page dropdown ini menggunakan CSS dan List HTML, dan setelah seharian penuh saya memahami script-script ini, yah walaupun nggak paham banget hehe,,,tapi mending lah jadi agak tau gitu, hehehe..., sekarang langsung aja kita membuat menu page dropdown di blogspot
1. Sebelumnya login ke www.blogger.com kemudian masuk ke Halaman Dashboard > Rancangan > Edit HTML.
2. Untuk mem-backUp template Anda, Klik 'Download Template Lengkap'. Jika memang dibutuhkan
3. Copy code dibawah ini
<html>
<head>
<style type='text/css'>
#navbarmenu{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVUJMSdsAaUGXI4tI0L6YnjA_O-2Klt2FO-VUXDdud68XIwT3SP1WXYsJjVtme-LYEJz36Lb3hkFbAMhinOsfzF342ek9bOvQAeDDyKEnfzg6rcgvBXPUQiuXlfxb_32lJTaZJjVs1gbrQ/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size: 14px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
text-transform:uppercase;
}
#menu{
margin: 0px;
padding: 0px;
width:1000px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVUJMSdsAaUGXI4tI0L6YnjA_O-2Klt2FO-VUXDdud68XIwT3SP1WXYsJjVtme-LYEJz36Lb3hkFbAMhinOsfzF342ek9bOvQAeDDyKEnfzg6rcgvBXPUQiuXlfxb_32lJTaZJjVs1gbrQ/) repeat-x;
height:33px;
}
#menu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#menu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#menu li a, #menu li a:link, #menu li a:visited {
color: #747474;
display: block;
margin: 0px;
padding: 10px 15px 9px 15px;
}
#menu li a:hover, #menu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5tLh_qKob_dML63dgYxWaEkrUhT7YNYD33Hqok9Y9uTcfmA_2T7ZOGZgZKGo3dmeKZscUXLioA8Tm02mmzNaJZFO4KsgxUT_HJca6u2ZaRW3rvfNKl_udeUiCSzZuAdbD6kkiqPoVX9aL/) repeat-x;
color: #fff;
margin: 0px;
padding: 10px 15px 9px 15px;
text-decoration: none;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:#202020;
width: 150px;
color: #bbb;
font-size: 13px;
font-family: tahoma, century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 8px 10px 7px 10px;
border-bottom: 1px solid #282828;
}
#menu li li a:hover, #menu li li a:active {
background: #121212 ;
color: #fff;
padding: 8px 10px 7px 10px;
}
#menu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}
#menu li li {
}
#menu li ul a {
width: 140px;
}
#menu li ul a:hover, #menu li ul a:active {
}
#menu li ul ul {
margin: -32px 0 0 170px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul,
#menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul,
#menu li li li:hover ul, #menu li.sfhover ul,
#menu li li.sfhover ul, #menu li li li.sfhover ul {
left: auto;
}
#menu li:hover, #menu li.sfhover {
position: static;
}
</style>
</head>
4. Pastekan code diatas sebelum code ]]></b:skin> jangan lupa simpan template.
5. Setelah itu masuk ke elemen page, Tambah Gadget > JavaScript/HTML, copy kan code dibawah ini, untuk nama gadget saya sendiri pakai <h2></h2>
6. Dengan memasukkan <h2></h2> di bagian judul gadget, cara tersebut yang saya gunakan untuk menghilangkan judul gadget
<body>
<div id='navbarmenu'>
<div id='menu'><B>
<ul>
<li><a href='http://cnetprog.blogspot.com' title='cnetprog.blogspot.com'>Home</a></li>
<li><a href='http://cnetprog.blogspot.com' title='cnetprog.blogspot.com'>NAMA MENU </a>
<ul>
<li><a href='http://cnetprog.blogspot.com' title='cnetprog.blogspot.com'>NAMA MENU-1</a></li>
<li><a href='http://cnetprog.blogspot.com' title='cnetprog.blogspot.com'>Link-1-2</a>
<ul>
<li><a href='http://cnetprog.blogspot.com' title='cnetprog.blogspot.com'>Link-1-2-a</a></li>
<li><a href='http://cnetprog.blogspot.com' title='cnetprog.blogspot.com'>Link-1-2-b</a></li>
</ul>
</li>
<li><a href='http://cnetprog.blogspot.com' title='cnetprog.blogspot.com'>Link-1-3</a></li>
</ul>
</li>
<li><a href='http://cnetprog.blogspot.com' title='cnetprog.blogspot.com'>Link-Name-2</a></li>
<li><a href='http://cnetprog.blogspot.com' title='cnetprog.blogspot.com'>Link-Name-3</a></li>
<li><a href='http://cnetprog.blogspot.com' title='cnetprog.blogspot.com'>Link-Name-4</a></li>
<li><a href='http://cnetprog.blogspot.com' title='cnetprog.blogspot.com'>Link-Name-5</a></li>
<li><a href='http://cnetprog.blogspot.com' title='cnetprog.blogspot.com'>Link-Name-6</a></li>
<li><a href='http://cnetprog.blogspot.com' title='cnetprog.blogspot.com'>Link-Name-7</a></li>
</ul></B>
</div>
</div>
</body>
</html>
Simpan gadget dan lihatlah Hasilnya.
Kelar dueh,,,,hehe….
Semoga bermanfaat
