Cara Membuat Menu Drop Down Di Blog - Kali ini saya share Cara Membuat Menu Drop Down Di Blog. Menu drop down ini sangat cocok untuk web/blog yang bertema kesehatan dan
lain-lain. Fitur-fitur yang ada dalam meni ini antara lain, efek animasi
ketika drop down nya muncul, warna hijau yang mengkilau. Berikut ini adalah tampilan menu drop down di blog :
Berikut Cara Membuat Menu Drop Down Di Blog :1. Login ke akun blogger kamu.
2. Klik template >> Edit HTML.
3. Tekan CTRL + F.
4. Letakkan kode berikut ini tepat DIATAS kode ]]></b:skin>
#blazerMenu,5. Letakkan kode berikut ini tepat diATAS kode </head>
#blazerMenu ul {
list-style: none;
}
#blazerMenu {
width:980px;
float: left;
}
#blazerMenu > li {
float:left;
}
#blazerMenu li a {
display: block;
padding:8px 16px 8px 16px;
text-decoration: none;
}
#blazerMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#blazerMenu ul li a {
width: 30px;
float:left;
}
#blazerMenu li:hover ul {
}
/* Main menu
------------------------------------------*/
#blazerMenu {
font-family: Arial;
font-size: 12px;
background: #2f8be8;
margin:0 auto;padding:0 auto;
background: transparent;
padding-left:3px;
border-bottom:5px solid #008E00;
}
#blazerMenu > li > a {
color: #333;
font-weight: bold;
font-size: 16px;
padding:8px 16px 8px 16px;
}
#blazerMenu li:hover {
color: #333;
}
#blazerMenu a.arrow{background-image:url(https://lh5.googleusercontent.com/-WSS4CScLl3U/UGrIYZZZ4kI/AAAAAAAAF5k/ypr0GXc2CWI/s16/Actions-arrow-down-icon.png);background-repeat:no-repeat;background-position:right center;padding:8px 24px 8px 16px;}
/* Submenu
------------------------------------------*/
#blazerMenu ul {
background: #00CC00;
padding:3px 0px 0px 0px;
}
#blazerMenu ul li a {
color: #fff;
font-weight: bold;
font-size: 12px;
width:110px;
padding:6px 0px 6px 6px;
}
#blazerMenu ul li:hover a {
background: #80FE80;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>6. Klik "Simpan Template".
<script>
$(function(){
$('#blazerMenu').find('> li').hover(function(){
$(this).find('ul')
.removeClass('blazerblog')
.stop(true, true).slideToggle('height');
});
});
</script>
7. Masuk ke Tata letak >> Tambah Widget >> Html/JavaScript dan copy kode berikut ini pada kolom konten!.
<ul id="blazerMenu">8. Klik "Save" dan sesuaikan dengan keinginan anda.
<li><a href="http://putupunyablog.blogspot.com/">HOME</a></li>
<li>
<a class='arrow' href="http://putupunyablog.blogspot.com/search/label/blog">TUTORIAL</a>
<ul class="blazerblog">
<li><a href="#LINK DISINI">UBAH</a></li>
<li><a href="#LINK DISINI1">UBAH1</a></li>
<li><a href="#LINK DISINI2">UBAH2</a></li>
</ul>
</li>
<li>
<a class='arrow' href="http://putupunyablog.blogspot.com/">Blogger</a>
<ul class="blazerblog">
<li><a href="#LINK DISINI">UBAH</a></li>
<li><a href="#LINK DISINI1">UBAH1</a></li>
<li><a href="#LINK DISINI2">UBAH2</a></li>
</ul>
</li>
<li>
<a class='arrow' href="http://putupunyablog.blogspot.com/search/label/tutorial">Resep</a>
<ul class="blazerblog">
<li><a href="#">Dessert</a></li>
<li><a href="#">Chicken</a></li>
<li><a href="#">Drink</a></li>
<li><a href="#">Cake</a></li>
<li><a href="#">Breakfast</a></li>
<li><a href="#">Soup</a></li>
<li><a href="#">Pasta</a></li>
<li><a href="#">Seafood</a></li>
</ul>
</li>
<li>
<a class='arrow' href="http://putupunyablog.blogspot.com/search/label/Beauty">Women</a>
<ul class="blazerblog">
<li><a href="#">Beauty</a></li>
<li><a href="#">Make Up</a></li>
<li><a href="#">Fashion</a></li>
</ul>
</li>
<li>
<a class='arrow' href="http://putupunyablog.blogspot.com/search/label/naruto%20shippuden">More</a>
<ul class="blazerblog">
<li><a href="#">Kode Warna</a></li>
<li><a href="#">Get This Menu</a></li>
</ul>
</li>
</ul>
Tidak ada komentar:
Posting Komentar