Cara Membuat Menu Navigasi Plus Media Sosial, Responsive!

Oke Sobat MayCber-Download . Kemaren lalu saya pernah mempostingkan Cara membuat menu Navigasi diatas Header Dropdown dan Berbasis Plus Media Sosial. Tapi kalini berbeda, tidak ada menu Dropdownn nya hanya plus media sosial saja. Ini sangat Responsive sekali? Kenapa Responsive? Menu Navigasi ini tidak akan hancur atau berantakan ketika anda sedang melihatnya di smartphone atau tablet. Bisa disebut juga menu navigasi yang akan diposting ini User Freandly. Biasanya menu ini digunakan dipara blogger untuk kolom About, Contact Us, Disclaimer. Menu navigasi ini dapat menyesuaikan pada tampilan desktop atau ditampilan di komputer atau laptop sobat, bisa juga smartphone sobat. Lalu bagaimana cara membuatnya? gampang ikuti tahap-tahap berikut ini.

Saya selalu mengingatkan, karena blogger maycyber-download selalu berikan yang berkualitas. Saya sarankan backup dulu Template anda, karena jika tidak sesuai keinginan menu navigasi ini maka mudah membalikan seperti semula, anda bisa menggunakan Notepad.

Cara Pertama :

1. Masuk ke Blogger - Login.
2. Template -> Edit HTML.
3. Temukan kode <div class='header-wrapper'> . Dan letakkan kode dibawah ini tepat dibawah kode <div class='header-wrapper'> .

Catatan : Jika kode <div class='header-wrapper'> susah ditemukan, cara Alternatif nya adalah anda temukan dulu kode </head> dan letakkan kode dibawah ini tepat dibawah kode </head> .
Karena saya kesulitan mencari kode <div class='header-wrapper'> ketika itu, jadi saya gunakan cara alternatif.

<nav id='menutop'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='your-link'>About</a></li>
<li><a href='your-link'>Contact</a></li>
<li><a href='your-link'>Sitemap</a></li>
<li class='sorting-01 facebook'><a href='your-link'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>
<li class='sorting-02 twitter'><a href='your-link'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href='your-link'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li>
<li class='sorting-06 rss-square'><a href='your-link'><i class='fa fa-rss-square fa-lg'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='your-link'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li>
</ul>
</nav>

Silakan ganti tulisan Your-Link dengan Link kepunyaan anda

4. Copy - Paste kode berikut ini, dan letakkan diatas kode </head>

<style>
#menutop{width:100%;margin:0 auto;height:40px;background:#fff;border-bottom:1px solid #e9e9e9;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:40px}
#menutop li{float:left;display:inline;position:relative;font-family:&#39;trebuchet MS&#39;;font-size:13px;
font-weight:bold;}
#menutop a{display:block;line-height:40px;padding:0 14px;text-decoration:none;color:#919392;}
#menutop ul li:hover a{color:#666;}
#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:40px;opacity:0;cursor:pointer}
#menutop label{font-family:&#39;trebuchet MS&#39;;font-size:30px;font-weight:400;display:none;width:35px;height:40px;line-height:45px;text-align:center;}
#menutop label span{font-size:13px;position:absolute;left:35px}
#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}
#menutop ul li ul li a{color:#919392;height:40px;line-height:40px;background:#fff;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}
#menutop li:hover &gt; ul.menux{visibility:visible;opacity:1;top:45px;}
#menutop a.dutt{padding:0 27px 0 14px}
#menutop a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop ul.menux li a{background:#fff;color:#919392;}
#menutop ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook {padding:0 5px;}
#menutop li.rss-square,#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{background:#fff;text-align:center;color:#666;float:right;transition:all 0.2s ease-in-out;}
#menutop li a.rss-square:hover,#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.linkedin:hover{color:#8493a0;}
#menutop li.rss-square .fa.fa-rss-square,#menutop li.facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.linkedin .fa.fa-linkedin{color:#919392;transition:all 0.2s ease-in-out;}
#menutop li.rss-square:hover,#menutop li.facebook:hover,#menutop li.twitter:hover,#menutop li.youtube:hover,
#menutop li.googleplus:hover,#menutop li.linkedin:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.rss-square:hover .fa.fa-rss-square{color:#CC6600}
#menutop li.facebook:hover .fa.fa-facebook{color:#000099}
#menutop li.twitter:hover .fa.fa-twitter{color:#0099FF}
#menutop li.youtube:hover .fa.fa-youtube{color:#B00000}
#menutop li.googleplus:hover .fa.fa-google-plus{color:#990000}
#menutop li.linkedin:hover .fa.fa-linkedin{color:#0066FF}
@media screen and (max-width:960px) {
#menutop li:hover &gt; ul.menux{display:block;}
#menutop ul{border:none;border-bottom:4px solid #e9e9e9;}
#menutop{position:relative;border:none;border-bottom:4px solid #e9e9e9;}
#menutop ul{background:#fff;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menutop ul.menux{width:100%;position:static;border:none}
#menutop li{display:block;float:none;width:auto;text-align:left}
#menutop li a{color:#666}
#menutop li a:hover{background:#f1f1f1;color:#f9f9f9}
#menutop li:hover{background:#8493a0;color:#fff;}
#menutop a.dutt{font-weight: bold;}
#menutop li:hover &gt; a.dutt,#menutop a.dutt:hover{background:#b1b1b1;color:#fff;}
#menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0;}
#menutop input:after,#menutop label:after {content:&quot;\f0c9&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666;
display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}
#menutop input{z-index:4;}
#menutop input:checked + label{color:#fff;font-weight:700}
#menutop input:checked ~ ul{display:block}
#menutop ul li ul li a{width:100%;color:#666;}
#menutop ul li ul li a:hover{background:#8493a0;color:#fff;}
#menutop ul.menux a{background:#fff;color:#666;}
#menutop ul.menux a:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li{background:#fff;color:#666;}
#menutop ul.menux li:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li a{background:#fff;color:#666;}
#menutop ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}
</style>

5. Jika sudah, kita masih di kode </head> . Copy - Paste kode dibawah ini, dan letakkan diatas kode </head> .

<script type='text/javascript'>
//<![CDATA[
var cb=function(){var e=document.createElement('link');
e.rel='stylesheet',e.href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';
var t=document.getElementsByTagName('head')[0];
t.parentNode.insertBefore(e,t)},raf=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;raf?raf(cb):window.addEventListener('load',cb);
//]]></script>

6. Selesai!
7. Silakan lihat Home Page Blogger anda.

Intinya begini, ketika saya sedang proses editing coding. Saya kesulitan mencari kode <div class='header-wrapper'> . Sampai akhirnya berpikir, kalo menu navigasi kan diatas header blogger, maka kode alternatifnya adalah dibagian </head> . Jika saya meletakan kode yang pertama dibagian </body> maka itu ada dibagian bawah tepatnya dibagian footer dibagian CopyRight, jadi saya pasang kode itu dibagian </head> Semuaaanya, Alhasilnya berhasil^.^ - Semoga Faham...

Bagaimana? Mudah bukan, Jika terjadi kesalahan silakan komentar dibawah^.^ Semoga Bermanfaat!