Assalamu'alaikum, wahhhaaoo yang lagi cari menu buat di blognya :P
Kali ini Andaviar ingin share tentang Menu Horizontal Keren dengan Efek Suara. "Efek suara ?" iya Efek suara, pada saat kita klik menunya maka secara otomatis mengeluarkan efek suara.
Kali ini Andaviar ingin share tentang Menu Horizontal Keren dengan Efek Suara. "Efek suara ?" iya Efek suara, pada saat kita klik menunya maka secara otomatis mengeluarkan efek suara.
DEMO
Cara Membuat Menu Horizontal Keren dengan Efek Suara:
- Masuk ke dashboard blogger
- Klik Template, klik edit html, klik lanjutkan
- 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>
- 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;
}
- 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>
- Lihat kode </div> yang berwarna Kuning diatas? letakkan kode berikut ini tepat dibawah kode hijau tersebut
<div id="navigation">keterangan:
<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>
- 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
- Klik pratinjau, jika sukses silahkan klik simpan
Post a Comment