·
Masuk ke Tab Template->
Klik Edit HTML, Cari Code </head>
·
Lalu masukan CSS
dibawah ini tepat diatas kode had tadi
<style type='text/css'>
/* CSS HTML5 */
menu,nav{display:block;}*{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}input,button,select,textarea{font-size:100%;line-height:normal;vertical-align:baseline;}
/* CSS Main Menu */
a.menu-slide{display:none;background:#374760;padding:0
15px;height:46px;line-height:46px;color:#fff;text-transform:uppercase}
a.menu-slide:hover
{color:#fff;}
#nav
{font-size:14px;font-weight:700;background:#374760;height:56px;line-height:56px;margin:0
auto;}
.kang-teja
{background:#374760;list-style:none;margin:0;float:left;}
.kang-teja:before,.kang-teja:after
{content: " ";display:table;}
.kang-teja:after {clear:both;}
.kang-teja ul
{list-style:none;margin:0;width:11em;}
.kang-teja a
{display:block;padding:0 15px;}
.kang-teja li
{position:relative;margin:0;}
.kang-teja > li
{float:left;}
.kang-teja > li > a
{display:block;height:56px;line-height:56px;color:#fff;overflow:hidden;transition:initial}
.kang-teja > li >
a.active {background:#3cc091;color:#fff;}
.kang-teja > li:hover > a
{background:#3cc091;color:#fff;}
.kang-teja > li:hover >
a.active {background:#37b185;}
.kang-teja li ul
{background:#fafafa;display:block;position:absolute;top:50%;left:0;z-index:10;visibility:hidden;opacity:0;transition:all
.3s}
.kang-teja li li ul {left:100%;top:-1px;}
.kang-teja > li.hover >
ul {visibility:visible;opacity:1;top:100%;}
.kang-teja li li.hover ul
{visibility:visible;opacity:10;}
.kang-teja li li a
{display:block;color:#768187;position:relative;z-index:100;height:42px;line-height:42px;font-weight:400;transition:initial}
.kang-teja li li a:hover
{background:#3cc091;color:#fff;}
.kang-teja li li li a
{background:#fff;z-index:20;color:#333;}
.kang-teja li .parent:after
{content:
"\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#858d8f;}
.kang-teja li:hover
.parent:after{color:#fff;}
.kang-teja li ul li
.parent:after {content:
"\f0da";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#768187;float:right;}
.kang-teja li ul li
.parent:hover:after {color:#fff;}
#search-form
{background:#374760;float:right;margin:0;width:210px;}
#search-form table
{width:100%;margin:0;}
#search-form
input#search-box[type="text"] {background:#fff;height:36px;line-height:36px;margin:5px
0 5px 10px;padding:0 10px;width:99%;border:none;}
#search-form
input#search-button[type="submit"]
{font-family:FontAwesome;background:#3cc091;color:#fff;height:36px;line-height:36px;margin:5px
10px 5px -2px;padding:0 15px;border:none;outline:none;transition:all 0.25s;}
#search-form
input#search-button[type="submit"]:hover{background:#37b185;cursor:pointer;}
#search-form
input#search-box[type="text"]:focus
{background:#fdfdfd;outline:none;}
/* CSS Menu Responsive */
@media screen and
(max-width:960px){
#search-form{width:100%;background:#263142;padding:5px 0;}
#search-form
td.search-box{padding-right:0;width:100%;}
#search-form
input#search-box[type="text"]{background:#fff;}
#search-form input#search-box[type="text"]:focus{background:#fefefe;outline:none;}
;}
@media only screen and
(max-width:768px){
.nav li
ul:before{display:none;height:auto;overflow:hidden;border-bottom:1px solid
rgba(0,0,0,0.1);}
#nav{background:#374760}
.nav{float:none;width:100%;max-width:100%;}
.active{display:block;}
.kang-teja > li >
a.active{background:#263142;}
.kang-teja > li >
a.active:hover{background:#263142;}
#search-form{margin:0;}
.nav > li{float:none;overflow:hidden;}
.nav ul{display:block;width:100%;float:none;}
.kang-teja li
ul{background:#f6f6f6;box-shadow:none;}
.kang-teja li ul li a{background:#f0f0f0;}
.kang-teja > li >
a{background:#263142;height:40px;line-height:40px;}
.kang-teja li li
a:hover{background:#263142;color:#fff;}
.nav > li.hover > ul,.nav li li.hover
ul{position:static;}
.kang-teja li .parent:after,.kang-teja li ul
li
.parent:after{content:"\f0d7";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px;float:right;color:#949ea0;}
.kang-teja li:active .parent:after,.kang-teja
li ul li:active .parent:after{color:#c5cbd0;}
#search-form td.search-box{padding:0 0 0
10px;}
#search-form td.search-button{width:1%;}
#search-form
input#search-box[type="text"]{margin:0;background:#fff;}
#search-form
input#search-box[type="text"]:focus{background:#fdfdfd;outline:none;}
;}
@media only screen and
(max-width:640px){
#nav{background:#374760;margin:0;height:46px;line-height:46px;}
;}
</style>
·
Langkah selanjutnya,
cari kode </body> Dan Masukan Javascript dibawah ini tepat di
atasnya..
<script type='text/javascript'>
//<![CDATA[
// Main Menu
var
ww=document.body.clientWidth;$(document).ready(function(){$(".nav li
a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".menu-slide").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){$(".menu-slide").css("display","inline-block");if(!$(".menu-slide").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){$(".menu-slide").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>
·
'outer-wrapper lalu
masukan html dibawah ini tepat dibawah kode tadi, contoh kode <div
class='outer-wrapper'> Setiap Template Kodenya Bisa Berbeda-beda..
<nav id="nav"
itemscope="itemscope"
itemtype="http://schema.org/SiteNavigationElement"
role="navigation">
<a style="display: none;"
class="menu-slide" href="#"><i class="fa fa-list"></i>
Menu</a>
<ul class="nav kang-teja">
<li class=""><a
class="active" href="/"><span
itemprop="name"><i class="fa fa-home"></i>
Home</span></a></li>
<li class=""><a
class="parent" href="#" itemprop="url"><span
itemprop="name">Web Tools</span></a>
<ul>
<li class=""><a
href="#" itemprop="url"><span
itemprop="name">Ad Converter</span></a></li>
<li class=""><a
href="#" itemprop="url"><span
itemprop="name">Color Picker</span></a></li>
<li class=""><a
href="#" itemprop="url"><span
itemprop="name">CSS Filter</span></a></li>
<li class=""><a
href="#" itemprop="url"><span
itemprop="name">CSS Minifier</span></a></li>
<li class=""><a
href="#" itemprop="url"><span
itemprop="name">CSS Triangle</span></a></li>
<li class=""><a
href="#" itemprop="url"><span
itemprop="name">Fontawesome</span></a></li>
<li class=""><a
href="#" itemprop="url"><span
itemprop="name">Kamus HTML</span></a></li>
</ul>
</li>
<li class=""><a
href="https://mastamvan.blogspot.com/search/label/CSS?&max-results=6"
itemprop="url"><span
itemprop="name">CSS</span></a></li>
<li class=""><a
href="https://mastamvan.blogspot.com/search/label/HTML?&max-results=6"
itemprop="url"><span
itemprop="name">HTML</span></a></li>
<li><a
href="https://mastamvan.blogspot.com/search/label/Seo?&max-results=6"
itemprop="url"><span
itemprop="name">SEO</span></a></li>
<li><a
href="https://mastamvan.blogspot.com/search/label/Templates?&max-results=6"
itemprop="url"><span
itemprop="name">Template</span></a></li>
<li><a href="#"
itemprop="url"><span itemprop="name">Tips Blogger</span></a></li>
<li><a href="#"
itemprop="url"><span
itemprop="name">Widget</span></a></li>
</ul>
<form
action="https://mastamvan.blogspot.com/p/search-post-mas-tamvan.html"
id="search-form">
<input name="cx"
value="partner-pub-016346400151212832090:egwuycyircu"
type="hidden"/>
<input name="cof"
value="FORID:10" type="hidden"/>
<input name="ie"
value="ISO-8859-1" type="hidden"/>
<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='';"
value="Search..." type="text"/>
</td>
<td
class="search-button">
<input
id="search-button" value=" " type="submit"/>
</td>
</tr>
</tbody>
</table>
</form>
</nav>
Silahkan ganti tanda # [pagar] dengan link
tujuan kalian. Dan ganti juga Nama Menu Sesuai Keinginan kalian
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
Atau Icon Font Awesomenya tidak tampil..
silahkan masukan script ini di atas kode </head> juga.
<link
rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"></link>
Kalo sudah tinggal ganti tanda pagar dengan link kalian dan judul menunya juga ganti.
0 Reviews:
Post Your Review