membuat Suara atau Efek jika Klik Tautan dan Tombol di Blogger

Sudah lama juga saya tidak berbagi tutorial yang semoga bermanfaat, Akibat penasaran saya tentang Memodifikasi design template membuat saya lupa untuk update pada blog ini dan derastis Visitor juga menurun, di dalam ulasan saya kali ini saya akan membahas Cara membuat efek atau suara pada saat kita Klik Content atau tautan pada Blog tersebut .

Cara membuat Suara atau Efek jika 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 )

untuk melihat demonya silahkan kunjungi : DEMO setelah melihat demo pada blog tersebut pasti udah tahu seperti apa Suaranya, Suara ini mungkin bagi kalian yang suka membuat aplikasi atau Game pasti tidak asing dengan Efek seperti ini . Namun disini saya akan memberitahukan tutorial bagaimana cara menerapkan sound effect/fx "Click" ini pada Website atau Blog kita! Jangan khawatir cara pemasangan Efek seperti ini pada blog kita sangat mudah kok, Mau tahu bagaimana pemasanganya ? langsung saja simak baik-baik seperti berikut .

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.mp3

Langkah-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>

catatan: jika jQuery tersebut sudah ada atau telah terpasang pada template sobat maka saya sarankan agar tidak memasangnya kembali karena jika ada Query Duplikat maka semua efek Query pada blog tidak akan berfungsi .

Setelah MP3 telah siap maka langkah terakhir Simpan Settingan Kode HTML & Javascript berikut setelah tag <body>


  <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>