Kang Rian [ on Blogger! ]

rian nurherdian, kang rian, blog kang rian, blog rian nurherdian, blogger hacks , free blogger templates, blogspot tutorial, blogger tutorial, tutorial seo, tutorial html5, blog seo friendly, modifikasi template blog, desain web pemula, blogger basic

Menambahkan "Suara / Efek" Klik pada Tautan dan Tombol di Blog

Menambahkan "Suara / Efek" Klik pada Tautan dan Tombol di Blog - Sound Click Icon PngRasa-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!)

/ KLIK TAUTAN
Buat antum yang pernah membuat aplikasi / animasi mungkin akan tidak asing dengna efek seperti ini. Namun disini saya akan memberitahukan tutorial bagaimana cara menerapkan sound effect/fx "Click" ini pada Website atau Blog kita!

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.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>
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! ^_^
Suka artikel ini? Bagikan!

Hidden Ads!

 
Mohon Aktifkan Javascript!Enable JavaScript