Cara Membuat Top Menu Responsive Plus Media Sosial Di Atas Header Blog

Posted by Info Dicky on

Thursday, 29 June 2017

Cara Membuat Top Menu Responsive Plus Media Sosial Di Atas Header Blog - Menu navigasi yang terdapat pada sebuah blog umumnya hanya terdapat satu saja, yakni dibawah header atau logo blog. Namun ada juga para blogger yang memanfaatkan ruang kosong diatas header blog mereka dengan membuat menu navigasi blog tambahan.

Tujuan para blogger menambahkan navigasi menu diatas header blog adalah untuk mempermudah pengunjung dalam mengeksplorasi blog kita dan juga agar blog kita terlihat lebih profesional dimata pengunjung.

Nah, untuk itu saya akan membagikan tutorial cara membuat top menu responsive plus media sosial di atas header blog. Untuk tampilannya kamu bisa melihat top menu diatas header blog pada blog Info Dicky ini. Berikut tutorialnya.

Cara Membuat Top Menu Responsive Plus Media Sosial Di Atas Header Blog

1. Login ke Blogger. Lalu, pilih Tema/Theme > Edit HTML.

2. Copy kode berikut ini dan pastekan tepat di atas ]]></b:skin> atau </style>.

/* CSS Menu Top */
#menu-wrapper {margin:0px 3px;background:#ececec;width:100%;max-width:900px;position:relative;z-index:96;overflow:hidden;margin:0 auto;padding:9px 10px 3px;border-bottom: 1px solid #eee;}
.top-menu {display:block;margin:0 auto;float:none;padding:0;width:100%;max-width:980px;}
.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-family:Oswald;font-size:14px;font-weight:400;background-color:transparent;color:#666;display:block;margin:0;padding:8px 12px;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:#48d;color:#fff;text-decoration:none;}
.top-menu li.socialwrap {float:right;font-size:15px}
.top-menu li.socialwrap a i{text-align:center;color:#666;transition:initial;}
.top-menu li.socialwrap a:hover{background:#48d;color:#fff;}
.top-menu li.socialwrap.linkedin {border-right:0;}
.top-menu a#pull {display:none;}
@media only screen and (max-width:768px) {
#menu-wrapper {margin:0;width:100%}
.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:#666;display:inline-block;font-size:12px;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:#48d;display:inline-block;position:absolute;right:15px;top:5%;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;}
.top-menu li a:hover, nav a:active {background:#48d;border:none;color:#fff;}
.top-menu ul li a:hover {background:#48d;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;width:100%;}
} 
@media only screen and (max-width:480px) {
.top-menu li {display:block;width:100%;text-align:left;border-right:none;}
}

3. Setelah itu, copy dan pastekan kode berikut ini tepat di atas <div id='header'> atau <div class='header'>. Jika kamu tidak menemukan kode tersebut, coba kamu cari kode header id='header-wrapper' dan pastekan tepat di atasnya. Jika masih tidak menemukannya, kamu bisa menanyakannya di kolom komentar.

<div id='menu-wrapper'>
<div class='top-menu'>
<ul>
<li><a href='#' title='About Us'>About</a></li>
<li><a href='#' title='Contact us'>Contact</a></li>
<li><a href='#' title='Our Sitemap'>Sitemap</a></li>
<li><a href='#' title='Terms of Service'>Terms of Service</a></li>
<li><a href='#' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='#' title='Disclaimer'>Disclaimer</a></li>
<li class='socialwrap linkedin'><a href='#' rel='nofollow' target='_blank' title='Like us on Facebook'><i class='fa fa-facebook fa-lg'/></a></li>
<li class='socialwrap youtube'><a href='#' rel='nofollow' target='_blank' title='Follow My Twitter'><i class='fa fa-twitter fa-lg'/></a></li>
<li class='socialwrap rss'><a href='#' rel='nofollow' target='_blank' title='Dont Forget to Subscribe'><i class='fa fa-rss fa-fw'/></a></li>
<li class='socialwrap google'><a href='#' rel='nofollow' target='_blank' title='Follow My Google+'><i class='fa fa-google-plus fa-lg'/></a></li>
<li class='socialwrap twitter'><a href='#' rel='nofollow' target='_blank' title='Follow My Instagram'><i class='fa fa-instagram'/></a></li>
</ul>
<a href='#' id='pull'>MENU</a>
</div>
</div>
 <div class='clear'/>

Catatan :

• Ganti tanda pagar (#) dengan URL menu blog dan akun media sosial kamu.

4. Kemudian, copy dan pastekan kode dibawah ini tepat di atas </head> atau </body>.

<script type='text/javascript'>
//<![CDATA[
// Menu Top
$(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>

5. Terakhir, Save Template!

Itulah Cara Membuat Top Menu Responsive Plus Media Sosial Di Atas Header Blog. Semoga bermanfaat! (http://infodiki.blogspot.com)

Labels: Blogging, Tutorial Blog

Thanks for reading Cara Membuat Top Menu Responsive Plus Media Sosial Di Atas Header Blog. Please share...!