Skip to main content

follow us


www.azid.web.id - Cara Membuat Menu Navigasi Keren Ala Kompi Flexible Non AMP Versi 8. Hallo sobat kembali lagi, pada kesempatan ini saya akan membagikan trik membuat menu navigasi keren seperti pada template kompi flexible non AMP 8. Mungkin diantara sobat yang tertarik menggunakan navigasi tersebut tanpa mengganti template kompi flexible 8 secara keseluruhan maka sobat bisa mengikuti tutorialnya disini.

Sebelum membuat navigasi ala kompi flexible non AMP ini kiranya saya akan menyampaikan sedikit keunggulan dari menu navigasi ini. Diantara keunggulan menu navigasi ini menurut saya adalah yang pertama tentunya responsive pada semua media, (pc, tablet, hp), semua icon pada menu navigasi ini menggunakan icon svg sehingga sangat ringat dan memberatkan blog sobat, memiliki tombol dropdown yang keren dengan animasi script yang tidak ketinggalan zaman, terdapat icon ikuti facebook, instagram, twitter, youtube dan blogger, serta memilik tampilan slide sidebar pada lebar 800px. Jadi sobat yang akan menggunakan navigasi ala kompi flexible tidak akan menyesal.

Baik, untuk membuat navigasi keren dan responsive ini saya akan menjadikannya dua versi yang pertama dengan tampilan sebagaimana aslinya yaitu menu navigasi pada umumnya pada layar diatas 800px dan berupa slide sidebar dibawah layar 800px dan hanya berupa menu navigasi slide sidebar disemua ukuran layar.

Membuat Navigasi Responsive dengan tampilan slide sidebar pada lebar layar max-width:800px

Pertama, masuk pada akun blogger dan klik theme kemudian pilih edit HTML. Jika sobat sebelumnya ada menu nav maka cari saja dan hapus CSSnya kmudian ganti dengan CSS dibawah ini:


<style>
.icon_menu svg path{fill:#000000}
.topnav{background-color:#01579B}
.topnav a{color:#f2f2f2;}
.dropdown .dropbtn,.topnav a,.dropdown-content a{font-size:16px;font-weight:500;padding:0 16px;height:50px;line-height:50px}
.topnav{overflow:hidden;display:block;height:50px}
.topnav a{float:left;display:block;text-align:center;text-decoration:none}
.icon_menu,.topnav a.closebtn{display:none}
.dropdown{float:left;overflow:hidden}
.dropdown .dropbtn{border:none;outline:0;color:#fff;background-color:inherit;font-family:inherit;margin:0;padding:0 6px 0 16px;cursor:pointer;position:relative;z-index:1}
.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:2}
.dropdown-content a{float:none;color:#000;text-decoration:none;display:block;text-align:left;overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap;height:35px;line-height:35px}
.dropdown:hover .dropbtn.active,.dropbtn.active,.dropbtn.active:hover{background-color:#f9f9f9;color:#000}
.topnav a:hover,.dropdown:hover .dropbtn{background-color:#555;color:#fff}
.dropdown-content a:hover{background-color:#ddd;color:#000;}
.dropbtn.active~.dropdown-content{display:block}
#menuoverlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:9998;cursor:pointer}
.dropbtn .fa{float:right;margin-left:2px;margin-top:12px;position:relative;z-index:-1}
.dropbtn.active .fa path{fill:#000}
.dropbtn.active{position:relative;z-index:1}
.outclick{display:none}
.dropbtn.active~.outclick{content:"";background:transparent;cursor:pointer;width:100%;height:40px;position:relative;margin-top:-40px;z-index:2;display:block}
.dropdown-content svg{width:24px;height:24px;vertical-align:-6px}
.dropdown-content span{margin-left:10px;color:#fff}
.dropdown-content .linkfb{background-color:#3b5998}
.dropdown-content .linkig{background-color:#C2185B}
.dropdown-content .linktw{background-color:#1da1f2}
.dropdown-content .linkyt{background-color:#bd081c}
.dropdown-content .linkbl{background-color:#ff8226}
.dropdown-content .linkfb:hover{background-color:#2d4373}
.dropdown-content .linkig:hover{background-color:#AD1457}
.dropdown-content .linktw:hover{background-color:#0288d1}
.dropdown-content .linkyt:hover{background-color:#8c0615}
.dropdown-content .linkbl:hover{background-color:#ff6f00}
@media screen and (max-width:800px){.icon_menu,.topnav{position:fixed;top:0}
.topnav .dropdown,.topnav a{float:none}
.topnav{height:100%;width:250px;z-index:9999;left:-250px;overflow-x:hidden;transition:.5s}
.icon_menu{height:50px;line-height:50px;right:50px;display:block}
.icon_menu svg{width:26px;height:26px;vertical-align:-8px}
.topnav a.closebtn{position:absolute;display:block;top:0;right:0;font-size:32px;font-weight:lighter;height:40px;line-height:32px;padding:0 12px}
.topnav a{text-align:left}
.topnav .dropdown-content{position:relative}
.topnav .dropdown .dropbtn{width:100%;text-align:left}
.flow{overflow:hidden;position:relative;}
}
</style>

Letakkan CSS tersebut diatas </head>

Kedua, cari kode </header> dan pastekan kode berikut diatas </header> atau dibawahmya tergantung template sobat. Atau untuk mudahnya sobat bisa mencari kode menu tempat menu nav sebelumnya dan hapus menu nav tersebut dan letakkan kode berikut tepat pada kode menu nav sebelumnya.


<div class='topnav' id='myTopnav'>
<a href='/'>Home</a>
<a href='/search/label/Tutorial'>Tutorial</a>
<a href='/search/label/Download'>Download</a>
<a href='/p/ilmu.html'>Ilmu</a>
<a href='/p/kepemimpinan.html'>Kepemimpinan</a>
<div class='dropdown'>
<button class='dropbtn'>Pendidikan
      <svg class='fa' height='24px' viewBox='0 0 24 24' width='24px'><path d='M7,10L12,15L17,10H7Z' fill='#000000'/></svg>
</button>
<div class='outclick'/>
<div class='dropdown-content'>
<a href='/p/pendidikan.html'>Pendidikan Umum</a>
<a href='/p/pendidikan-karakter.html'>Pendidikan Karakter</a>
<a href='/p/penelelitian.html'>Penelitian</a>
</div>
</div>
<div class='dropdown'>
<button class='dropbtn'>Islam
      <svg class='fa' height='24px' viewBox='0 0 24 24' width='24px'><path d='M7,10L12,15L17,10H7Z' fill='#000000'/></svg>
</button>
<div class='outclick'/>
<div class='dropdown-content'>
<a href='/p/seputar-islam.html'>Seputar Islam</a>
<a href='/p/tokoh-muslim.html'>Tokoh Muslim</a>
<a href='/p/filsafat-islam.html'>Filsafat Islam</a>
</div>
</div>
<div class='dropdown'>
<button class='dropbtn'>Ikuti
      <svg class='fa' height='24px' viewBox='0 0 24 24' width='24px'><path d='M7,10L12,15L17,10H7Z' fill='#000000'/></svg>
</button>
<div class='outclick'/>
<div class='dropdown-content'>
<a class='linkfb' href='https://www.facebook.com/arabic.azidzainuri' rel='nofollow noopener' target='_blank' title='Link to Facebook'><svg height='34' viewBox='0 0 24 24' width='34' xmlns='http://www.w3.org/2000/svg'><title>Facebook</title><path d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z' fill='#fff'/></svg><span>Facebook</span></a>
<a class='linkig' href='https://www.instagram.com/azidzainuri' rel='nofollow noopener' target='_blank' title='Link to Instagram'><svg height='34' viewBox='0 0 24 24' width='34' xmlns='http://www.w3.org/2000/svg'><title>instagram</title><path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z' fill='#fff'/></svg><span>Instagram</span></a>
<a class='linktw' href='https://twitter.com/azid_zainuri' rel='nofollow noopener' target='_blank' title='Link to Twitter'><svg height='34' viewBox='0 0 24 24' width='34' xmlns='http://www.w3.org/2000/svg'><title>Twitter</title><path d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z' fill='#fff'/></svg><span>Twitter</span></a>
<a class='linkyt' href='https://www.youtube.com/watch?v=duBZmKlShEk' rel='nofollow noopener' target='_blank' title='Link to Youtube'><svg height='34' viewBox='0 0 24 24' width='34' xmlns='http://www.w3.org/2000/svg'><title>Google+</title><path d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z' fill='#fff'/></svg><span>Youtube</span></a>
<a class='linkbl' href='https://www.blogger.com/follow.g?blogID=4110298765504517079' rel='nofollow noopener' target='_blank' title='Link to Blogger'><svg height='34' viewBox='0 0 24 24' width='34' xmlns='http://www.w3.org/2000/svg'><title>Google+</title><path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z' fill='#fff'/></svg><span>Blogger</span></a>
</div>
</div>
<a class='closebtn' href='javascript:void(0)' onclick='closeNav();menuoverlayOff();removeClassBody()'>&amp;times;</a>
</div>
<div id='menuoverlay' onclick='closeNav();menuoverlayOff();removeClassBody();'/>
<a class='icon_menu' href='javascript:void(0);' onclick='openNav();menuoverlayOn();addClassBody();' title='Menu'>
<svg height='24px' viewBox='0 0 24 24' width='24px'><path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' fill='#000000'/></svg>
</a>
<div class='clear'/>

Ketiga, Setelah kedua langkah tersebut dilakukan langkah terakhir adalah cari kode </body> kemudian letakkan kode berikut tepat diatas kode </body>


<script type='text/javascript'>//<![CDATA[
/* Set the width of the side navigation to 250px */
function openNav() {
    document.getElementById("myTopnav").style.left = "0";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
    document.getElementById("myTopnav").style.left = "-250px";
}

// Add active class to the current button (highlight it)
var btns = document.getElementsByClassName("dropbtn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() { 
    var current = document.getElementsByClassName("active");
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    this.className += " active";
  });
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropbtn");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('active')) {
        openDropdown.classList.remove('active');
      }
    }
  }
}
function menuoverlayOn() {
    document.getElementById("menuoverlay").style.display = "block";
}

function menuoverlayOff() {
    document.getElementById("menuoverlay").style.display = "none";
}

function addClassBody() {
    var element, name, arr;
    element = document.body;
    name = "flow";
    arr = element.className.split(" ");
    if (arr.indexOf(name) == -1) {
        element.className += " " + name;
    }
}
function removeClassBody() {
    var element = document.body;
    element.className = element.className.replace(/\bflow\b/g, "");
}
//]]>
</script>

Keempat, langkah selanjutnya adalah sobat tinggal Save Template sobat dan lihat haslinya. Jika tidak sesuai ukurannya sobat bisa edit cssnya dengan bantuan inpeksi (klik kanan template pilih inpeksi paling bawah) dan jika backgroundnya tidak sesuai sobat bisa mengantinya atau rubah dengan kode .topnav{background-color:transparent}

Membuat slide sidebar ala kompi flexible versi 8 di semua tampilan layar
Untuk membuat slide sidebar ini sobat bisa mengikuti cara diatas, dan pada langkah pertama sobat bisa menggantinya dengan kode CSS berikut:


<style>
.icon_menu svg path{fill:#000000}
.topnav a{color:#f2f2f2}
.dropdown .dropbtn,.topnav a,.dropdown-content a{font-size:16px;font-weight:500;padding:0 16px;height:57px;line-height:57px}
.topnav{overflow:hidden;display:block;}
.topnav a{display:block;text-align:center;text-decoration:none}
.activr{background-color:#20aadb;color:#161c1e}
.icon_menu,.topnav a.closebtn{display:none}
.dropdown{float:left;overflow:hidden}
.dropdown .dropbtn{border:none;outline:0;color:#fff;background-color:inherit;font-family:inherit;margin:0;padding:0 6px 0 16px;cursor:pointer;position:relative;z-index:1}
.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:2}
.topnav {background-image:linear-gradient(to right, #00626b 0%, #00626b 100%)}
.dropdown-content a{float:none;color:#000;text-decoration:none;display:block;text-align:left;overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap;height:35px;line-height:35px}
.dropdown:hover .dropbtn.active,.dropbtn.active,.dropbtn.active:hover{background-color:#f9f9f9;color:#000}
.topnav a:hover,.dropdown:hover .dropbtn{background-color:#555;color:#fff}
.dropdown-content a:hover{background-color:#ddd;color:#000;}
.dropbtn.active~.dropdown-content{display:block}
#menuoverlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:999;cursor:pointer}
.dropbtn .fa{float:right;margin-left:2px;margin-top:12px;position:relative;z-index:-1}
.dropbtn.active .fa path{fill:#000}
.dropbtn.active{position:relative;z-index:1}
.outclick{display:none}
.dropbtn.active~.outclick{content:&quot;&quot;;background:transparent;cursor:pointer;width:100%;height:40px;position:relative;margin-top:-40px;z-index:2;display:block}
.topnav{position:fixed;top:0}
.icon_menu{position:absolute;top:0}
.topnav .dropdown,.topnav a{float:none!important}
.topnav{height:100%;width:250px;z-index:9999;right:-250%;overflow-x:hidden;transition:.5s}
.icon_menu{height:57px;line-height:50px;right:10px;display:block}
.icon_menu svg{width:26px;height:26px;vertical-align:-8px}
.topnav a.closebtn{position:absolute;display:block;top:0;right:0;font-size:32px;font-weight:lighter;height:57px;
line-height:57px;padding:0 12px}
.topnav a{text-align:left}
.topnav .dropdown-content{position:relative}
.topnav .dropdown .dropbtn{width:100%;text-align:left}
.flow{overflow:hidden;position:relative;}
.dropdown-content svg{width:24px;height:24px;vertical-align:-6px}
.dropdown-content span{margin-left:10px;color:#fff}
.dropdown-content .linkfb{background-color:#3b5998}
.dropdown-content .linkig{background-color:#C2185B}
.dropdown-content .linktw{background-color:#1da1f2}
.dropdown-content .linkyt{background-color:#bd081c}
.dropdown-content .linkbl{background-color:#ff8226}
.dropdown-content .linkfb:hover{background-color:#2d4373}
.dropdown-content .linkig:hover{background-color:#AD1457}
.dropdown-content .linktw:hover{background-color:#0288d1}
.dropdown-content .linkyt:hover{background-color:#8c0615}
.dropdown-content .linkbl:hover{background-color:#ff6f00}
</style>

Demikianlah tutorial Cara Membuat Menu Navigasi Keren Ala Kompi Flexible Non AMP Versi 8. Semoga bermanfaat. Amin.

PERHATIAN!: setiap link template pada blog ini di direct 5 -7 kali jadi harap bersabar.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar