Horizontal Menu Males Keren

Menu Males sebenarnya hanya menggunakan loading perubahan dengan mengandalkan transisi yang lambat, sehingga tampilannya seperti orang males. Tampilan widget horizontal menu males ini cukup menarik dan atraktif, sehingga dapat dijadikan daya tarik tersendiri bagi blog anda. Sekarang mari kita bahas cara membuat horizontal menu males keren untuk blog. Ikuti langkah berikut.

Log in ke blog anda, jangan blog tetangga ya
Klik Template
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>

#males_menu{background:#656870; width:100%; margin:0px; height:60px; padding:0px; font-size:13px; font-family:'Trebuchet MS',sans-serif; font-weight:normal; word-spacing:2; -webkit-font-smoothing:antialiased}
#males_menu li.home a{padding:0px 30px}
#males_menu li.home img{vertical-align:middle}
#males_menu ul{height:60px; list-style:none; margin:0; padding:0px}
#males_menu li{float:left; padding:0px}
#males_menu li a{background:#656870; color:#CCC; display:block; font-weight:bold; line-height:60px; margin:0px; padding:0px 25px; text-align:center; text-decoration:none; -webkit-transition:all 900ms cubic-bezier(0.47,0,0.745,0.715); -moz-transition:all 900ms cubic-bezier(0.47,0,0.745,0.715); -o-transition:all 900ms cubic-bezier(0.47,0,0.745,0.715); -ms-transition:all 900ms cubic-bezier(0.47,0,0.745,0.715); transition:all 600ms cubic-bezier(0.47,0,0.745,0.715)}
#males_menu li a:hover, #males_menu ul li:hover a{background:#46484E; color:#FFF; text-decoration:none; -webkit-transition:all 900ms cubic-bezier(0.47,0,0.745,0.715); -moz-transition:all 900ms cubic-bezier(0.47,0,0.745,0.715); -o-transition:all 900ms cubic-bezier(0.47,0,0.745,0.715); -ms-transition:all 900ms cubic-bezier(0.47,0,0.745,0.715); transition:all 600ms cubic-bezier(0.47,0,0.745,0.715)}
#males_menu li ul{background:#656870; display:none; height:auto; padding:0px; margin:0px; border:0px; border-bottom-right-radius:5px; border-bottom-left-radius:5px; position:absolute; width:225px; z-index:200}
#males_menu li:hover ul{display:block}
#males_menu li li{display:block; float:none; margin:0px; padding:0px; width:225px}
#males_menu li:hover li a{background:none; color:#979EAF; border-bottom-right-radius:5px; border-bottom-left-radius:5px}
#males_menu li ul a{display:block; height:60px; font-size:13px; font-style:normal; margin:0px; padding:0px 10px 0px 15px; text-align:left}
#males_menu>ul >li ul li a{border-bottom:1px solid rgba(255,255,255,0.05); -webkit-transition:color ease 0.3s; -moz-transition:color ease 0.3s; -ms-transition:color ease 0.3s; -o-transition:color ease 0.3s}
#males_menu li ul a:hover, #males_menu li ul li:hover a{background:#46484E; border-bottom:1px solid rgba(255,255,255,0.05); color:#FFF; text-decoration:none; padding:0px 10px 0px 15px}

Selanjutnya klik Simpan Template
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/ JavaScript
Masukkan kode berikut ke dalamnya

<div id="males_menu">
<ul>
<li class="home"><a href="http://NAMA-BLOG-KAMU.blogspot.com/" title="Home Page"><img alt="Home" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYGQf546we5BZ1favfAJuGHQaTAbo6_jvFCgtYcu3H-35fs5ztcWuGi5prDHvm1fLzQbvP9k1MDMloRud10isdMD8bAIZnzJj5ZGT8BVAmTIUctQw_5g8XyXIbhMNJJREVKY_bIqIK7YJZ/s1600/Very- Basic-Home-icon.png"/></a></li>
<li class="sub "><a href="#"><span>Blogger</span></a>
<ul>
<li><a href="#"><span>SEO</span></a></li>
<li><a href="#"><span>Template</span></a></li>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Plugins</span></a></li>
</ul>
</li>
<li><a href="#"><span>Applicatoin</span></a>
<ul>
<li><a href="#"><span>HTML Encoder</span></a></li>
<li><a href="#"><span>HTML Editor</span></a></li>
</ul></li>
<li><a href="#"><span>Tools &#187</span></a>
<ul>
<li><a href="#"><span>Online HTML Editor</span></a></li>
<li><a href="#"><span>Color Code</span></a></li>
<li><a href="#"><span>Page Rank Checker</span></a></li>
</ul>
</li>
<li><a href="#"><span>Faqs</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li>
</ul>
</div>

Edit dan masukkan link anda, lalu ganti judul sesuai link. Klik Simpan dan lihat hasilnya. Demikian tutorial cara membuat horizontal menu males keren. Semoga bermanfaat bagi semua, amin. Selamat mencoba dan sukses selalu.

"keep spirits and do the best"