Membuat Menu Navigasi ala Template Evo Magz

Halo sob, kalin pasti udah gak asing sama template Evo Magz kan? Yap, template tersebut merupakan buatan Mas Sugeng. Nah, dikesempatan kali ini, saya bukan membagikan templatenya, melainkan saya akan membagikan cara membuat menu navbar ala Evo Magz :D Yuk mari disimak ! :D

• Langkah pertama, login ke akun Blogger sobat, lalu masuk ke Dashboard blog sobat.
• Beralih menu Template, lalu pilih Edit HTML.
• Masukkan CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>

.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}  

• Kemudian masukkab HTML dibawah ini setelah kode </header>

<nav id="nav">  
<a class="toggleMenu" href="https://www.blogger.com/blogger.g?blogID=1424012196831434266#"><i class="fa fa-th-list"></i> Menu</a>  
<!-- secondary navigation menu start -->  
<ul class="nav nav-menu2">  
<li><a class="active" href="http://blogarta.co.vu/"><i class="fa fa-home"></i> Home</a></li>  
<li><a href="https://www.blogger.com/blogger.g?blogID=1424012196831434266#">Menu 1</a>  
<ul>  
<li><a href="https://www.blogger.com/blogger.g?blogID=1424012196831434266#">Sub Menu 1</a></li>  
<li><a href="https://www.blogger.com/blogger.g?blogID=1424012196831434266#">Sub Menu 2</a></li>  
<li><a href="https://www.blogger.com/blogger.g?blogID=1424012196831434266#">Sub Menu 3</a></li>  
</ul>  
</li>  
<li><a href="https://www.blogger.com/blogger.g?blogID=1424012196831434266#">Menu 2</a>  
<ul>  
<li><a href="https://www.blogger.com/blogger.g?blogID=1424012196831434266#">Sub Menu 1</a>  
</li>  
<li><a href="https://www.blogger.com/blogger.g?blogID=1424012196831434266#">Sub Menu 2</a></li>  
<li><a href="https://www.blogger.com/blogger.g?blogID=1424012196831434266#">Sub Menu 3</a></li>  
</ul>  
</li>  
<li><a href="https://www.blogger.com/blogger.g?blogID=1424012196831434266#">Menu 3</a></li>  
<li><a href="https://www.blogger.com/blogger.g?blogID=1424012196831434266#">Markup</a></li>  
<li><a href="https://www.blogger.com/blogger.g?blogID=1424012196831434266#">Error Page</a></li>  
<li><a href="https://www.blogger.com/blogger.g?blogID=1424012196831434266#">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><ul>  
<li>  
</li>  
</ul>  

Terakhir simpan template. Selesai

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Unknown

Artikel Terkait