Cara Membuat Menu di Tambah Suara di blog

Sesuai judul di atas pada kesempatan kali ini saya akan mengeshare Trick cara membuat menu di tambah Suara, Trick ini saya dapatkan dari blog sin1aja. Mungkin kalian Juga masih bingung maksud Dari Trick blog pada kali ini, nah maksudnya itu gini sob jadi pada saat kita mengarahkan cursor itu ke menu akan ada suaranya... Penasaran kan? Jika penasaran kalian bisa melihat dulu Demonya di bawah ini...

DEMO

1. Dan Berikut langkah langkahnya...
2. Login blog
3. Template -> Edit HTML -> Expand widget template
4. lalu Cari Kode </head>
5. Setelah itu masukan kode berikut 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. Dan Cari lagi kode ]]></b:skin>
7. kalau sudah ketemu masukan kode berikut 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
9. Klik Tambah Gadget -> HTML/Javascript
10. Simpan kode di bawah ini

<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>

11. Tempatkan seuai ya harus agak lebar karena jika di sidebar terlalu kecil usahakan yang besar,
12. 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>

13. 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>

Keterangan :

suaranya bisa kalian ganti dengan selera sobat dengan cara Mengganti kode http://system-svn.googlecode.com/svn/mp3/sound.mp3 karena kalau tidak ada itu pasti gk ada suaranya..

Oke Sekian dari saya semoga bermanfaat pada artikel kali ini...