X-Quadrat: Membuat Title Effect Bounce ZigZag Hover Link Or Image

X-Quadrat - Ini adalah Cara sederhana Namun agak ribet, Namun Efeknya akan langsung terlihat berbeda saat anda atau pengunjung lain mengarahkan Cursor/Mouse pada Link yang kita pasang di blog, berharap pengunjung untuk betah berlama2 bertengger di blog kita, hiks... seperti burung aja... Adalah Membuat Title Effect Bounce ZigZag Hover Link Or Image, Atau Efek Zigzag Bounce Saat Mouse diarahkan diatas Link, Baik Link Teks Maupun Link Gambar.

Tekhnik ini memanfaatkan Kode Javascript, Jadi sedikit agak berat saat membuka Halaman Blog, toh ga masalah karena Javascript ini cuman ada 2 yang saya pasang di blog ini, jadi ga berat-berat amat, amat aja ga berat, Soalnya Kurus. hehe...

Untuk liat contohnya Silahkan Arahkan Mouse Anda Keatas Link Teks dan Link Gambar berikut ini :

Contoh Efek Bounce By X-Quadrat

Gimana, Tertarik? Jika Iya katakan iya, Jika tidak juga tak mengapa, yuk kita ikuti Langkah-langkahnya.
1. Masuk ke blog Anda, Gunakan akun dan sandi anda, telusuri Hingga Anda Sampai ke halaman Edit HTML
2. Copy Kode Berikut ini dan Letakan Dibawah kode <head> atau kalo saya letakkan tepat Diatas Kode <b:skin>
Ini Kodenya :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='https://googledrive.com/host/0B1xHV8JisQ9VbkZVUVBaQkZwUk0/' type='text/javascript'/>

3. Cari Kode </body> dan letakan kode ini tepat diatasnya
Kode :

<script type='text/javascript'>
$(".XQuadratzig a[title]").zigxquadrat({effect: 'bouncy'});
$(".XQuadratzig img[title]").zigxquadrat({effect: 'bouncy'});
</script>

4. Simpan Template.
Penggunaanya Sedikit agak Ribet, Anda harus persiapkan Kode ini dan menerapkannya Saat anda membuat Link Teks atau Link Gambar,
Ini adalah Kodenya :

<div class='XQuadratzig'>
Kode Link Disini
</div>

Penerapanya seperti ini

<div class="XQuadratzig">
<div style="text-align: center;">
<a href="http://x-quadrat.blogspot.com/" target="_blank" title="Contoh Efek Bounce By X-Quadrat">Contoh Efek Bounce By X-Quadrat</a></div>
</div>

Begitupun Penerapan Pada Link Gambar, Lihat Penerapanya :

<div class="XQuadratzig">
<div style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW0JXA96ZJw8bxLtOqzmV0XaGRjuJVP_vROkY5vu7mAqwOAaGMwVoj1V6-_KQtN-a_9-8fnllMV7zWaJ1q6nUFIGoLwPcaxWVs9_Totr3aMhWUzbIxhQUMXXjzIKcG7iUsx_-oW-mjeQH0/s1600/1111.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Title Effect Bounce ZigZag Hover Link Or Image" border="0" height="239" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW0JXA96ZJw8bxLtOqzmV0XaGRjuJVP_vROkY5vu7mAqwOAaGMwVoj1V6-_KQtN-a_9-8fnllMV7zWaJ1q6nUFIGoLwPcaxWVs9_Totr3aMhWUzbIxhQUMXXjzIKcG7iUsx_-oW-mjeQH0/s320/1111.png" title="Membuat Title Effect Bounce ZigZag Hover Link Or Image" width="320" /></a></div>
</div>

Yang Perlu Diperhatikan adalah semua Link teks atau gambar harus Memiliki Title Tag, dalam link diatas contohnya adalah title="Title Effect Bounce ZigZag Hover Link Or Image".
yah sekiranya cukup sekian dulu dari saya tentang Membuat Title Effect Bounce ZigZag Hover Link Or Image , Apabila ada kata-kata yang salah saya mohon maaf yang sebesar-besarnya, Wabilahi taufik wal hidayah, Wassalamu'alaikum warrahmatullahi wabarakatuh.

X-Quadrat

July 6, 2013

Membuat Title Effect Bounce ZigZag Hover Link Or Image

4 comments: