cara membuat menu tab horizontal di blog disertai musik

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. COPAS sertakan SUMBER link aktif ke blog ini

keyword: membuat menu horizontal keren dengan efek suara saat disentuh, cara buat menu horizontal, menu horizontal di blog bersuara ketika disentuh, horizontal menu css, horizontal menu with sound

Related Posts by Categories