Home » Tutorial » Membuat Title Effect Bounce ZigZag Hover Link Or Image

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 :

Title Effect Bounce ZigZag Hover Link Or Image


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'>
$(&quot;.XQuadratzig a[title]&quot;).zigxquadrat({effect: &#39;bouncy&#39;});
$(&quot;.XQuadratzig img[title]&quot;).zigxquadrat({effect: &#39;bouncy&#39;});
</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.

Simpan Artikel Membuat Title Effect Bounce ZigZag Hover Link Or Image Dengan Link : http://x-quadrat.blogspot.com/2013/07/membuat-title-effect-bounce-zigzag.html
Judul : Membuat Title Effect Bounce ZigZag Hover Link Or Image.
Kategori : Javascript / Kreatif Blog / Tutorial
Ditulis oleh : Unknown Pada July 6, 2013
Bagikan Ke : Facebook / Twitter
SPAM Di DELETE, Gunakan Open ID Agar saya mudah berkunjung ke Blog Agan
4 Komentar
  1. UnknownJuly 6, 2013 at 7:43 PM

    wuihh mantaapp

    ReplyDelete
    Replies
    1. UnknownJuly 6, 2013 at 11:56 PM

      Haha, cuman pengen menghias blog aja sob...

      Delete
  2. AnonymousJuly 6, 2013 at 11:04 PM

    saat awal-awal ngeblog dulu, ane juga sering bongkar pasang javascript termasuk ini. Tapi karena berat akhirnya ane remove dan mulai membangun blog dari awal

    ReplyDelete
    Replies
    1. UnknownJuly 6, 2013 at 11:59 PM

      Bener banget sob, ini pun arsip lama yang dibuka kembali, karena dipandang minim artikel, lumayan ketimbang ga ada artikel lagi... hehe

      Delete

Subscribe to: Post Comments (Atom)