Rasa-nya sudah lama saya tidak berbagi tutorial seputar Kustomisasi Blogger.. Padahal sebenernya akhir-akhir ini saya masih aktif modifikasi template blog ini, dan menyempatkan waktu untuk membalas komentar2 di beberapa postingan yang sedang aktif di blog ini.Baiklah, back to post! kali ini saya ingin berbagi tutorial tentang "Cara Menambahkan "Suara / Efek" Klik pada Tautan dan Tombol di Blog".
Penasaran seperti apa tutorial tersebut? silahkan coba klik Link dan Tombol Demo di bawah ini!
( Catatan : Pastikan Speaker Computer / Headset sobat aktif agar dapat mendengarkan Demo-nya )
Demo (Dengarkan!)
Sudah tidak sabar seperti apa tutorial nya? here we go..
Tutorial
Langkah-1 : Siapkan file sound/musik yang sobat inginkan! sobat bisa menggunakan file dengan format ".MP3" karena dalam tutorial ini saya menggunakan tag <audio> dalam HTML5 yang sudah support/dapat membaca file tersebut.Pada tutorial ini saya menggunakan file sound/musik MP3 dari SoundBible.com. Berikut URL-nya :
http://soundbible.com/mp3/Button_Press_2-Marianne_Gagnon-1415267358.mp3Langkah-2 : Pastikan sobat sudah memasang jQuery Library pada blog sobat untuk menerapkan plugin ini di semua Tombol & Tautan! Jika belum memasang jQuery Library, silahkan simpan kode berikut sebelum tag </head> pada halaman "Edit Template" :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>Pemasangan jQuery Library hanya dapat dilakukan 1 kali, jika terdapat duplikat jQuery library maka semua efek jQuery tidak akan berfungsi.
Langkah Terakhir! : Simpan Settingan Kode HTML & Javascript berikut setelah tag <body> :
<!-- SOUND FX CLICK By: KangRian.com -->
<audio id='klik1' src='http://soundbible.com/mp3/Button_Press_2-Marianne_Gagnon-1415267358.mp3'/>
<script>
// <![CDATA[
function klik1() {
var audio = document.getElementById('klik1');
audio.play();
}
// SoundFX Global Tag!
$(document).ready(function(){
$("a, button").attr("onclick", "klik1()");
});
//]]></script>
<!-- #SOUND FX CLICK By: KangRian.com -->Selamat mencoba! Jika mengalami kendala, silahkan berkomentar.. semoga bermanfaat! ^_^
0 comments
Berkomentarlah dengan Bahasa yang Relevan dan Sopan.. #ThinkHIGH! ^_^