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 |
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.
Baca Juga : Cara buat Dark mode di blogger
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("navbar");var sticky = navbar.offsetTop;function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { var scrolling = false; $(".navbar-paddle-right").bind("mouseover", function(event) { scrolling = true; scrollContent("right"); }).bind("mouseout", function(event) { scrolling = false; }); $(".navbar-paddle-left").bind("mouseover", function(event) { scrolling = true; scrollContent("left"); }).bind("mouseout", function(event) { scrolling = false; }); function scrollContent(direction) { var amount = (direction === "left" ? "-=3px" : "+=3px"); $("#navbar-items").animate({ scrollLeft: amount }, 1, function() { if (scrolling) { scrollContent(direction); } }); } } $('.navbar-item').click(function () { $('#navbar').find('.active').removeClass('active'); $(this).addClass("active"); navPointerScroll($(this)); }); }); function navPointerScroll(ele) { var parentScroll = $("#navbar-items").scrollLeft(); var offset = ($(ele).offset().left - $('#navbar-items').offset().left); var totalelement = offset + $(ele).outerWidth()/2; var rt = (($(ele).offset().left) - ($('#navbar-wrapper').offset().left) + ($(ele).outerWidth())/2); $('#menuSelector').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.
Posting Komentar untuk "Cara buat navbar di blogger"