Cara Membuat Menu Horizontal Keren dengan Efek Suara
Hai sobat blogger, sekarang saya akan share sebuah trik blogger yaitu trik membuat menu horizontal keren dengan efek suara. Ya, sesuai dengan judulnya, yang membuat menu horizontal ini lebih unik dan keren daripada menu horizontal lainnya yaitu ketika kamu menyentuh (hover) menu di dalamnya maka akan menghasilkan suatu bunyi. Kalau masih bingung silahkan lihat demo/contohnya:
Menu Horizontal Keren dengan Efek Suara:
[ DEMO ]
[ DEMO ]
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. Semoga bermanfaat :D
0 Response to "Cara Membuat Menu Horizontal Keren dengan Efek Suara"
BACA DULU SEBULUM BERKOMENTAR PERATURAN BERKOMENTAR DI BLOG INI :
- Di Wajibkan Berkomentar Dengan OpenID,supaya mimin bisa berkunjung balik
- Berkomentarlah sesuai artikel diatas,Jika diluar artikel gunakanlah tag [ OOT ].
- Berkomentar Disaran kan Sesuai Artikel
- Untuk Menyisipkan Kode Gunakan <i rel="code">Tulis kode yang sudah diparse di sini</i>
- Untuk Menyisipkan pre Gunakan <i rel="pre">Tulis kode yang sudah diparse di sini</i>
- Untuk Menyisipkan Catatan/Blockquote Gunakan <b rel="quote">Tulis catatan di sini</b>
- Untuk Menyisipkan Link Gunakan <i rel="anchor">URL DISINI</i>
- Untuk Menyisipkan Gambar Langsung Saja Tulis URL Imagenya
- Untuk Menyisipkan Video Youtube Langsung Saja Tulis URL Videonya
Konversi KodeEmoticon