Beberapa hari ini saya memang jarang update blog ini dikarenakan saya lagi mendalami untuk belajar WP. Tapi sebisa mungkin saya akan update blog sederhana ini meskipun hanya tutorial sederhana. Pada kesempatan kali ini kita akan membahas Cara Membuat Horizontal Acrobatic Menu. Tutorial ini saya dapatkan beberapa hari lalu dari sahabat saya Azis Lamayuda. Langsung saja lihat demonya.
Untuk cara membuatnya, ikuti langkah-langkah di bawah ini.
1. Pasang kode css berikut di atas ]]></b:skin>
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 100%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left bottom;
}
2. Pemasangan jquery di atas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$("#topnav li").prepend("<span/>"); //Throws an empty span tag right before the a tag
$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});
$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});
});
</script>
3. Selanjutnya cari kode berikut
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
4. Pasang kode HTML untuk menu berikut di bawah kode di atas
<ul class='v2' id='topnav'>
<li><a href='/' title='HOME'>HOME</a></li>
<li><a href='#' title='MENU 1'>MENU 1</a></li>
<li><a href='#' title='MENU 2'>MENU 2</a></li>
<li><a href='#' title='MENU 3'>MENU 3</a></li>
<li><a href='#' title='MENU 4'>MENU 4</a></li>
<li><a href='#' title='MENU 5'>MENU 5</a></li>
<li><a href='#' title='MENU 6'>MENU 6</a></li>
</ul>
5. Save template
Note: Untuk pemasangan menu, sobat tidak di haruskan meletakkan di bawah kode di atas tadi. Sobat bisa meletakkannya di add gadget, tinggal sesuaikan dengan template saja.
Semoga bermanfaat.
Alhamdulillah..
waah info yang sangat membantu nih,,pengetahuan baru juga,,makasih banyak,infonya,,sukses slalu,,,
BalasHapusmencoba sesuatu yang baru ga ada salahnya asal kita tetep berusaha dan bekerja keras untuk mencapai hasil yang maksimal,,,makasih dah berbagi infonya,,
BalasHapusnice info,,thanks for information,,,,
BalasHapussempet juga mampir balik ya,,,
@obat tradisional jerawat, solusi mengobati kanker usus, xamthone obat herbal segala penyakit Thanks udah mampir sob..
BalasHapuspeh menu'ne acrobat jungkir walik iso now mas, hehehehe .. sip", ndank sukses gwe WPne ki luw aku gwe blog neh mas nde http://mbah7.blogspot.com/ wingi tas gawe
BalasHapussukses poko'e mas fer,
ki mas blogku sing nyar, wis do follow ki tak melu komen ae ben entok BL, hehehehe
BalasHapus@Mbah7 & Hori Revens Beres.. langsung tak razia ktp
BalasHapusNAMA MENU MA URLNYA DI PASANG DI MANA MAS??
BalasHapusmakasih ya ats htmlnya
BalasHapusnice info,,thanks for information,,sempet mampir balik ya,,,
BalasHapusscript diatas kalo dipasang di blog wp kira2 bisa nggak ya ?
BalasHapusterima kasih infonya
informasinya luar biasa sangat bermanfaat sekali...
BalasHapusBanyak sekali ilmu pengetahuan yang saya dapatkan
Terimakasih banyak atas informasinya ...
Semoga semakin sukses
informasinya sangat bagus sekali...
BalasHapussaya suka..
banyak pengetahuan yang saya dapatkan setelah saya berkunjung ke blog ini....
terimakasih banyak atas info nya sangat bermanfaat sekali
BalasHapussemoga semakin sukses nya
sangat menarik sekali infonya :)
BalasHapuskebaikan yang anda berikan melalui blod ini semoga menjadi amal soleh,,,amin salam kenal dan sukses selalu
BalasHapusinformasi yang sangat menambah wawasan saya makasih ga,.
BalasHapus
BalasHapusmakasih infonya gan
thanks infonya gan,,,
BalasHapus
BalasHapusmakasih infonya sangat bermanfaat
Terima Kasih ya Gan, Artikel yang sangat Bagus dan Bermanfaat.. Update terus dan sukses selalu ya Gan..
BalasHapusjangan lupa berkunjung yah gan^^
judi online
situs judi online
roulette
roulette online
baccarat
baccarat online
casino online
live casino
agen casino
judi casino