Penulis
Muhamad Nurul Huda
Cara Membuat Menu Navigasi Seperti Evo Magz di Blog - Menu Navigasi di Blog, adalah menu yang berguna untuk membantu pembaca dalam mencari suatu kategori artikel pada blog tersebut. Dengan menambah fitur ini, Blogger dapat menunjukkan label atau kategori utama apa saja yang ingin ditunjukkan kepada pembaca.
Ada banyak sekali versi dari navigasi blog. mulai dari tampilan yang sederhana, biasa, hingga ada yang menggunakan navigasi blog versi dropdown.
Apa sih maksutnya navigasi dropdown itu ?
Begini. Maksudnya adalah ketika kamu mengarahkan kursormu ke tempat dimana menu navigasi berada, contoh saja yang bertuliskan Blog. Nah, maka akan muncul sub - sub menu lainnya. Entah itu dibawah atau disamping menu utama tersebut.
Baca dulu : |
|
Hal itu berguna apabila blog atau websitemu memiliki kategori atau label utama yang dapat diturunkan lagi menjadi sub - sub menu yang lebih sederhana. Nah, kali ini kita akan bahas cara membuat menu navigasi ala template Evo Magz dari Mas Sugeng.
Kamu tentu sudah tahu bukan mengenai template buatan Mas Sugeng yang satu ini bukan ? Itu lho, template yang penjualannya laku keras dan sangat diminati.
Oke, berikut adalah " Cara Membuat Menu Navigasi Seperti Evo Magz di Blog " :
Catatan ! |
Saya tidak bermaksud untuk menduplikat template premium milik Mas Sugeng, melainkan hanya sekedar ingin berbagi tentang navbarnya saja |
Oke, berikut adalah " Cara Membuat Menu Navigasi Seperti Evo Magz di Blog " :
 |
| anggasave.com |
1. Buka blogger.com
2. Pilih menu Tema atau Template
3. Cari dan pilih Edit HTML
4. Cari kode berikut ]]></b:skin> atau </style> (Tekan tombol CTRL+F agar lebih mudah)
5. Copas kode berikut tepat diatas salah satu kode yang tadi :
CSS |
@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; } } /* 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} |
6. Cari kode </header>
7. Copas kode berikut tepat dibawah kode </header>
HTML |
<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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search...' vinput=''/></td> <td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form> </nav> |
HTML |
<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> |
Catatan ! |
Jika anda belum memasang font awesome, copas kode dibawah ini : <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>l Letakkan tepat diatas kode </head> |
10. Klik simpan atau pratinjau untuk melihat hasilnya
0 Response to "Cara Membuat Menu Navigasi Seperti Evo Magz di Blog"
Post a Comment