Cara Membuat Menu Di blog Dengan Sangat Mudah Terbaru

Toturialblogcom : Trik kali ni saya akan membagikan cara membuat menu di blogger dengan cara mudah dan peraktis tentunya bisa di gunakan pada blog atau website ,bagi anda yang belum membuat menu di blog segeralah anda bikin dengan cara yang sangat mudah ,anda bisa melihat pada menu yang ada di blog saya anggap saja itu sebagai demonya , lumannya bagus dan lebih menu Seo friendly ,karan menu ini berasal dari Mas Sugeng ,jadi saya akan shree menu ini ke pada anda semunya ,agar blog anda kelitan lebih bagus dan memudahkan bagi pengunjung untuk memilih judul yang dia cari .yu tunnggu apa yu kita langsung aja Toturialnya di bawah ini Cara Membuat Menu Di blog Dengan Sangat Mudah Terbaru .

1 Anda Login Ke Blogger anda masaing masing
2 Dan anda pilih menu Teamplate dan pilih Edit Html 
3 Kemudain anda Tekan CTRL+F dan anda carai kode yang ber nama kode ]]></b:skin> atau kode </style> dan copy kan kode di bawah di atasnya kode  ]]></b:skin>

/* 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 Dan cara selanjutnya anda tinggal cara lagi kode </header> dan copy kan kode di bawah di di bawahnya 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 Masih dalam menu Edit Html dan anda cara lagi Kode seperti kode </body> dan copy kan kode di bawah di atas kode </body>

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

6 Dan anda cara lagi kode ]]></b:skin> atau kode </style> dan copy kode di bawah di atasnya kode ]]></b:skin> atau kode </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; }

}

7 Kemu dian anda Save dan lihat hasilnya ,juka menu slidernya ga keluwar anda bisa Copy kan kode di bawah di atas kode </head> kemudian anda Seve

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

8 Nah Kemudian anda Save dan lihat hasilnya apakah seprurna atau gagal ,anda bisa mengulanggi lagi kembali ,dan bila anda masih binggung cara nya anda bisa chet di komentar munkin saya bisa ,membantu anda ,cukup sakian dari saya semoga artikel ini bisa bermanpaat bagi anda ,dah salam blogger dan salam sukkes untuk anda .

Tweet

Subscribe to receive free email updates: