Cara Membuat Menu Responsive di Atas Header Blog plus Media Sosial

Posted by New Johny Wuss

Cara Membuat Menu Responsive di Atas Header Blog plus Media Sosial
Cara Membuat Menu Responsive di Atas Header Blog plus Media Sosial

NAVIGASI menu blog umumnya hanya satu, yaitu di bawah header/logo blog.

Kita bisa menambahnya dengan memasang navigasi menu di atas header (top navbar) plus link dan icon media sosial.

Berikut ini Cara Membuat Menu Responsive di Atas Header Blog plus Media Sosial. Lihat Demo.

1. Template > Edit HTML
2. Copas kode CSS topmenu berikut ini di atas kode ]]></b:skin>

/*Topmenu plus Social Icon */
.menu-wrapper {background:#fff;position:relative;z-index:96;overflow:hidden;margin:0 auto;padding:5px;border-bottom:1px dashed #eee}
.top-menu {display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent;border:none;}
.top-menu ul {width:100%;padding:0;margin:0;text-align:left;}
.top-menu li {list-style-type:none;float:left;padding:0;margin:0;}
.top-menu li a {position:relative;font-size:14px;font-weight:400;background-color:transparent;color:#666;display:block;margin:0;padding:8px 12px 8px 0;line-height:100%;transition:color 0.3s;}
.top-menu ul li a:active, .top-menu ul li.highlight a {line-height:100%;text-decoration:none;}
.top-menu ul li a:hover {background:#ef4824;color:#fff;text-decoration:none;}
.top-menu li.socialwrap {float:right;}
.top-menu li.socialwrap a i{text-align:center;color:##666;transition:initial;}
.top-menu li.socialwrap a:hover{background:#ef4824;color:#fff;}
.top-menu li.socialwrap.pinterest {border-right:0;}
.top-menu a#pull {display:none;}
.top-menu li .fa {font-size:16px;}
@media only screen and (max-width:768px) {
.menu-top li ul {background:#222; border:none; box-shadow:none; }
.menu-wrapper {margin:0;border:1px solid #e6e6e6;background:#fff;}
.top-menu {display:block;width:100%;padding:0}
.top-menu ul {text-align:center;}
.top-menu ul {display:none;height:auto;}
.top-menu a#pull{color:#c00;display:inline-block;font-size:14px;font-weight:700;padding:10px;position:relative;text-align:left;width:100%}
.top-menu a#pull:before{content:"\f03a";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:20px;color:#c00;display:inline-block;position:absolute;right:15px;top:5%;margin-right:10px;line-height:30px;}
.top-menu a#pull:hover{background:transparent}
.top-menu li {display:block;width:50%;text-align:left;border-right:none;}
.top-menu li a {padding:15px 20px;display:block;color:#616161}
.top-menu li a:hover, nav a:active {background:#f0f0f0;border:none;color:#666;}
.top-menu ul li a:hover {background:#ef4824;color:#fff;}
.top-menu li.socialwrap {float:left;}
.top-menu li.socialwrap.twitter {border-left:0;}
.active {display:block;}
}
@media only screen and (max-width:640px) {
.menu-wrapper {margin:0 auto 20px auto;}
}
@media only screen and (max-width:480px) {
.top-menu li {display:block;width:100%;text-align:left;border-right:none;}
}
3. Copas kode JavaScript navigasi menu di atas header blog ini di atas kode </head> atau </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menu ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-menu ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
//]]>
</script>

4. Copas kode HTML topbar menu blogger berikut ini di bawah kode <body> atau di atas kode <div id='header'> atau <div clas='header'>


<div class='menu-wrapper'>
<nav class='top-menu'>
<ul>
     <li><a href='/p/about.html' title='About Us'>About</a></li>
     <li><a href='/p/sitemap.html' title='Our Sitemap'>Sitemap</a></li>
     <li><a href='/p/kontak.html' title='Contact us'>Contact</a></li>
     <li><a href='/p/disclaimer' title='Disclaimer'>Disclaimer</a></li>
<li class='socialwrap pinterest'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-pinterest fa-fw'/></a></li>
<li class='socialwrap youtube'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube fa-fw'/></a></li>
<li class='socialwrap rss'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-rss fa-fw'/></a></li>
<li class='socialwrap google'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus fa-fw'/></a></li>
<li class='socialwrap twitter'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter fa-fw'/></a></li>
<li class='socialwrap facebook'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook fa-fw'/></a></li>
            </ul>
         <a href='#' id='pull'>MENU</a>
          </nav></div>

5. Save!

Jangan lupa isi link menu dan url medsosnya. Demikian Cara Membuat Menu Responsive di Atas Header Blog plus Media Sosial.*


» Thanks for reading: Cara Membuat Menu Responsive di Atas Header Blog plus Media Sosial
Previous
« Prev Post
CB Blogger
New Johny WussUpdated: June 20, 2017

2 comments:

  1. Kerenn master templatenya, saya jadi termotivasi ingin membuat template, tapi rumitnya hduuh..

    ReplyDelete
  2. Gimna ya ohm. Cara membuat template bgini keren...!

    ReplyDelete

Follow & Get Update by Email

CB