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.

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

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

    Subscribe to receive free email updates:

    2 Responses to "Membuat Menu Navigasi + Sosial Media [CSS,Responsive Dropdown] Di Blogspot"

    1. Bagus nih menu buat Reverensi template blog. Kira kira ada hanya gak ya?

      ReplyDelete
    2. Bagus sob,, biar bisa terlihat lebih kece

      ReplyDelete

    Jangan ada link aktif di komentar karena komentar anda di moderasi!