Cara Membuat Menu Navigasi Keren Di Blog - Nandea96
Artikel Terbaru
Loading...

Monday, 8 July 2019

Cara Membuat Menu Navigasi Keren Di Blog







Hy semua ketemu lagi dengan Dea. baru sekarang Dea mengupload sebuah artikel yang bermanfaat lagi untuk kalian :).  nah kali ini Dea akan memberikan tutorial bagaimana cara membuat menu navigasi keren seperti pada gambar diatas. keren bukan? akan tetapi menu navigasi ini tak mendukung dropdown. jadi bagi kalian yang tak suka dengan menu dropdown dapat mencoba menu navigasi ini. atau yang sekedar ingin mencobanya pada blog kalian. dan bagaimanakah caranya? yuk simak tutorial berikut ini.

Step By Step

  • Pertama tama pastikan kalian sudah terhubung atau masuk ke akun blogger kalian. jika belum maka buka disini.
  • Setelah itu carilah menu "Tema" dan pilih "Edit HTML"Jika sudah maka copy dan pastekan code dibawah ini tepat diatas kode "]]></b:skin>".
    
    }
    body{
      margin: 0px;
      padding: 0px;
      background:none;
      font-family: tahoma, geneva;
    }
    
    h1{
      text-align:left;
      color: #fff!important;
      font-weight: 200;
      margin-top: 10px;
    }
    
    nav{
      float:none;
      clear: both;
      overflow: hidden;
      width: 957px; 
      margin: 0px auto;
      background:none;
    }
    
    nav ul {
      list-style: none;
      margin: 0px;
      padding: 0px;
    }
    
    nav li{
      float: left; 
    }
    
    nav li a{
      display: block; 
      width: auto; 
      padding: 20px; 
      border-top: 5px solid; 
      position: relative; 
      background: #fff;
      z-index: 2;
      text-decoration: none;
      color: #444!important;
      box-sizing: border-box;  
      -moz-box-sizing: border-box;  
      -webkit-box-sizing: border-box; 
    
    }
    .second a {
        text-decoration: none;
        border-bottom: 0px solid #000;
    }
    nav li a:hover{ border-top: 0px; color: #fff!important;}
    nav li:first-child a{ border-top: 10px solid #62e19e; }
    nav li:nth-child(2) a{ border-top: 10px solid #ffd071; }
    nav li:nth-child(3) a{ border-top: 10px solid #f0776c; }
    nav li:nth-child(4) a{ border-top: 10px solid #3498db; }
    nav li:nth-child(5) a{ border-top: 10px solid #1abc9c; }
    nav li:nth-child(6) a{ border-top: 10px solid #4b5051; }
    nav li:nth-child(7) a{ border-top: 10px solid #bc64ff; }
    nav li:last-child a{ border-top: 10px solid #5bd7c4; }
    
    .second li a:after{
      height: 0px;
      top: 0px;
    }
    
    nav li a:after { 
      content: "";
      height: 100%; 
      left: 0; 
      width: 100%;
      position: absolute; 
      transition: all 0.3s ease 0s; 
      -webkit-transition: all 0.3s ease 0s; 
      z-index: -1;
    }
    
    nav.second li a:hover:after, nav.third li a:hover:after{height: 100%; }
    
    
    
    nav li:first-child a:after{ background: #62e19e; }
    nav li:nth-child(2) a:after{ background: #ffd071; }
    nav li:nth-child(3) a:after{ background: #f0776c; }
    nav li:nth-child(4) a:after{ background: #3498db; }
    nav li:nth-child(5) a:after{ background: #1abc9c; }
    nav li:nth-child(6) a:after{ background: #4b5051; }
    nav li:nth-child(7) a:after{ background: #bc64ff; }
    nav li:last-child a:after{ background: #5bd7c4; }
    
    
    
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 100;
      src: local('Lato Hairline'), local('Lato-Hairline'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
    }
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 300;
      src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
    }
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 400;
      src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
    }
    

  • Dan terakhir copy dan pastekan kode dibawah ini tepat diatas kode "<header>".
    
    <!--Made with Love by Larry Geams-->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.8/font-awesome-animation.min.css"></link>
    <nav class="second">
    <ul>
    <li><a href="http://Nandea96.com" class="faa-parent animated-hover"><i class="fa fa-home faa-ring fa-1x"></i><font size="2" face="Lucida Sans" style="bold"> Home</font></a></li>
    <li><a href="URL LABEL TUTORIAL/TIPS AND TRICK" class="faa-parent animated-hover"><i class="fa fa-rocket faa-vertical fa-1x"></i><font size="2" face="Lucida Sans" style="bold"> How To</font></a></li>
    <li><a href="URL LABEL SOFTWARE" class="faa-parent animated-hover"><i class="fa fa-hdd-o faa-pulse fa-1x"></i><font size="2" face="Lucida Sans" style="bold"> Software</font></a></li>
    <li><a href="URL LABEL SOFTWARE WINDOWS ATAU TENTANG WINDOWS" class="faa-parent animated-hover"><i class="fa fa-windows faa-flash fa-1x"></i><font size="2" face="Lucida Sans" style="bold"> Windows</font></a></li>
    <li><a href="URL LABEL SOFTWARE ANDROID ATAU TENTANG ANDROID" class="faa-parent animated-hover"><i class="fa fa-android faa-tada fa-1x"></i><font size="2" face="Lucida Sans" style="bold"> Android</font></a></li>
    <li><a href="URL LABEL WEBTOOLS" class="faa-parent animated-hover"><i class="fa fa-cog faa-spin fa-1x"></i><font size="2" face="Lucida Sans" style="bold"> WebTools</font></a></li>
    <li><a href="URL LABEL TENTANG TEMPLATE" class="faa-parent animated-hover"><i class="fa fa-file-o faa-float fa-1x"></i><font size="2" face="Lucida Sans" style="bold"> Template</font></a></li>
    <li><a href="URL LABEL HUB. KAMI/CONTACT US" class="faa-parent animated-hover"><i class="fa fa-phone faa-shake fa-1x"></i><font size="2" face="Lucida Sans" style="bold"> Contact</font></a></li>
    </ul>
    </nav>


Gantilah tulisan yand dicetak tebal serta miring tersebut dengan url label kalian masing -  masing. dan menu navigasi ini belum di test pada template blog custom ataupun baru. dan ikon pada menu navigasi tersebut dapat bergerak jika kalian mengarahkan pointer/mouse kesalah satu menu navigasi tersebut...


Share with your friends

Give us your opinion

Selamat Datang Di Website Nandea96
Mohon untuk selalu mencuci tangan dengan air bersih serta sabun setiap 15 menit sekali agar terhindar dari covid-19 dan penyakit lainnya seperti diare. selalu gunakan masker ketika berpergian kemanapun 😷. meskipun itu hanya berbelanja sekitar 0.1 km atau ke tetangga. hindari kontak fisik dan beri jarak sekitar 2 meter dari jarak tempat kita berdiri dengan seseorang agar tidak memunculkan klaster baru yang tidak di-inginkan.

-Terimakasih 🙏-
Done