Cara Membuat Menu Dropdown Sederhana Di Blog
Sebuah navigasi menu didalam blog sangatlah penting dan berfungsi sebagai petunjuk arah untuk memudahkan dalam menjelajahi isi dan konten sebuah blog, blogger sendiri sudah nenyediakan widget untuk membuat tab navigasi untuk menu namun navigasi menu default blogger blogspot tidak ada option untuk membuat menu multi dropdown itu tuh yang kalau mensorot tab menubar maka akan muncul sub menu lagi dibawahnya, sehingga tidak memakan tempat dalam sidebar atau header blog
Selain untuk mempercantik blog menu dropdown ini sangat bermanfaat jika sebuah blog sudah mempunyai banyak kategori dan sub kategori nya, sebaiknya blog tersebut lebih baik menggunakan multiple mene agar memudahkan pencarian kategori kontennya sehingga memudahkan pengunjung menemukan apa yang dicari dalam blog itu sendiri.
sebagai ilustrasi saya sertakan gambar sebuah menu dropdown yang akan kita bahas dalam tutorial kali ini.
Cara Membuat Menu Dropdown Sederhana Di Blog
Pertama Login blogger kemudian ke pengaturan Template Edit HTML dihalam html cari kode
]]></b:skin>Selanjutnya tempelkan kode di bawah ini diatas kode yang ]]></b:skin>
nav {
display: block;
margin-top: 100px;
background: #374147;
}
.menu {
display: block;
}
.menu li {
display: inline-block;
position: relative;
z-index: 100;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
font-weight: 600;
text-decoration: none;
padding: 20px 15px;
display: block;
color: #fff;
transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover,.menu li:hover>a {
color: #fff;
background: #9ca3da;
}
.menu ul {
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
left: 0px;
background: #fff;
z-index: 99;
transform: translate(0,20px);
transition: all 0.2s ease-out;
}
.menu ul:after {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 6px;
margin-left: -6px;
}
.menu ul li {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
}
.menu ul li a {
font-size: 12px;
font-weight: normal;
display: block;
color: #797979;
background: #fff;
}
.menu ul li a:hover,.menu ul li:hover>a {
background: #9ca3da;
color: #fff;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.menu ul ul {
left: 149px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translate(20px,20px);
transition: all 0.2s ease-out;
}
.menu ul ul:after {
left: -6px;
top: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
}
.menu li>ul ul:hover {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.responsive-menu {
display: none;
width: 100%;
padding: 20px 15px;
background: #374147;
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
.responsive-menu:hover {
background: #374147;
color: #fff;
text-decoration: none;
}
a.homer {
background: #9ca3da;
}
@media (min-width: 768px) and (max-width: 979px) {
.mainWrap {
width: 768px;
}
.menu ul {
top: 37px;
}
.menu li a {
font-size: 12px;
}
a.homer {
background: #374147;
}
}
@media (max-width: 767px) {
.mainWrap {
width: auto;
padding: 50px 20px;
}
.menu {
display: none;
}
.responsive-menu {
display: block;
margin-top: 100px;
}
nav {
margin: 0;
background: none;
}
.menu li {
display: block;
margin: 0;
}
.menu li a {
background: #fff;
color: #797979;
}
.menu li a:hover,.menu li:hover>a {
background: #9ca3da;
color: #fff;
}
.menu ul {
visibility: hidden;
opacity: 0;
top: 0;
left: 0;
width: 100%;
transform: initial;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
position: relative;
transform: initial;
}
.menu ul ul {
left: 0;
transform: initial;
}
.menu li>ul ul:hover {
transform: initial;
}
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}
Kemudian cari kode </header> dan letakan kode dibawah ini tepat diatas nya
<nav>
<a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-reorder'/> Menu</a>
<ul class='menu'>
<li><a class='homer' href='http://kangobboy.blogspot.co.id/'><i class='fa fa-home'/> HOME</a>
</li>
<li><a href='http://kangobboy.blogspot.co.id/'><i class='fa fa-user'/> ABOUT</a></li>
<li><a href='http://kangobboy.blogspot.co.id/'><i class='fa fa-camera'/> SOFTWARE</a>
<ul class='sub-menu'>
<li><a href='#'>Software 1</a></li>
<li><a href='#'>Software 2</a>
<ul>
<li><a href='#'>Sub Software 1</a></li>
<li><a href='#'>Sub Software 2</a></li>
<li><a href='#'>Sub Software 3</a></li>
<li><a href='#'>Sub Software 4</a></li>
<li><a href='#'>Sub Software 5</a></li>
</ul>
</li>
<li><a href='#'>Software 3</a>
<ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
<li><a href='#'>Sub Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://kangobboy.blogspot.co.id/'><i class='fa fa-bullhorn'/> BLOG</a></li>
<li><a href='http://kangobboy.blogspot.co.id/'><i class='fa fa-tags'/> CATEGORIES</a>
<ul class='sub-menu'>
<li><a href='#'>Sub-Menu 1</a></li>
<li><a href='#'>Sub-Menu 2</a>
<ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
<li><a href='#'>Sub Sub-Menu 5</a></li>
</ul>
</li>
<li><a href='#'>Sub-Menu 3</a>
<ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
<li><a href='#'>Sub Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://kangobboy.blogspot.co.id/'><i class='fa fa-envelope'/> CONTACT</a></li>
<li><a href='http://kangobboy.blogspot.co.id/'><i class='fa fa-sitemap'/> SITEMAP</a></li>
<li><a href='http://kangobboy.blogspot.co.id/'><i class='fa fa-exclamation-triangle'/> DISCLAIMER</a></li>
</ul>
</nav>
<script type='text/javascript'>Kemudia Simpan dan pratinjau blog anda dahulu untuk melihat perubahan nya, jika sudah cukup silahkan di simpan dan keluar dari pengaturan html
$(document).ready(function(){
var touch = $('#resp-menu');
var menu = $('.menu');
$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 767 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
//]]>
</script>
Silahkan sesuaiakan Nama menu dan sub menunya dengan yang anda inginkan dan jangan lupa sesuaikan juga url nya yang sudah di beri tanda warna Orange dengan url blog anda
Selain membuat menu seperti ini anda juga bisa membuat menu dengan disertai widget sosial media anda bisa menuju link berikut ini Cara membuat menu disertai dengan widget sosial media
Demikian Cara Membuat Menu Dropdown Sederhana Di Blog semoga berhasil, Jika Masih ada kesulitan dalam pembuatan menu dropdown di blog anda bisa langsung menghubungi saya atau bertanya di kolom komentar yang sudah disediakan.
0 Komentar untuk "Cara Membuat Menu Dropdown Sederhana Di Blog"
Dilarang Berkomentar Berbau Sara, Pornografi, Pelecehan dan Kekerasan
Gunakanlah kata - kata yang baik dan sopan
Dilarang Spam