Cara Membuat Menu Navigasi di Blog Template Evo Magz Ala Mas Sugeng




Cara Membuat Menu Navigasi di Blog Template Evo Magz Ala Mas Sugeng
Cara Membuat Menu Navigasi di Blog Template Evo Magz Ala Mas Sugeng - 

Pada malam ini saya akan menjelaskan cara untuk membuat menu EvoMagz ala mas sugeng,  hal yang pertama harus anda ketahui untuk membuat menu navigasnya Evo Magz yang waa itu , anda harus paham sedikit mengenai css dan html  ya, Nah apabila anda tidak bisa membuat menu navigasi ala evo magz ini tidak masah, anda bisa membeli tempalate atau download yang gratisaanya. hehe 

Untuk Bagi yang memang belum tau seperti apakah ya menu navigasi keren dan evo magz ?anda bisa melihat gambar di bawah ini, atau mau lebih jelasnya lagi bisa lihat demonya template Evo Magz.
Cara Membuat Menu Navigasi di Blog seperti Evo Magz

Cara Memasang Menu Navigasi di Blog Template Evo Magz ala mas sugeng

  1. Anda login dulu ke blogger
  2. Dan  masuk ke editor template terlebih 
  3. Kemudian Copy code Css di bawah ini, tepat diatas kode  ]]></b:skin> atau </style>
    /* NAVIGATION MENU 2 */
    .toggleMenu{display:none;background:#E73138;padding:0 15px;height:48px;line-height:48px;color:#fff!important}
    #nav{font:normal bold 12px Arial,sans-serif;background:#333333;text-transform:uppercase;height:48px;line-height:48px}
    .nav-menu2{background:#333333;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:12em}
    .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:#ffffff;box-shadow:0 4px 0 #333333 inset}
    .nav-menu2 > li > a.active{background:#222222;box-shadow:0 4px 0 #E73138 inset}
    .nav-menu2 > li:hover > a{background:#222222;box-shadow:0 4px 0 #E73138 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;border:1px solid #d9d9d9;border:1px solid rgba(217,217,217,1);box-shadow:0 0 2px rgba(0,0,0,0.2)}
    .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:0;height:0;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}
    #search-form{background:#333333;float:right;margin:0 0;width:200px}
    #search-form table{width:100%;margin:0 0 0 0}
    #search-form td.search-box{padding-right:30px}
    #search-form input#search-box[type="text"]{background:#ffffff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;color:#666666;border:none}
    #search-form input#search-button[type="submit"]{font-family:FontAwesome;background:#E73037;color:#ffffff;height:36px;line-height:36px;margin:5px 10px 5px 0;padding:0 12px;border:none;outline:none;transition:all 0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s}
    #search-form input#search-button[type="submit"]:hover{background:#222222;cursor:pointer}
    #search-form input#search-box[type="text"]:focus{background:#eee;outline:none}
  4. Nah untuk memanggil kode css diatas tadinya, silahkan anda pasang htmlnya , caranya pasang kode dibawah ini tepat dibawah kode </header>
    <nav id='nav'>
    <a class='toggleMenu' href='#'><i class='fa fa-th-list'></i> Menu</a>
    <!-- secondary navigation menu start -->
    <ul class='nav nav-menu2'>
    <li><a class='active' href='masyadi.com'><i class='fa fa-home'></i> Home</a></li>
    <li><a href='#'>Menu 1</a>
    <ul>
    <li><a href='#'>Sub Menu 1</a></li>
    <li><a href='#'>Sub Menu 2</a></li>
    <li><a href='#'>Sub Menu 3</a></li>
    </ul>
    </li>
    <li><a href='#'>Menu 2</a>
    <ul>
    <li><a href='#'>Sub Menu 1</a>
    </li>
    <li><a href='#'>Sub Menu 2</a></li>
    <li><a href='#'>Sub Menu 3</a></li>
    </ul>
    </li>
    <li><a href='#'>Menu 3</a></li>
    <li><a href='masyadi.com'>Markup</a></li>
    <li><a href='masyadi.com'>Error Page</a></li>
    <li><a href='/p/lorem-ipsum-dolor-sit-amet-consectetur.html'>Static Page</a></li>
    </ul>
    <!-- secondary navigation menu end -->
    <form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;;' type='text' value='Search...' vinput=''/></td>
    <td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>
    </nav>
  5. kemudian Jika sudah silahkan save template anda

Membuat Menu Navigasi Evo Magz menjadi responsive di Blogger

Sebenarnya  cara diatas sudah cukup untuk membuat menu navigasi yang mirip evo magz dan sudah siap ya , namun apabila anda suka desaign template yang responsive , anda perlu menerapkan cara dibawah ini :
  1. Masih dalam halaman edit html ya bro.
  2. anda Cari kode </body> , kemudian pasang kode dibawah ini tepat diatas kode </body> tersebut
    <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><script src='https://googledrive.com/host/0BxH5pEKXqBWUSUhtOTZFOUw5QkU/menu-navigasi-evo-magz-masyadi-com.js'></script>
  3. Dan anda pasang Juga Media Queris responsivenya . Untuk cara pasang kode css berikut diatas kode  ]]></b:skin> atau </style>
    @media only screen and (max-width: 768px) {
          .nav { float: none; width: 100%; max-width: 100%; }.active { display: block; }#search-form { width: 100%; margin: 0 0 0 0 !important; }.nav li ul:before { display: none; }.nav > li { float: none; overflow: hidden; }.nav ul { display: block; width: 100%; float: none; }.nav-menu2 li ul { background: #eee; border: none; box-shadow: none; }.nav-menu2 li li ul { background: #f5f5f5; }.nav-menu2 li li a:hover { background: #ddd; }.nav > li.hover > ul, .nav li li.hover ul { position: static; }#search-form { width: 100%; background: #444; }#search-form td.search-box { padding: 0 10px !important; }#search-form td.search-button { padding: 0 10px; width: 1%; }#search-form input#search-box[type="text"] { margin: 0 0 0 0; }#search-form input#search-button[type="submit"] { margin: 0 0 0 0; }
    }
  4. Nah karena menu navigasi menggunakan font awesome , silahkan anda pasang javascript font awesome berikut diatas kode </head>
  5. <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
  6. selanjutnya silahkan anda save template  maka anda bisa melihat hasilnya
penjelasan pada malam ini sudah cukup dulu ya, karena sudah tengah malam, mata mulai mengantuk dan jika ada yang ingin di tanyakan langsung saja untuk bertanya ya, semoga berhasil dan bisa bermanfaat untuk anda. Terimaksih sudah berkunjung di blog saya ini..wassalam.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



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

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect