Cara Membuat Menu Horizontal Keren dengan Efek Suara

Halo sobat semua kali ini saya (muadz) akan memberitau sobat bagaimana Cara Membuat Menu Horizontal Keren dengan Efek Suara

Cara Membuat Menu Horizontal Keren dengan Efek Suara:

1. Masuk ke dashboard blogger

2. Klik Template, klik edit html, klik lanjutkan

3. Cari kode </head>, agar mudah dalam mencarinya silahkan pake CTRL+F, lalu pastekan atau letakkan kode berikut ini diatas kode </head> tadi

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

4. Cari kode ]]></b:skin> lalu pastekan atau letakan kode berikut ini diatas kode ]]></b:skin> tadi

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
#navigation {
height: 3em;
background: #000;
border-top: 1px solid #00bfff;
border-bottom: 1px solid #00bfff;
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: #90ff00;
text-transform: uppercase;
text-align: center;
line-height: 2.6;
text-decoration: none;
display: block;
}
#navigation a:hover {font-weight:700;padding-left:15px;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;
color: #000;background:#90ff00;
}
#xgen11 {
width: 100%;
height: 0.2em;
background: #ccc;
position: relative;
}
#xgen11-cursor {
width: 6.4em;
height: 100%;
background: #90ff00;
display: none;
position: relative;
}
#sound {
width: 0px;
height: 0px;
display: block;
overflow: hidden;
position: absolute;
left: -1000em;
}

5. Cari kode id='Header1' kira-kira 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='Your Blog (Header)' type='Header'/>
</b:section>
</div>

6. Lihat kode </div> yang berwarna merah diatas? letakkan kode berikut ini tepat dibawah kode hijau tersebut

<div id="navigation">
<div id="xgen11">
<div id="xgen11-cursor"></div>
</div>
<ul>
<li><a href="">Home</a></li>
<li class="current"><a href="http://facebook.com">Facebook</a></li>
<li><a href="http://plus.google.com">Google+</a></li>
<li><a href="http://twitter.com">Twitter</a></li>
<li><a href="http://youtube.com">Youtube</a></li>
</ul>
<audio id="sound">
<source src="http://system-svn.googlecode.com/svn/mp3/sound.mp3"></source>
</audio>
</div>

keterangan:
- link yang berwarna kuning adalah link suaranya, silahkan ganti punya kamu sendiri untuk berjaga-jaga jika suatu saat link itu dihapus
- link yang brewarna merah adalah isi menunya, silahkan ganti dengan link kamu

7. Klik pratinjau, jika sukses silahkan klik simpan

sekian artikel tentang cara membuat menu horizontal keren di blog dengan efek suara, silahkan koment jika ada kesulitan. 

Posted in: Tutorial Blog