Membuat menu dengan suara

Membuat menu dengan jquery + suara ini pasti akan membuat beda web / blog kita karena menunya ketika di sorot akan berbunyi, wah pokoknya unik banget lah, saat berselancar di dunia Online dan masuk di blog onwebdev ketemulah artikel JQuery: Flash Menu With Sound

Nah sekarang aku bahas dalam bahasa indonesia, hummmmm menu ini sangat - sangat mantap loh gan + unik penasaran gak . . .? kalau penasaran silahkan langsung lihat demonya, jangan lupa sorot atau sentuh menunya ya dan rasakan bedanya dari menu itu.

DEMO

Ehmmm gimana gan, ada suaranya gak usahakan pake Laptop / PC yang pake Sound biar kedengeran bunyinya hehehe, menu ini juga termasuk Menu Lavalamp karena ada border yang mengikuti di atasnya.

Ok untuk cara menggunakannya cukup mudah sekali

1. Masuk di blog anda
2. Klik Rancangan
3. Klik Edit HTML
4. Cari kode </head>
5. Simpan kode di bawah ini di atas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
(function($) {
$.fn.lavaFlash = function(options) {
var that = this;
var settings = {
container: 'ul',
cursor: '#lava-cursor',
current: '.current',
speed: 800,
sound: $('#sound', that)[0],
volume: 5
};
options = $.extend(settings, options);
return that.each(function() {
options.sound.volume = parseFloat(options.volume / 10);
$(options.cursor).css('left', $(options.container).find(options.current).position().left).fadeIn(options.speed);
$('li', $(options.container)).each(function() {
var $li = $(this);
$li.mouseover(function() {
$(options.cursor).animate({
left: $li.position().left
}, options.speed, function() {
options.sound.play();
});
});
});
});
};
})(jQuery);
$(function() {
$('#navigation').lavaFlash({speed: 500});
});
</script>

6. Lalu scroll sedikit ke atas cari kode ]]></b:skin>
7. Simpan kode di bawah ini di atas kode ]]></b:skin>

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
#navigation {
height: 3em;
background: #f0f0f0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
position: relative;
}
#navigation ul {
margin: 0.4em 0 0 0;
padding: 0;
list-style: none;
height: 2.6em;
font: 90% 'Open Sans', sans-serif;
}
#navigation li {
float: left;
width: 6em;
height: 100%;
display: block;
margin-right: 1em;
}
#navigation a {
float: left;
width: 100%;
height: 100%;
color: #333;
text-transform: uppercase;
text-align: center;
line-height: 2.6;
text-decoration: none;
display: block;
}
#navigation a:hover {
color: #d34545;
}
#lava {
width: 100%;
height: 0.2em;
background: #ccc;
position: relative;
}
#lava-cursor {
width: 5.4em;
height: 100%;
background: #d34545;
display: none;
position: relative;
}
#sound {
width: 0px;
height: 0px;
display: block;
overflow: hidden;
position: absolute;
left: -1000em;
}

8. Lalu pergi ke Tata letak atau Elemen Laman
9. Klik Tambah Gadget
10. Pilih HTML/Javascript
11. Simpan kode di bawah ini di kolom bagian bawah

<div id="navigation">
<div id="lava">
<div id="lava-cursor"></div>
</div>
<ul>
<li><a href="">Home</a></li>
<li class="current"><a href="">Archives</a></li>
<li><a href="">Contact</a></li>
</ul>
<audio id="sound">
<source src="http://dev.css-zibaldone.com/onwebdev/jquery/jquery-flash-menu-sound/sound.mp3"></source>
<source src="http://dev.css-zibaldone.com/onwebdev/jquery/jquery-flash-menu-sound/sound.ogg"></source>
</audio>
</div>

12. Tempat nya sesuaikan ya ( Agak Lebar ) karena jika di sidebar terlalu kecil usahakan yang besar,
13. Jika ingin menggunakan di bawah header jangan beralih dulu dari Template Cari kode seperti ini Header1 kode lengkapnya seperti ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog Anda (Header)' type='Header'/>
</b:section>
</div>

Nah lihat kode </div> Silahkan Simpan kode HTML nya di bawah kode </div> Nanti Jadinya seperti ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog Anda (Header)' type='Header'/>
</b:section>
</div>
<div id="navigation">
<div id="lava">
<div id="lava-cursor"></div>
</div>
<ul>
<li><a href="">Home</a></li>
<li class="current"><a href="">Archives</a></li>
<li><a href="">Contact</a></li>
</ul>
<audio id="sound">
<source src="http://system-svn.googlecode.com/svn/mp3/sound.mp3"></source>
<source src="http://system-svn.googlecode.com/svn/mp3/sound.ogg"></source>
</audio>
</div>

Nah Seperti itulah penempatan kodenya, selamat mencoba, ets hampir lupa untuk mp3 nya ganti sendiri ya. soalx jika orangX menghapus File mp3 nya maka tidak ada deh suaranya.