Jumat, 13 April 2012
Hallo sobat ketemu lagi . Masih ingatkah sobat dengan Menu Horisontal Dropdown. Udah pada punya belom nich menu seperti ini. Kalo belom Hem kali ini saya akan berbagi lagi tentang cara Membuat Menu Horisontal Dropdown Dengan jQuery. Menu horisontal yang ini cukup menawan sobat, sehingga kalu sobat memasang pada blog sobat maka tampilan blog sobat akan lebih keren lagi sobat. Yang pastinya akan menarik lebih banyak pengunjung ke blog sobat. Langsung saja lihat penampakanya ya sobat, Mau tau seperti apa tampilannya. Ini dia contoh gambarnya sobat :
Langsung saja kita kasih tau cara membuatnya yach. Ikuti saja langkah berikut ini sobat :
1. Sebelum memulai mengedit saya sarankan buat menyimpan template punya sobat dulu yach.
2. Login ke Blogger , pergi ke Tata Letak -> Edit HTML
dan tandai kotak centang " Expand Template Widget ".
3. Sekarang cari (CTRL + F) kode ini di template </head> dan masukkan kode berikut ini sebelum kode tadi atau di atas kode tadi
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("ul.subnav").parent().append("<span/>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>
<style type='text/css'>
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 1.2em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlVbHouo_QtFWcG-_yD-TE49WebCA6Z5xDpFmOlVmfPaf24xZWyi0rVRKJYAcc2FwOw5-JfF_oviTFw4U9M4VgnEJ3gEx37IpQ6NUnMvAtP8jGOLAU3QNy48i9YCHTB8kl8MJGNRP5x-56/) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAyV-eZbedkYlm-xPpBL2DEg_t3O1KUgF6tOjGQer-0lvGp5KshTxll2R-Mtkrljp-hlu7-3G9iPnGufBTS7KFY-tbTLs1QzjK3BmajLcOeMwseRKOmTj33FVhLj3AeOB3phUNE30e0Rby/) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxWHYsxBa3mwt9t0YYeKa4DA6vtxsfxgiQit6aocfgugMVV817ckqBaB0cjHU6nDBdnL1J1CtcCDuEf4AcbgMHIAnKJq_F2II1dCEqMym6_jwx6H3OTD8Yyr2x36ZEcB0vZwYjWpEThaqG/) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjMrAFynGgGQ333VJAzDrsJYQPwe9TvZNZjPxOqdTn5jPZk0ObV6XIKJTm-DhFzFrY1T3GlpqEZLqT-3ODpofCe35sXii7odNG__JKuxwIgNV68-8TA_3p9iYzZF5LT80qmB8gwP98e6IX/) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjMrAFynGgGQ333VJAzDrsJYQPwe9TvZNZjPxOqdTn5jPZk0ObV6XIKJTm-DhFzFrY1T3GlpqEZLqT-3ODpofCe35sXii7odNG__JKuxwIgNV68-8TA_3p9iYzZF5LT80qmB8gwP98e6IX/) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
$("ul.subnav").parent().append("<span/>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>
<style type='text/css'>
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 1.2em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlVbHouo_QtFWcG-_yD-TE49WebCA6Z5xDpFmOlVmfPaf24xZWyi0rVRKJYAcc2FwOw5-JfF_oviTFw4U9M4VgnEJ3gEx37IpQ6NUnMvAtP8jGOLAU3QNy48i9YCHTB8kl8MJGNRP5x-56/) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAyV-eZbedkYlm-xPpBL2DEg_t3O1KUgF6tOjGQer-0lvGp5KshTxll2R-Mtkrljp-hlu7-3G9iPnGufBTS7KFY-tbTLs1QzjK3BmajLcOeMwseRKOmTj33FVhLj3AeOB3phUNE30e0Rby/) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxWHYsxBa3mwt9t0YYeKa4DA6vtxsfxgiQit6aocfgugMVV817ckqBaB0cjHU6nDBdnL1J1CtcCDuEf4AcbgMHIAnKJq_F2II1dCEqMym6_jwx6H3OTD8Yyr2x36ZEcB0vZwYjWpEThaqG/) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjMrAFynGgGQ333VJAzDrsJYQPwe9TvZNZjPxOqdTn5jPZk0ObV6XIKJTm-DhFzFrY1T3GlpqEZLqT-3ODpofCe35sXii7odNG__JKuxwIgNV68-8TA_3p9iYzZF5LT80qmB8gwP98e6IX/) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjMrAFynGgGQ333VJAzDrsJYQPwe9TvZNZjPxOqdTn5jPZk0ObV6XIKJTm-DhFzFrY1T3GlpqEZLqT-3ODpofCe35sXii7odNG__JKuxwIgNV68-8TA_3p9iYzZF5LT80qmB8gwP98e6IX/) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
</style>
4. Kemudian simpan template punya sobat terlebih dahulu.
5. Masuk menu Layout kemudian masuk menu Page Elements
6. Pilih box layout yang diinginkan kemudian klik Add a gadgets
7. Pilih salah satu Gadget HTML/JavaScript dan taruh code dibawah ini di posisi header :
<ul class="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorials</a>
<ul class="subnav">
<li><a href="#">HTML Tutorials</a></li>
<li><a href="#">CSS Tutorials</a></li>
<li><a href="#">PHP Tutorials</a></li>
<li><a href="#">SQL Tutorials</a></li>
<li><a href="#">jQuery Tutorials</a></li>
</ul>
</li>
<li>
<a href="#">Templates</a>
<ul class="subnav">
<li><a href="#">1 Column</a></li>
<li><a href="#">2 Column</a></li>
<li><a href="#">3 Column</a></li>
<li><a href="#">4 Column</a></li>
<li><a href="#">Premium</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorials</a>
<ul class="subnav">
<li><a href="#">HTML Tutorials</a></li>
<li><a href="#">CSS Tutorials</a></li>
<li><a href="#">PHP Tutorials</a></li>
<li><a href="#">SQL Tutorials</a></li>
<li><a href="#">jQuery Tutorials</a></li>
</ul>
</li>
<li>
<a href="#">Templates</a>
<ul class="subnav">
<li><a href="#">1 Column</a></li>
<li><a href="#">2 Column</a></li>
<li><a href="#">3 Column</a></li>
<li><a href="#">4 Column</a></li>
<li><a href="#">Premium</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
Catatan :
* Untuk tanda # dapat sobat ganti dengan url atau link yang sobat mau
* Untuk Teks yang berwarna orange dapat sobat ganti dengan sesuai keinginan sobat
8. Simpan dan lihat hasilnya ya sobat
Semoga berhasil dan sukses ya Tretan sadejenah
nice artikel gan,salam kenal
BalasHapusthanks gan komentar n kunjungan.y
BalasHapusNice Share Gan :D Terima Kasih Atas Informasinya :D Oya Follow Back dan Komen Back ya :D www.tb4all.blogspot.com
BalasHapusy gan sma2
BalasHapuslgsg ke tkp