Cara Membuat Navigasi Menu dan Multi Dropdown Responsive Di Blogspot

Tutorial blog kali ini akan membahas tentang cara memasang navigasi menu serta memasang multi dropdown/sub menu di blogMenu navigasi adalah hal yang paling penting untuk sebuah blog, mengapa? pasalnya menu navigasi mempunyai banyak fungsi yang dimana fungsi utama dari menu ini adalah untuk membantu dan memudahkan para pengunjung untuk menelusuri blog/website. Selain itu menu juga digunakan untuk memudahkan pengkategorian artikel yang dimana apabila pengunjung dapat menemukan artikel mereka perlabel.

Cara Membuat Navigasi Menu dan Multi Dropdown Responsive Di Blogspot

Menu navigasi ini saya ambil dari kode script kepemilikin mbak arlina, desain menu blog ini memiliki kotak pencarian di dalamnya yang berfungsi memudahkan pengunjung menemukan artikel yang ingin di baca tentunya menu navigasi ini juga dilengkapi multi dropdown/multi sub menu responsive di dalamnya.

Nah apabila anda ingin memasang navigation menu dan multi dropdown responsive di blog anda maka ikuti tutorial dan langkah-langkahnya pada berikut ini.

Cara Membuat Navigasi Menu dan Multi Dropdown Responsive Di Blog

1. Langkah pertama, silahkan login dan masuk ke dashboard blog anda. Kemudian silahkan masuk ke menu Template > Edit HTML.
2. Langkah kedua, tambahkan kode CSS di bawah ini tepat diatas kode </style> atau </head>.
/* CSS Main Menu */
.menu-hanap {display:none;background:#29abe2;padding:0 15px;height:50px;line-height:50px;color:#fff!important;}
.menu-hanap:hover {background:#29abe2;}
#nav {font-family:'Arial';font-size:15px;font-weight:400;background:#363b40;height:50px;line-height:50px;margin:0 auto;}
.shareink-mainmenu {background:#363b40;list-style:none;margin:0 0 0 0;float:left;}
.shareink-mainmenu:before,.shareink-mainmenu:after {content: " ";display:table;}
.shareink-mainmenu:after {clear:both;}
.shareink-mainmenu ul {list-style:none;margin:0 0 0 0;width:12em;}
.shareink-mainmenu a {display:block;padding:0 15px;}
.shareink-mainmenu li {position:relative;margin:0 0;}
.shareink-mainmenu > li {float:left;}
.shareink-mainmenu > li > a {display:block;height:50px;line-height:50px;color:#fff;}
.shareink-mainmenu > li > a.active {background:#29abe2;}
.shareink-mainmenu > li:hover > a {background:#282b2f;color:#fff;}
.shareink-mainmenu li ul {background:#fff;display:block;position:absolute;left:0;z-index:10;visibility:hidden;opacity:0;box-shadow:0 0 5px rgba(0,0,0,0.1);transition:initial;}
.shareink-mainmenu li li ul {left:100%;top:-1px;}
.shareink-mainmenu > li.hover > ul {visibility:visible;opacity:1;}
.shareink-mainmenu li li.hover ul {visibility:visible;opacity:10;}
.shareink-mainmenu li li a {display:block;color:#444;position:relative;z-index:100;height:46px;line-height:46px;font-weight:400;transition:initial;}
.shareink-mainmenu li li a:hover {background:#29abe2;color:#fff;}
.shareink-mainmenu li li li a {background:#fff;z-index:20;color:#444;}
.shareink-mainmenu li .parent:after {content: "f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#9da4ab;}
.shareink-mainmenu li:hover .parent:after{color:#abb7c2;}
.shareink-mainmenu li ul li .parent:after {content: "f0da";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#abb7c2;float:right;}
.shareink-mainmenu li ul li .parent:hover:after {color:#fff;}
#search-form {background:#363b40;float:right;margin:0 0;width:300px;}
#search-form table {width:100%;margin:0 0 0 0;}
#search-form td.search-box {padding-right:0px;}
#search-form input#search-box[type="text"] {background:#fff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;color:#666;border:none;}
#search-form input#search-button[type="submit"] {font-family:FontAwesome;background:#29abe2;color:#fff;height:36px;line-height:36px;margin:5px 10px 5px -2px;padding:0 12px;border:none;outline:none;transition:all 0.25s;}
#search-form input#search-button[type="submit"]:hover{background:#282b2f;cursor:pointer;}
#search-form input#search-box[type="text"]:focus {background:#fdfdfd;outline:none;}

Langkah ketiga, tambahkan juga kode html pada berikut ini tepat diatas kode <div id=’content-wrapper’>

<nav id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<a class='menu-hanap' href='#'><i class='fa fa-list'/> Menu</a>
<ul class='shnav shareink-mainmenu'>
<li><a class='active' href='/'><span itemprop='name'><i class='fa fa-home'/> Home</span></a></li>
<li><a href='#'>App Mobile</a></li>
<li><a href='#'>Belajar SEO</a></li>
<li><a href='#'>Tips Blogger</a></li>
<li><a href='#'>Tips Adsense</a></li>
<li><a href='#'>Template Blog</a></li>
</ul>
<form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...'/></td>
<td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>
</nav>

Ganti semua nama menu diatas menggunakan nama menu yang anda inginkan beserta tambahkan url.


Langkah keempat, tambahkan kode script di bawah ini tepat di atas kode </body>.

<script type='text/javascript'>
//<![CDATA[
// Main Menu
var ww=document.body.clientWidth;$(document).ready(function(){$(".shnav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".menu-hanap").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".shnav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".menu-hanap").css("display","inline-block");if(!$(".menu-hanap").hasClass("active")){$(".shnav").hide()}else{$(".shnav").show()}$(".shnav li").unbind("mouseenter mouseleave");$(".shnav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".menu-hanap").css("display","none");$(".shnav").show();$(".shnav li").removeClass("hover");$(".shnav li a").unbind("click");$(".shnav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}}
//]]>
</script>

Langkah selanjutnya tambahkan kode html menu navigasi agar responsive ketika dikunjungi menggunakan device mobile. Tambahkan kode tepat diatas kode </style>

@media screen and (max-width:768px){
#header1{margin:0}
.shareinktop-wrapper {margin:0;border:1px solid #e6e6e6;}
.vitop-wrapper {margin:0;}
.top-menunav {display:block;width:100%;padding:0}
.top-menunav ul {text-align:center;}
.top-menunav ul {display:none;height:auto;}
.top-menunav a#pull {background-color:#fff;color:#666;display:inline-block;font-family:&#39;Open Sans&#39;;font-size:12px;padding:10px 3%;height:30px;line-height:30px;position:relative;text-align:right;width:94%;}
.top-menunav a#pull:after {content:&#39;f0c9&#39;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#999;display:inline-block;position:absolute;left:15px;top:20%;line-height:30px;}
.top-menunav li {display:block;width:100%;text-align:left;border-right:none;}
.top-menunav li a {background:#fff;color:#444;padding:15px 20px;display:block;}
.top-menunav li a:hover, nav a:active {background:#f9f9f9;border:none;color:#444;}
.top-menunav ul li a:hover {background:#f9f9f9;color:#444;}
.top-menunav li.facebook,.top-menunav li.twitter,.top-menunav li.instagram,.top-menunav li.googleplus,.top-menunav li.pinterest{background:#fff;text-align:left;margin:0 auto;color:#444;}
.top-menunav li a.facebook:hover,.top-menunav li a.twitter:hover,.top-menunav li a.instagram:hover,.top-menunav li a.googleplus:hover,.top-menunav li a.pinterest:hover{color:#444;}
.top-menunav li.facebook .fa.fa-facebook,.top-menunav li.twitter .fa.fa-twitter,.top-menunav li.instagram .fa.fa-instagram,.top-menunav li.googleplus .fa.fa-google-plus,.top-menunav li.pinterest .fa.fa-pinterest{color:#444;}
.top-menunav ul li.facebook:hover .fa.fa-facebook,.top-menunav li.twitter:hover .fa.fa-twitter,.top-menunav li.instagram:hover .fa.fa-instagram,.top-menunav li.googleplus:hover .fa.fa-google-plus,.top-menunav li.pinterest:hover .fa.fa-pinterest{background:#f9f9f9;color:#444;}
.shnav {float:none;width:100%;max-width:100%}
.active {display:block;}
.shareink-mainmenu &gt; li &gt; a.active {background:#363b40;border-top:4px solid #29abe2;}
.shareink-mainmenu &gt; li &gt; a.active:hover {background:#282b2f;}
#search-form {width:100%;margin:0 0 0 0!important;}
.shnav li ul:before {display:none;}
.shnav &gt; li {float:none;overflow:hidden;}
.shnav ul {display:block;width:100%;float:none;}
.shareink-mainmenu li ul {background:#f6f6f6;box-shadow:none;}
.shareink-mainmenu li ul li a{background:#f0f0f0;}
.shareink-mainmenu li li a:hover {background:#29abe2;}
.shnav &gt; li.hover &gt; ul , .shnav li li.hover ul {position:static;}
.shareink-mainmenu li .parent:after,.shareink-mainmenu li ul li .parent:after {content: &quot;f0d7&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px;float:right;color:#9da4ab;}
.shareink-mainmenu li:active .parent:after,.shareink-mainmenu li ul li:active .parent:after {color:#c5cbd0;}
#search-form {width:100%;background:#42494f;}
#search-form td.search-box {padding:0 10px!important;}
#search-form td.search-button {padding:0 10px;width:1%;}
#search-form input#search-box[type=&quot;text&quot;] {margin:0 0 0 0;background:#fff;color:#666;}
#search-form input#search-button[type=&quot;submit&quot;] {margin:0 0 0 -6px;}
#search-form input#search-box[type=&quot;text&quot;]:focus {background:#fdfdfd;outline:none;}}
}

Simpan template blog anda, kemudian lihat hasilnya.

Demikianlah bagaimana cara membuat navigasi menu di blog beserta memasang multi dropdown responsive. Semoga bermfaat.


Cara Membuat Navigasi Menu dan Multi Dropdown Responsive Di Blogspot | Admin MB | 4.5

Leave a Reply

Your email address will not be published.