Posted by : Marketing IndiHome Rabu, 19 Desember 2012

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

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Popular Post

Blogger templates

Labels

agama Aku Untuk Negeriku Alkisah Anak-Anak Analisis Kebijakan Pendidikan ANE aneh Anime Antropologi aplikasi artis Barang Aneh Beauty Belajar dasar HTML Belajar dasar PHP Berita Berita Nasional Berita Umum bijak Binatang Aneh Blogger cara Cerita Cinta Cerita Lucu cinta design Dewasa Download Thema drama Dunia Dunia Malam Dunia Seks ekonomi Ekstrim Facebook Fashion Film Fun Funny gadget Games Gokil Gudang Tips Hacker Happy History health Hentai hewan hiburan Historiografi hobi Hot HP hukum hum Humor Ilmu Komputer ilmu pengetahuan sosial Image internasional internet Islami jakarta Jokowi - Ahok K Kampanye Damai Pemilu Indonesia 2009 Kata Bijak kata mutiara Kata-Kata kecantikan KEJADIAN YANG ANEH kesehatan Kisah Nyata korea kuliner lifestyle Love lowongan kerja Magelang Makalah Makanan Manajemen Pendidikan Misteri mobil Multimedia teknik museologi Music News olahraga otomotif Pasangan Aneh PeeR Dari Sahabat Pelajaran Pelajaran Bahasa Indonesia pelajaran biologi pelajaran ekonomi pelajaran fisika pelajaran geografi pelajaran kimia Pelajaran Olahraga Pelajaran Sejarah pelajaran seni Pelajaran seni musik peliharaan pendidikan Pendidikan Kewarganegaraan Perencanaan Pembelajaran Sejarah Peristiwa Penting Perspektif Global Politik ponsel promo properti puisi rambut Religi Renungan resep romantis rumah Sains Science Sejarah Sejarah Asia Timur sejarah indonesia masa islam sejarah Indonesia masa kolonial sejarah pergerakan nasional sejarah wanita Selebritis Seni Sepak Bola sinopsis Software Sofware Tahukah Kamu ? Tanaman teknologi tips trends TV Twitter Umum unik Video wallpaper wanita wisata Wordpress Zodiak

Blog Archive

Diberdayakan oleh Blogger.
UNTUK INFO DAN PEMASANGAN Hubungi : YULIADI Telepon : 061-7646 9682 Handphone : 0822 7200 7787


- Copyright © Cara Registrasi Indihome Murah di Medan -Metrominimalist- Powered by Blogger - Designed by Johanes Djogan -