Latest News

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

Banyak tutorial-tutorial cara membuat menu navigasi yang mampu anda temukan di google. Tapi pasti yang anda cari ialah menu navigasi yang responsive. Kenapa harus responsive? Supaya enak dan indah jikalau dibuka di mobile atau device lain. Selain itu meru navigasi yang responsive juga kuat pada SEO. Kaprikornus sebaiknya anda memakai menu navigasi yang responsive di blog.

Golongan menu navigasi yang disukai baik oleh pemilik website atau pengunjung ebsite ialah 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 mampu enak untuk dibuka dan dilihat menggunakan mobile terutama kebanyakkan pengunjun yang menggunakan android. Menu navigasi yang akan aku bagikan ini juga ada ikon media sosialnya. Kaprikornus anda mampu memasukkan link media umum 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 mampu anda edit dan kreasikan jikalau anda mengerti perihal CSS. Menu navigasi ini sangatlah keren alasannya ialah memiliki fitur ibarat navigasi evomagz yaitu dropdown navigation. Dan juga mampu menggulung saat tampil di mobile ibarat 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 instruksi dibawah ini dan letakkan dimana menu navigasi ingin anda tampilkan. 
  • Bisa diatas header dengan meletakkan instruksi diatas instruksi <header>  atau <header id='header-wrapper'> 
  • Bisa dibawah header dengan meletakkan instruksi dibawah instruksi </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 instruksi dibawah lalu pastekan diatas instruksi </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 mampu aku bagikan,semoga bermanfaat.