Zaman serba canggih seperti sekarang ini apa yang tidak bisa dilakukan, termasuk dengan membuat blog yang lebih interaktif dan atraktif. Mulai dari tulisan yang beragam bentuk, berbagai animasi banner, hingga sound dan video bisa disematkan ke dalam blog.
Kali ini, RBI akan membagikan tips keren untuk membuat menu yang ada pada blog Anda menjadi bersuara bila di klik atau ketika kursor diarahkan ke menu tersebut. Penasaran kan? Silahkan lihat tampilannya di sini : DEMO
1. Log in ke blog Anda di alamat www.blogspot.com dengan menggunakan username dan password Anda masing-masing.
2. Anda akan langsung menuju ke halaman DASBOR, kemudian klik menu RANCANGAN, pilih menu EDIT HTML.
3. Seperti biasa, sebelum bermain dengan script HTML/JavaScript yang ada pada blog, sebaiknya Anda melakukan tindakan backup lebih dulu dengan template blog Anda. Hal ini dilakukan sebagai tindakan pencegahan bila terdapat error, sehingga Anda masih dapat mengembalikan template blog ke kondisi semula.
4. Untuk melakukan tindakan backup template, Anda centang kotak kecil yang bertuliskan EXPAND TEMPLATE WIDGET seperti yang ditunjukkan pada poin nomor 1 gambar di bawah ini, kemudian klik menu DOWNLOAD TEMPLATE LENGKAP seperti yang ditunjukkan pada poin nomor 2.
5. Setelah template selesai di download, itu artinya Anda telah memiliki file backup template blog Anda. Simpan di tempat yang aman dan beri nama sesuai dengan yang Anda inginkan.
6. Carilah kode </head> dengan cara menekan tombol CRTL dan tombol huruf F secara bersamaan.
7. Setelah menemukan dimana kode tersebut, letakkan posisi kursor di atas </head>, seperti yang ditunjukkan pada gambar di bawah ini :
8. Copy dan paste-kan kode berikut :
<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>
9. Kemudian, carilah kode ]]></b:skin> .Setelah menemukan dimana kode tersebut, letakkan posisi kursor di atas kode ]]></b:skin> tersebut, seperti yang ditunjukkan pada gambar di bawah ini :
10. Copy dan paste-kan kode berikut :
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
#navigation {
height: 3em;
background: #f0f0f0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
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: #333;
text-transform: uppercase;
text-align: center;
line-height: 2.6;
text-decoration: none;
display: block;
}
#navigation a:hover {
color: #d34545;
}
#lava {
width: 100%;
height: 0.2em;
background: #ccc;
position: relative;
}
#lava-cursor {
width: 5.4em;
height: 100%;
background: #d34545;
display: none;
position: relative;
}
#sound {
width: 0px;
height: 0px;
display: block;
overflow: hidden;
position: absolute;
left: -1000em;
}
11. Simpanlah perubahan tersebut dengan menekan tombol SIMPAN TEMPLATE. Akan tampil kalimat “Perubahan Anda Telah Disimpan” , itu artinya Anda telah sukses dan berhasil menambahkan kode tersebut tanpa ada kesalahan.
12. Kemudian, kembali ke halaman ELEMEN LAMAN, tambahkan widget HTML/JavaScript dan letakkan di kolom lebar bagian bawah.
13. Copy dan paste-kan kode berikut :
<div id="navigation">
<div id="lava">
<div id="lava-cursor"></div>
</div>
<ul>
<li><a href="">Home</a></li>
<li class="current"><a href="">Archives</a></li>
<li><a href="">Contact</a></li>
</ul>
<audio id="sound">
<source src="http://dev.css-zibaldone.com/onwebdev/jquery/jquery-flash-menu-sound/sound.mp3"></source>
<source src="http://dev.css-zibaldone.com/onwebdev/jquery/jquery-flash-menu-sound/sound.ogg"></source>
</audio>
</div>
14. Jika Anda ingin menempatkan kode ini tepat di bawah header, maka Anda tidak perlu menambahkan kode di atas pada gadget tambahan HTML/JavaScript. Tetapi, Anda akan menyematkan kode tersebut di dalam EDIT HTML.
15. Carilah kode Header1, 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='Nama Blog Anda (Header)' type='Header'/>
</b:section>
</div>
16. Lihat kode </div> di atas, nah, sematkanlah kode yang ada pada poin nomor 13 di atas tepat di bawah kode </div> tersebut.
17. Simpan kembali perubahan tersebut dengan menekan tombol SIMPAN TEMPLATE, hingga kalimat “Perubahan Anda Telah Disimpan” tampil kembali.
18. Kemudian, lihatlah perubahan yang terjadi pada blog Anda.
Selamat mencoba J
2 komentar:
berat ngga mba? takutnya jadi Lola
@NF : tidak begitu, buktinya blog RBI ini masih normal, tdk begitu LOLA :)
Posting Komentar