Penulis: Moch Adnan dipublikasikan: 19 Mei 2020
Cara Membuat Menu Drop Down Untuk Blog
Cara Membuat Menu Drop Down Untuk Blog
Setelah kemarin memposting tutoril tentang cara membuat kotak berlangganan artikel gratis bagi pengunjung yang tertarik ingin berlangganan artikel. Maka kali ini tulisan saya masih tidak jauh-jauh berbeda dengan sebelumnya yakni menempatkan sesuatu yang bermanfaat untuk perkembangan web/blog. Yaa...walau hasil akhirnya terkesan sederhana, tapi saya yakin dari segi kinerjanya pastilah sangat powerfull. 

Dan kali ini adalah cara membuat menu drop down sederhana, namun dengan hasil yang cukup bagus. Karena pada pembuatan menu dropdown ini saya juga menyertakan hari serta tanggalan didalamnya. Bagaimana, tertarik untuk coba membuatnya untuk blog sobat? Silahkan lanjutkan membaca artikel ini. Atau ingin melihat hasilnya terlebih dulu? Silahkan buka link demo berikut.


Preview

Untuk membuat menu drop down ini pertama-tama silahkan 'Login' kedalam dasbor blog. Setelah itu pilih 'Template' kemudian pilih 'Edit'.
Pilih download template lengkap untuk berjaga-jaga jika terjadi error setelah melakukan pengeditan, jika sudah, sekarang silahkan cari kode seperti berikut:
]]></b:skin>  Jika sudah menemukannya, kemudian simpan kode berikut ini tepat diatas kode ]]></b:skin>


.menutopx{margin:0 auto;width:964px;height:25px}
.jdulatas{float:left;padding:5px 0}
.menutopx ul{float:right}
.menutopx li{float:left;position:relative}
.menutopx li a{display:block;padding:6px 10px}
.menutopx ul.sub-menu-top{position:absolute;width:120px;right:0;z-index:1;-webkit-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;box-shadow:0 0 30px rgba(0,0,0,0.18);-moz-box-shadow:0 0 30px rgba(0,0,0,0.18);-webkit-box-shadow:0 0 30px rgba(0,0,0,0.18);-khtml-opacity:0;-moz-opacity:0;opacity:0;visibility:hidden}
.menutopx li:hover ul.sub-menu-top{-khtml-opacity:1;-moz-opacity:1;opacity:1;visibility:visible}
.menutopx ul.sub-menu-top li{width:100%}
.menutopx ul.sub-menu-top a{text-align:center;padding:8px 10px;border-bottom:1px solid #DDD;background:#000000}
.menutopx li a:hover,.menutopx li:hover > a{background:black}
.menutopx li.dgnsubtop a{padding-right:15px}
.menutopx li.dgnsubtop::after{content:"";width:0;height:0;border-width:4px 3px;border-style:solid;border-color:#AAA transparent transparent transparent;position:absolute;top:10px;right:5px}
.jdlnyatas{padding-right:5px;margin-right:5px;border-right:1px solid #818181;}

Simpan Template.

Masih dalam menu pengeditan HTML, selanjutnya cari lagi kode yang mirip-mirip seperti ini. <b:section class='header' id='header' widgets='1' showaddelement='no'> Lalu copy dan pastekan kode HTML berikut ini tepat diatas kode tadi.


<div id='outer-wrapper'>
<nav id='nav-top'>
<div class='menutopx'>
<div class='jdulatas'>
<span class='jdlnyatas'><data:blog.title/></span>
<span class='tgltop'>
<script type='text/javascript'>
//<![CDATA[
function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}

var months = new makeArray('January','February','March','April','May',
'June','July','August','September','October','November','December');
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;

document.write(months[month]+ " " +day + ", " + year);
//]]></script>
</span>
</div>
<ul class='menuhlng' id='topnav'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li class='dgnsubtop'><a href='#'>More</a>
<ul class='sub-menu-top'>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul></li>
</ul>

</div>
</nav>
<script type='text/javascript'>
//<![CDATA[
$('ul#topnav').clone().appendTo('#navmobitop');
$('#mobilenavtop').toggle(function() {
    $(this).addClass('active');
    $('#navmobitop .menuhlng').slideDown();
}, function() {
    $(this).removeClass('active');
    $('#navmobitop .menuhlng').slideUp();
});
//]]>
</script>

Simpan Template.
Demikianlah cara membuat menu dropdown untuk blog, selamat mencoba.