Setelah cukup lama berguru kesana-sini, akhirnya ketemu juga cara membuat menu dropdown horisontal yang bisa menggunakan sub menu. Caranya cukup mudah dan tidak menggunakan memory yang cukup besar. Bisa dipraktekkan oleh rekan-rekan yang ingin mencoba.
Yang penting disini adalah alamat yang dituju oleh menu/ submenu/ sub-sub menu harus berbentuk ".html" atau berupa "/search/label". Beberapa metode sudah pernah penulis coba tapi begitu sampai di submenu ada kesulitan sehingga tidak dapat digunakan.
Beberapa rekan yang kesulitan membuat submenu/ sub-submenu, akhirnya mengambil jalan pintas dengan menambah menu-menu baik diatas maupun dibawah header, atau ada juga dengan membuat sistem kategori/ label yang terpisah dan cukup banyak serta merepotkan. Dengan cara ini kita dapat dengan mudah menambah/ mengurangi, mengganti menu-menu / submenu-submenu / sub-submenu - sub-submenu sesuka kita sendiri.
Caranya adalah sebagai berikut :
1. Login ke blog anda
2. Langsung masuk ke Template
3. Klik Edit Template
4. Tekan Ctrl F cari ]]></b:skin> tekan enter
5. Letakkan kode berikut ini diatas ]]></b:skin>
/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuhorizontal{
background: #222222 repeat-x;
width:100%;
margin:0 auto;
padding:0 auto
}
#menuhorizontal1{
position:static;
width:100%;
height:30px;
margin:0 auto
}
.clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%}
#submenubarhorizontal,#submenubarhorizontal ul{
list-style:none;
font-family:Arial, serif;
margin:0;
padding:0
}
#submenubarhorizontal a{
display:block;
text-decoration:none;
font-size:11px;
font-weight:700;
text-transform:uppercase;
color: #ff9900;
border-right:1px solid #222222;
padding:12px 10px 8px
}
#submenubarhorizontal
a.trigger{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD2Yq3xAgaNWCQDCGcthgYd5WGbbaVHDwVFsIzs1hURIZIwzYkK-GPjqu08S_LditlAeNXfDqrkPyoZRVEKOYrrVsmFrMrxaGNFZdqJYAnEkoeh1OhftOWFcetVYAKu-hQYaqbPaEawWM/s1600/arrow_white.gif);
background-repeat:no-repeat;
background-position:right center;
padding:12px 24px 8px 10px
}
#submenubarhorizontal li{
float:left;
position:static;
width:auto
}
#submenubarhorizontal li ul,
#submenubarhorizontal ul li{
width:170px
}
#submenubarhorizontal ul li a{
text-align:left;
color:#fff;
font-size:12px;
font-weight:400;
text-transform:none;
font-family:Arial;border:none;padding:5px 10px
}
#submenubarhorizontal li ul{z-index:100;position:absolute;
display:none;
background:#C50A0A;padding-bottom:5px;
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)
}
#submenubarhorizontal li:hover ul,
#submenubarhorizontal li.hvr ul{display:block}
#submenubarhorizontal li:hover ul a,
#submenubarhorizontal li.hvr ul a{color:#edfdfd;
background-color:transparent;
text-decoration:none
}
#submenubarhorizontal li ul li.hr{border-bottom:1px solid #444;
border-top:1px solid #000;
display:block;font-size:1px;
height:0;line-height:0;
margin:4px 0
}
#submenubarhorizontal ul a:hover{
background-color:#ff9900!important;
color:#fff!important;text-decoration:none
}
----------------------------------------------- */
#menuhorizontal{
background: #222222 repeat-x;
width:100%;
margin:0 auto;
padding:0 auto
}
#menuhorizontal1{
position:static;
width:100%;
height:30px;
margin:0 auto
}
.clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%}
#submenubarhorizontal,#submenubarhorizontal ul{
list-style:none;
font-family:Arial, serif;
margin:0;
padding:0
}
#submenubarhorizontal a{
display:block;
text-decoration:none;
font-size:11px;
font-weight:700;
text-transform:uppercase;
color: #ff9900;
border-right:1px solid #222222;
padding:12px 10px 8px
}
#submenubarhorizontal
a.trigger{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD2Yq3xAgaNWCQDCGcthgYd5WGbbaVHDwVFsIzs1hURIZIwzYkK-GPjqu08S_LditlAeNXfDqrkPyoZRVEKOYrrVsmFrMrxaGNFZdqJYAnEkoeh1OhftOWFcetVYAKu-hQYaqbPaEawWM/s1600/arrow_white.gif);
background-repeat:no-repeat;
background-position:right center;
padding:12px 24px 8px 10px
}
#submenubarhorizontal li{
float:left;
position:static;
width:auto
}
#submenubarhorizontal li ul,
#submenubarhorizontal ul li{
width:170px
}
#submenubarhorizontal ul li a{
text-align:left;
color:#fff;
font-size:12px;
font-weight:400;
text-transform:none;
font-family:Arial;border:none;padding:5px 10px
}
#submenubarhorizontal li ul{z-index:100;position:absolute;
display:none;
background:#C50A0A;padding-bottom:5px;
-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);
-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)
}
#submenubarhorizontal li:hover ul,
#submenubarhorizontal li.hvr ul{display:block}
#submenubarhorizontal li:hover ul a,
#submenubarhorizontal li.hvr ul a{color:#edfdfd;
background-color:transparent;
text-decoration:none
}
#submenubarhorizontal li ul li.hr{border-bottom:1px solid #444;
border-top:1px solid #000;
display:block;font-size:1px;
height:0;line-height:0;
margin:4px 0
}
#submenubarhorizontal ul a:hover{
background-color:#ff9900!important;
color:#fff!important;text-decoration:none
}
6. Kemudian carilah kode
- <header> : untuk menu diatas header blog
- </header> : untuk menu dibawah header blog
7. Copy paste kode dibawah ini dan letakkan diatas kode <header> untuk menu diatas header
dan atau diatas kode </header> untuk menu dibawah header
<div id='menuhorizontal'>
<div id='menuhorizontal1'>
<ul id='submenubarhorizontal'>
<li><a href='http://arkeyes88.blogspot.com' target='new'>Home</a></li>
<li><a class='trigger'>TEKNIK SIPIL</a>
<ul><li class='hr'/>
<li> <a href='http://petapetaku.blogspot.com/2014/10/coba2.html' target='new '>JALAN</a></li>
<li class='hr'/>
<li> <a href='http://petapetaku.blogspot.com/2014/10/tips-cara-membuat-author-blog-di-bawah.html' target=' new '> JEMBATAN</a></li>
<li class='hr'/>
<li> <a href=' nama-alamat-blog.html ' target=' new '> HYDRO</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target=' new '> STRUKTUR</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target=' new '> ANALISA</a></li>
</ul></li>
<li><a href=' http://arkeyes88.blogspot.com/2014/09/tvonline.html ' target=' new '>TV ONLINE </a></li>
<li><a href=' nama-alamat-blog.html ' target=' new '>BERITA UMUM</a></li>
<li><a class='trigger'>MUSIK FOTO</a>
<ul><li class='hr'/>
<li><a href='http://arkeyes88.blogspot.com/search/label/MUSIK ' target=' new '>MUSIK</a></li>
<li class='hr'/>
<li><a href=' http://arkeyes88.blogspot.com/search/label/FOTO ' target='_blank '> FOTO</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target=' new '> MARTIAL ART</a></li>
</ul></li>
<li><a href=' http://arkeyes88.blogspot.com/2014/09/tvonline.html ' target=' new '>HTML BLOG </a></li>
<li><a href=' nama-alamat-blog.html ' target=' new '>APLIKASI</a></li>
<li><a class='trigger'>IKLAN</a>
<ul><li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target=' new '> JUAL BELI</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='new'> PRUDENTIAL</a></li>
</ul></li>
<li><a class='trigger'>nama menu 4</a>
<ul><li class='hr'/>
<li><a href=' nama-alamat-blog.html '>Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='new '> Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='new '> Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='new '> Sub nama menu 4</a></li>
</ul></li>
</ul>
<br class='clearit'/></div>
<div style='clear:both;'/></div>
<div id='menuhorizontal1'>
<ul id='submenubarhorizontal'>
<li><a href='http://arkeyes88.blogspot.com' target='new'>Home</a></li>
<li><a class='trigger'>TEKNIK SIPIL</a>
<ul><li class='hr'/>
<li> <a href='http://petapetaku.blogspot.com/2014/10/coba2.html' target='new '>JALAN</a></li>
<li class='hr'/>
<li> <a href='http://petapetaku.blogspot.com/2014/10/tips-cara-membuat-author-blog-di-bawah.html' target=' new '> JEMBATAN</a></li>
<li class='hr'/>
<li> <a href=' nama-alamat-blog.html ' target=' new '> HYDRO</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target=' new '> STRUKTUR</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target=' new '> ANALISA</a></li>
</ul></li>
<li><a href=' http://arkeyes88.blogspot.com/2014/09/tvonline.html ' target=' new '>TV ONLINE </a></li>
<li><a href=' nama-alamat-blog.html ' target=' new '>BERITA UMUM</a></li>
<li><a class='trigger'>MUSIK FOTO</a>
<ul><li class='hr'/>
<li><a href='http://arkeyes88.blogspot.com/search/label/MUSIK ' target=' new '>MUSIK</a></li>
<li class='hr'/>
<li><a href=' http://arkeyes88.blogspot.com/search/label/FOTO ' target='_blank '> FOTO</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target=' new '> MARTIAL ART</a></li>
</ul></li>
<li><a href=' http://arkeyes88.blogspot.com/2014/09/tvonline.html ' target=' new '>HTML BLOG </a></li>
<li><a href=' nama-alamat-blog.html ' target=' new '>APLIKASI</a></li>
<li><a class='trigger'>IKLAN</a>
<ul><li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target=' new '> JUAL BELI</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='new'> PRUDENTIAL</a></li>
</ul></li>
<li><a class='trigger'>nama menu 4</a>
<ul><li class='hr'/>
<li><a href=' nama-alamat-blog.html '>Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='new '> Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='new '> Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='new '> Sub nama menu 4</a></li>
</ul></li>
</ul>
<br class='clearit'/></div>
<div style='clear:both;'/></div>
Catatan : Tulisan yang berwarna Ungu adalah judul/ nama Menu / Submenu, sedangkan tulisan yang berwarna Merah, adalah alamat blog anda atau alamat pos/ laman yang dituju.
Demikianlah sedikit pencerahan bagaimana membuat menu dropdown horisontal, selanjutnya "Terserah Anda" untuk mengkotak-atiknya sesuai dengan selera.
.gif)
