Cara Membuat Menu Navigasi Responsive di Atas Header + Icon Media Sosial di Blog

Gambar ini hanya Contoh

Tutorial Cara Membuat Menu Navigasi Responsive di Atas Header Plus Media Sosial di Blog

Menu Navigasi Blog yang sudah Profesional biasanya berisi About, Contact, Disclaimer, Sitemap, Privasi dan lain-lain.

Menu Navigasi yang saya sebutkan diatas juga menjadi salah syarat agar Blog diterima oleh Google AdSense.

Seperti salah satu kata dari judul postingan diatas, yaitu "Responsive" yang artinya dapat menyesuaikan di layar Handphone apa saja, berbeda jika judul postingan diatas tidak ada kata Responsive, yang berarti tidak dapat menyesuaikan pada layar Handphone yang saat ini sudah banyak peminatnya untuk digunakan berselancar di dunia maya.

Berikut Cara Memasang Menu Navigasi di Atas Header + Icon Media Sosial di Blog dibawah ini:

- Login ke akun Blogger.com

- Selanjutnya menuju Template/Edit HTML

- Cari kode <div class='header-wrapper'> (gunakan CTRL F)

- Kemudian copy kode dibawah ini, pastekan di bawah kode <div class='header-wrapper'>

<nav id='menutop'><br /> <input type='checkbox'/><br /> <label/><br /> <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>

- Tahap yang pertama sudah selesai, sekarang tahap yang kedua, cari kode </head> (gunakan CTRL F)

- Copy kode di bawah ini, pastekan di atas 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:'trebuchet MS';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:'trebuchet MS';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 > ul.menux{visibility:visible;opacity:1;top:45px;} #menutop a.dutt{padding:0 27px 0 14px} #menutop a.dutt::after{content:"\f0d7";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:"\f0d7";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 > 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 > 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:"\f0c9";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>

- Tahap Terakhir, copy kode di bawah ini, pastekan kembali 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>

- Jika semua sudah selesai, klik Simpan Template

- Hasilnya