Membuat Menu Navigasi + Sosial Media [CSS,Responsive Dropdown] Di Blogspot

Banyak tutorial-tutorial cara membuat menu navigasi yang bisa anda temukan di google. Tapi pasti yang anda cari adalah menu navigasi yang responsive. Kenapa harus responsive? Supaya enak dan bagus jika dibuka di mobile atau device lain. Selain itu meru navigasi yang responsive juga berpengaruh pada SEO. Jadi sebaiknya anda memakai menu navigasi yang responsive di blog.

Golongan menu navigasi yang disukai baik oleh pemilik website atau pengunjung ebsite adalah menu navigasi yang responsive,dropdown,sederhana,dan material design. Selain itu pasti juga menu navigasi yang didesign dengan CSS yang keren.

 

Selain itu menu navigasi harus mobile friendly sehingga bisa enak untuk dibuka dan dilihat menggunakan mobile terutama kebanyakkan pengunjun yang menggunakan android. Menu navigasi yang akan saya bagikan ini juga ada ikon media sosialnya. Jadi anda bisa memasukkan link media sosial blog anda,seperti fanspage,twitter,dll. Yang pasti navigasi dan ikon media sosialnya sudah responsive. Bagi anda yang penasaran bagaimana tampilan menu navigasinya berikut gambarnya.

Baca juga : Cara Membuat Navigasi Blog Dengan Dropdown Menu.

Itulah tampilan menu navigasi di desktop dan di mobile,responsive bukan. Menu navigasi tersebut bisa anda edit dan kreasikan jika anda mengerti tentang CSS. Menu navigasi ini sangatlah keren karena memiliki fitur seperti navigasi evomagz yaitu dropdown navigation. Dan juga bisa menggulung ketika tampil di mobile seperti navigasi evo magz. Bagi anda yang ingin memasang navigasi ini di blogger,maka ikuti langkah berikut.

Cara Membuat Menu Navigasi + Sosial Media Responsive

Langkah 1

Silakan masuk ke blogger,lalu klik Tema → Edit HTML

Langkah 2

Salin kode dibawah ini dan letakkan dimana menu navigasi ingin anda tampilkan. 

• Bisa diatas header dengan meletakkan kode diatas kode <header>  atau <header id='header-wrapper'> 
• Bisa dibawah header dengan meletakkan kode dibawah kode </header>

<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>

Langkah 3

Salin kode dibawah lalu pastekan 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>


<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>

lalu klik Simpan Template.

Jangan lupa untuk melihat blog anda untuk melihat hasilnya. Keren bukan. Itulah turoial cara membuat menu navigasi + sosial media yang AnggaSave bagikan. Cukup sekian tutorial yang bisa saya bagikan,semoga bermanfaat.