Horizontal Blue Menu

Kemarin saya sudah bagikan cara membuat horizontal menu males keren dengan menggunakan transisi lambat yang atraktif. Sekarang saya akan share cara membuat horizontal blue menu. Widget blue menu ini menggunakan warna biru pekat dan terang, sehingga tampilannya mempunyai karakter kuat dan elegan. Tampilannya juga tidak kalah menarik dengan horizontal menu lainnya, dan disertai drop down pada menu tersebut. Selain itu cara pembuatan widget ini dijamin tidak membuat anda pusing. Sekarang mari kita bahas cara membuat horizontal blue menu. Ikuti langkah berikut.

Log in ke blogger
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/ JavaScript
Masukkan kode berikut ke dalamnya

<style>
#males2-menu ul,
#males2menu li,
#males2menu a{ margin:0;  padding:0;  position:relative}
#males2menu{ height:49px;  background:#123D60;  background:-moz-linear-gradient(top,#0077D7 0%,#123D60 100%);  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#0077D7),color-stop(100%,#123D60));  background:-webkit-linear-gradient(top,#0077D7 0%,#123D60 100%);  background:-o-linear-gradient(top,#0077D7 0%,#123D60 100%);  background:-ms-linear-gradient(top,#0077D7 0%,#123D60 100%);  background:linear-gradient(to bottom,#0077D7 0%,#123D60 100%);  -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#0076d7,endColorStr=#123d60);  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#0076d7,endColorStr=#123d60);   border-radius:5px 5px 0 0;  -moz-border-radius:5px 5px 0 0;  -webkit-border-radius:5px 5px 0 0;  border-bottom:4px solid #002A4C}
#males2-menu span{ margin:0;  padding:0;  position:relative}
#males2-menu:after,
#males2-menu ul:after{ content:"";  display:block;  clear:both}
#males2-menu a{ color:#fff;  display:inline-block;  font-family:Trebuchet MS,Arial,Verdana;  font-size:16px;  font-weight:bold;  line-height:49px;  padding:0 25px;  border-right:1px solid #123D60;  text-decoration:none}
#males2-menu ul{ list-style:none}
#males2-menu >ul{ float:left}
#males2-menu >ul >li{ float:left}
#males2-menu >ul >li:hover:after{ content:"";  display:block;  width:0;  height:0;  position:absolute;  left:50%;  bottom:0;  border-left:10px solid transparent;  border-right:10px solid transparent;  border-bottom:10px solid transparent;  margin-left:-10px}
#males2-menu >ul >li:first-child >a{ border-radius:5px 0 0 0;  -moz-border-radius:5px 0 0 0;  -webkit-border-radius:5px 0 0 0}
#males2-menu >ul >li:last-child >a{ border-radius:0 0px 0 0;  -moz-border-radius:0 0px 0 0;  -webkit-border-radius:0 0px 0 0}
#males2-menu >ul >li.active >a{background:#004074}
#males2-menu >ul >li:hover >a{ background:#004074}
#males2-menu .has-sub{ z-index:1}
#males2-menu .sub:hover >ul{ display:block}
#males2-menu .sub ul{ display:none;  position:absolute;  width:200px;  top:100%;  left:0}
#males2-menu .sub ul li{ *margin-bottom:-px}
#males2-menu .sub ul li a{ background:#047DCB;  border-bottom:1px dotted #6fc7ec;  filter:none;  font-size:14px;  font-weight:bold;  display:block;  line-height:120%;  padding:10px;  text-shadow:1px 1px 3px #333}
#males2-menu .sub ul li:hover a{ background:#009BFF;  text-shadow:1px 2px 1px #000}
#males2-menu .sub .sub:hover >ul{ display:block}
#males2-menu .sub .sub ul{ display:none;  position:absolute;  left:100%;  top:0}
#males2-menu .sub .sub ul li a{ background:#0c7fb0;  border-bottom:1px dotted #6db2d0}
#males2-menu .sub .sub ul li a:hover{ background:#095c80}
</style>
<div id='males2-menu'>
<ul>
<li class='active'><a href='http://NAMA-BLOG-ANDA.blogspot.com'><span>Home</span></a></li>
<li class='sub'><a href='#'><span>Application</span></a>
<ul>
<li class='sub'><a href='URL'><span>HTML Editor</span></a>
<ul>
<li><a href='URL'><span>HTML Encoder</span></a></li>
<li><a href='URL'><span>HTML Encoder</span></a></li>
</ul>
</li>
<li class='sub'><a href='URL'><span>HTML Encoder</span></a></li>
<li class='sub'><a href='URL'><span>Comming Soon</span></a></li>
<li class='sub'><a href='URL'><span>Comming Soon</span></a></li>
</ul>
</li> 
<li class='sub'><a href='#'><span>Tools</span></a>
<ul>
<li class='sub'><a href='URL'><span>HTML Editor</span></a>
<ul>
<li> <a href='URL'><span>Sub Item 1</span></a></li>
<li> <a href='URL'><span>Sub Item 2</span></a></li>
</ul>
</li>
<li class='sub'><a href='URL'><span>HTML Encoder</span></a></li>
<li class='sub'><a href='URL'><span>Page Rank Checker</span></a></li>
<li class='sub'><a href='URL'><span>Color Code</span></a></li>
</ul>
</li>
<li><a href='#'><span>Faqs</span></a></li>
<li><a href='#'><span>Advertise</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Silahkan edit sesuai keinginan anda.
Selanjutnya klik Simpan dan lihat hasilnya. Demikian tutorial cara membuat widget horizontal blue menu. Semoga bisa bermanfaat bagi semua, amin. Selamat mencoba dan sukses selalu.

Source Code: http://www.myblogger-tricks.com/

"keep spirits and do the best"