Cara Membuat Menu Navigasi Ala Evomagz

AA Sciences, Aldi Andreansyah - Menu Navigasi, Menu Navigasi Evomagz, Menu Navigasi Keren Evomagz, Cara Membuat Menu Navigasi Ala Evomagz.

Cara Membuat Menu Navigasi Ala Evomagz - Adanya Menu Navigasi merupakan salah satu kegiatan mempercantik sebuah tampilan website terutama tampilan blog untuk para blogger yang dimana hal tersebut di inginkan kan untuk para khalayak user website atau blog terutama.

Tanpa adanya tampilan yang cantik mungkin sebuah website atau blog tidaklah tampil sempurna dikarenakan sebuah tampilan yang tidak cantik tidak lah hal yang diinginkan khususnya para user, hal membuat nya cantik tampilan yakni salah satunya adalah mendesain nya sebuah tampilan website atau blog tersebut agar tetap cantik yan bertujuan agar para pengunjung semakin betah pada halaman website user tersebut sehingga tidak diragukan lagi jika para pengunjung tersebut semakin antusias sehingga sebagian besar akan sering nya mengunjungi situs kalian tersebut.

Salah satu faktor membuat cantik nya sebuah blog yaitu adanya sebuah navigasi, menu navigasi sudah tak asing lagi tentunya dengan salah satu tampilan tersebut.

Menu Navigasi adalah menu yang dimana terdapat beberapa fitur seperti hal tersebut menakup sebuah informasi terutama informasi berbasis website/blogger yang biasa nya sebuah menu navigasi tersebut terdapat beberapa daftar isi, seperti : postingan tertentu, label, recent post, postingan arsip dan jenis fitur serupa lainnya.

Di kali ini AA Sciences akan membahas atau membagikan yakni Cara Membuat Menu Navigasi Ala Evomagz yang dimana menu tersebut sudahlah jelas bagus dan efisien bahkan sudah tidak asing lagi di telinga kita.

Membahas mengenai Evomagz, Evomagz merupakan sebuah tampilan ata biasa nya disebut Template melainkan evomagz bukan lah sebuah situs dan aktor sekalipun.

Template dari Evomagz pun tentunya sudah tidak asing lagi dimana para user website terutama user blog sekalipun karena sudah banyak sekali khalayak menggunakan Template evomagz satu ini.

Baca :

• Cara Membuat Search Button Ala Evomagz
• Cara Membuat Menu Navigasi Plus Search Button
• 8 Fitur Penting dalam Menu Navigasi
• Menu Navigasi plus Search Show Hide
• Cara Membuat Menu Navigasi Ala Simplify
• Cara Membuat Menu Navigasi Plus Sosmed Responsive

Evomagz pun diciptakan oleh seorang pengguna website, siapa lagi jika bukan Mas Sugeng Yaps Mas Sugeng. Mas Sugeng adalah seorang pengguna website yang dimana sudah tidak asing lagi jika membahas nya, sudah banyak tutor² yang ia berikan yang terutama yakni info blogger, SEO, Adsense. Namun tidak hanya itu Mas Sugeng pun memilki kepandaian salah satu nya pun membuat sebuah Template ini yakni Evomagz tadi.

Sekian Pembahasan nya yang dapat AA Sciences sampaikan, Maka langsung saja mengenai tujuan nya, yakni Cara Membuat Menu Navigasi Ala Evomagz, berikut cara pembuatan nya.

Cara Membuat Menu Navigasi Ala Evomagz di Blogger.

Pembuatan CSS nya terlebih dahulu :

• Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian.
• Template - > Edit HTML - > CTRL+F (untuk memudahkan pencarian) lalu cari kode ]]></b:skin> atau dapat juga kode </style>.
• Jika sudah ditemukan kode ]]></b:skin> atau </style> nya tadi, langsung saja kalian Salin kan Script CSS/Menu Navigasi Evomagz nya di bawah ini tepat sebelum tag ]]></b:skin> atau </style>, berikut CSS nya :

/* Menu Navigasi by https://aldiandreansyah.blogspot.co.id */

.toggleMenu {

    display:none;

    background:$(menu.navigation.border.color);

    padding:0 15px;

 height:48px;

 line-height:48px;

    color: #fff !important;

}

.dropdowns {

 font:$(menu.font);

 background:$(menu.background.color);

 text-transform:uppercase;

 height:48px;

 line-height:48px;

}

.nav-menu2 {

 background:$(menu.background.color);

    list-style: none;

 margin:0 0 0 0;

     *zoom: 1;

 float:left; 

}

.nav-menu2:before,

.nav-menu2:after {

    content: " ";

    display: table;

}

.nav-menu2:after {

    clear: both;

}

.nav-menu2 ul {

    list-style: none;

 margin:0 0 0 0;

 width:auto;

    white-space:nowrap;

}

.nav-menu2 a {

 display:block;

    padding:0 15px;

}

.nav-menu2 li {

    position: relative;

 margin:0 0;

}

.nav-menu2 > li {

    float: left;

}

.nav-menu2 > li > a {

    display: block;

 height:48px;

 line-height:48px;

 color:$(menu.navigation.text.color);

 box-shadow: 0 4px 0 $(menu.background.color) inset;

}

.nav-menu2 > li > a.active {

 background:$(menu.navigation.hover.color);

 box-shadow: 0 4px 0 $(menu.navigation.border.color) inset;

}

.nav-menu2 > li:hover > a {

 background:$(menu.navigation.hover.color);

 box-shadow: 0 4px 0 $(menu.navigation.border.color) inset;

}

.nav-menu2 li ul {

 background:#fff;

 display:block;

 position:absolute;

 left:0;

 z-index:10;

 visibility:hidden;

 opacity:0;

    -webkit-transition:all .25s ease-out;

       -moz-transition:all .25s ease-out;

        -ms-transition:all .25s ease-out;

         -o-transition:all .25s ease-out;

            transition:all .25s ease-out;

 box-shadow:0 0 4px rgba(0,0,0,0.3);

}

.nav-menu2 li li ul {

 left:100%;

 top:-1px;

}

.nav-menu2 > li.hover > ul {

 visibility:visible;

 opacity:10;

}

.nav-menu2 > li > ul:before {

 content:"";

 width:0px;

 height:0px;

 position:absolute;

 bottom:100%;

 left:20px;

 border-width:8px;

 border-style:solid;

 border-color:transparent transparent #fff transparent;

 display:block;

}



.nav-menu2 li li.hover ul {

 visibility:visible;

 opacity:10;

}

.nav-menu2 li li a {

    display: block;

 color:#333;

    position: relative;

    z-index:100;

 line-height:32px;

}

.nav-menu2 li li a:hover {

 background:#f0f0f0;

}

.nav-menu2 li li li a {

    background:#fff;

    z-index:20;

 color:#333;

}

.nav-menu2 li .parent:after {

    content: "\f107";

    font-family: FontAwesome;

    font-style: normal;

    font-weight: normal;

    text-decoration: inherit;

    padding-left:6px;

}

Kalian dapat mengubah jarak, batas, warna, border, solid,font, jenis font, ukuran font, rata kiri/kanan/tengah/atas/bawah sesuai kebutuhan kalian.

Pembuatan HTML nya :

• Masih dalam mode Template - > CTRL+F (untuk memudahkan pencarian) - > Cari Letak Bagian atas (header) kalian atau biasanya kode tag nya yakni </head> atau </header> - > Letakkan HTML pemanggil nya di bawah ini tepat sebelum dan dapat juga sesudah </head> atau </header>, berikut Script HTML nya :

<nav class='dropdowns'>

  <a class='toggleMenu' href='#'><i class='fa fa-th-list'/> Menu</a>



 <!-- secondary navigation menu start -->

 <ul class='nav nav-menu2'>

  <li><a class='active' href='https://goo.gl/cohRrZ'><i class='fa fa-home'/> Beranda</a></li>

  <li><a href='#'>Menu 1</a>

   <ul>

   <li><a href='https://goo.gl/cohRrZ'>SubMenu 1</a></li>

   <li><a href='https://goo.gl/cohRrZ'>SubMenu 2</a></li>

   <li><a href='https://goo.gl/cohRrZ'>SubMenu 3</a></li>

   </ul>

  </li>

  <li><a href='#'>Menu 2</a>

   <ul>

   <li><a href='https://goo.gl/cohRrZ'>SubMenu 1</a></li>

   <li><a href='https://goo.gl/cohRrZ'>SubMenu 2</a></li>

   <li><a href='https://goo.gl/cohRrZ'>SubMenu 3</a></li>

   </ul>

  </li>

  <li><a href='https://goo.gl/cohRrZ'>Menu 3</a></li>

  <li><a href='https://goo.gl/cohRrZ'>Menu 4</a></li>

 </ul>

 <!-- secondary navigation menu end -->

  </nav>

Kalian dapat mengubah URL dengan tag sesudah <a href= , lalu ubah dengan URL tertentu kalian baik itu postingan, label, arsip, popular post dan URL lainnya. Dan dapat juga kalian ubah Nama Nama Tag tertentu dengan kode sesudah Tag <a href='https://goo.gl/cohRrZ'> Disini Letak Nama Nama Tag nya </a> atau <a href='#'> Disini Letak Nama Nama Tag nya </a> nya dan ubah sesuai keinginan kalian.

Pembuatan Agar Menu Navigasi Ala Evomagz berfungsi sepenuhnya :

• Masih dalam mode Template - > CTRL+F (untuk memudahkan pencarian) - > Cari kode Tag </body> atau jika kalian bingung Kode tag ini biasanya terletak pada paling bawah kode sebuah Template - > Jika sudah, Letakkan Jquery/Javascript agar menu navigasi nya berfungsi di bawah ini tepat sebelum kode Tag </body>, berikut Script Jquery/Javascript nya :

<script type='text/javascript'>

//<![CDATA[

var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".toggleMenu").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".toggleMenu").css("display","inline-block");if(!$(".toggleMenu").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".toggleMenu").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}}

//]]>

</script>

• Langkah Terakhir, Langsung saja Simpan Template dan lihat hasilnya.

Demikian, mengenai Cara Membuat Menu Navigasi Ala Evomagz di Blogger yang dapat AA Sciences sampaikan, semoga bermanfaat dan sekaligus menambah wawasan kalian, Amin.

Share this post