Cara buat navbar di blogger - Navigasi info a -->
Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara buat navbar di blogger

Navigasi Info - Navbar ( Navigasi menu bar ) pada blog yang biasanya berada tepat dibawah header blog ini sekarang mulai banyak blogger yang ingin memasang fitur navbar pada website mereka ya bukan sekedar untuk alasan keren-kerenan saja sih sebab ada manfaat lain didalamnya salah satunya meningkatkan SEO dan juga backlink internal pada blog mereka.

Cara buat navbar di blog
Cara buat navbar di blog


Sebagaimana kita ketahui tampilan tamplate  home website dan berbagai fitur widget didalamnya itu akan menjadi backlink internal untuk domain maupun subdomain blog atau situs web yang kita bangun sehingga semakin banyak url internal ( link website itu sendiri ) maka akan meningkatkan nilai peringkat website tersebut.


Tak heran website portal berita memasang banyak fitur widget di dalam situs mereka terkadang membuat kecepatan situs tersebut menjadi berkurang optimal namun SEO dan rank websitenya akan lebih cepat naik salah satunya dengan cara memasang navbar dimana kita dapat memasukan banyak url link website kita di dalamnya.

Cara Buat Navbar pada blogger


Untuk membaut navbar sebenarnya hampir mirip dengan cara membuat dark mode pada blogspot yaitu dengan tiga tahap kode yang cukup lumayan rumit walaupun tidak sulit juga bisa dibilang mudah jika kalian ikuti langkah-langkah berikut ini :

Tahap awal membuat Navbar di blogger


  • Langkah awal kalian menuju dasbor blogger
  • Kemudian pilih menu tema 
  • Dan klik edit html 

Selanjutnya copy dan paste kode ini tepat diatas kode ini ]]></b:skin>  

Kode CSS Navbar 

/* Style the navbar */
#navbar {
  overflow: auto;
background-color: #2f4f4f;
width: 100%;
position: fixed;
  border-radius: 1px;
  font-family: 'Roboto', sans-serif;
}

#navbar-items {
  margin: 1px 20px;
  padding: 1px 0;
  list-style: none;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#menuSelector {
  position: fixed;
  margin-left: -5px;
  top: -1px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #EFEBE8;
}
#navbar ul li {
    display: inline-block;
    height: 40px;
    margin: 0px;
    box-shadow: 1px 0px 0px rgb(51, 51, 51) inset;
    border-left: 1px solid rgb(0, 0, 0);
}
#navbar ul li a {
    color: #FAFAFA;
    padding: 0px 15px !important;
    line-height: 40px;
}

#navbar #navbar-wrapper {
  overflow: auto;
  height: 40px;
  padding: 0px;
}

.navbar-paddle-left, .navbar-paddle-right {
  cursor: pointer;
  border: none;
  position: absolute;
  top: 20px;
  background-color: transparent;
  width: 10px;
  height: 10px;
  margin-left: auto;
  margin-right: auto;
}
.slick-prev, .navbar-paddle-left { left: 0; }
.arrow {
  width: 0px;
  margin-left: auto;
  margin-right: auto;
}
.slick-next, .navbar-paddle-right { right: 0; }


Note : kode CSS diatas untuk tampilan fungsi Navbar seperti dapat di scroll kiri kanan dan juga warna serta ukurannya dapat di atur melalui kode CSS diatas.

Tahap kedua untuk membuat Navbar di blogspot


Selanjutnya kalian menuju </header> copy dan paste kode dibawah ini tepat dibawah kode  </header>

Koding script url Navbar


<div id='main'>
  <div id='main2'>
    <div id='navbar'>
      <div id='navbar-wrapper'>
        <ul id='navbar-items' style=''>
          <div id='menuSelector'/>
          <li class='navbar-item active'> <a href='https://www.navigasi.eu.org/search/label/Berita?'>News</a> </li>
          <li class='navbar-item'> <a href='https://www.navigasi.eu.org/search/label/otomotif?'>Otomotif</a> </li>
          <li class='navbar-item'> <a href='https://www.navigasi.eu.org/search/label/Teknik%20Industri?'>Industri</a> </li>
          <li class='navbar-item'> <a href='https://www.navigasi.eu.org/search/label/Travel?'>Travel</a> </li>
          <li class='navbar-item'> <a href='https://music.navigasi.eu.org/search/label/ost%20Film?'>Lagu Ost Film</a> </li>
          <li class='navbar-item'> <a href='https://music.navigasi.eu.org/search/label/Reggae?'>Lagu Reggae</a> </li>
          <li class='navbar-item'> <a href='https://music.navigasi.eu.org/search/label/lagu%20Anime?'>Lagu Anime</a> </li>
          <li class='navbar-item'> <a href='https://game.navigasi.eu.org/search/label/Info%20Gamer?'>Info Game</a> </li>
          <li class='navbar-item'> <a href='https://game.navigasi.eu.org/search/label/Tips%20Gaming?'>Tips Game</a> </li>
          <li class='navbar-item'> <a href='https://game.navigasi.eu.org/search/label/Games?'>Spec Game</a> </li>
          <li class='navbar-item active'> <a href='https://game.navigasi.eu.org/search/label/Anime?'>Otaku</a> </li>
        </ul>
      </div>
    </div>
  </div>
</div>


Note : link diatas ubah dengan link url blog milik kalian sudah saya beri tanda berwarna biru.

Tahap terakhir untuk membuat Navbar blog


Tahap selanjutnya kalian cari kode <body> copy kode dibawah ini dan paste dibawah kode <body>

Kode script aktifasi



<script>window.onscroll = function() {myFunction()};var navbar = document.getElementById(&quot;navbar&quot;);var sticky = navbar.offsetTop;function myFunction() { if (window.pageYOffset &gt;= sticky) {
navbar.classList.add(&quot;sticky&quot;)
} else {
navbar.classList.remove(&quot;sticky&quot;);
}
}

  if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    var scrolling = false;

    $(&quot;.navbar-paddle-right&quot;).bind(&quot;mouseover&quot;, function(event) {
        scrolling = true;
        scrollContent(&quot;right&quot;);
    }).bind(&quot;mouseout&quot;, function(event) {
        scrolling = false;
    });

    $(&quot;.navbar-paddle-left&quot;).bind(&quot;mouseover&quot;, function(event) {
        scrolling = true;
        scrollContent(&quot;left&quot;);
    }).bind(&quot;mouseout&quot;, function(event) {
        scrolling = false;
    });

    function scrollContent(direction) {
        var amount = (direction === &quot;left&quot; ? &quot;-=3px&quot; : &quot;+=3px&quot;);
        $(&quot;#navbar-items&quot;).animate({
            scrollLeft: amount
        }, 1, function() {
            if (scrolling) {
                scrollContent(direction);
            }
        });
    }
  }
  
  $(&#39;.navbar-item&#39;).click(function () {
    $(&#39;#navbar&#39;).find(&#39;.active&#39;).removeClass(&#39;active&#39;);
    $(this).addClass(&quot;active&quot;);
    navPointerScroll($(this));
  });

});

function navPointerScroll(ele) {

  var parentScroll = $(&quot;#navbar-items&quot;).scrollLeft();
  var offset = ($(ele).offset().left - $(&#39;#navbar-items&#39;).offset().left);
  var totalelement = offset + $(ele).outerWidth()/2;

  var rt = (($(ele).offset().left) - ($(&#39;#navbar-wrapper&#39;).offset().left) + ($(ele).outerWidth())/2);
  $(&#39;#menuSelector&#39;).animate({
    left: totalelement + parentScroll
  })
}
  </script>



Note : kode diatas berfungsi untuk mengaktifkan semua kode sebelumnya agar Navbar  dapat dijalankan 


Jika sudah semua selanjutnya simpan kode tersebut maka Navbar pada blog akan berfungsi semana mestinya.

Itulah mengenai pembuatan Navbar pada blogger semoga bermanfaat dan terima kasih telah berkunjung.