T utorial kali ini saya akan membahas tentang Membuat Link Nudging dengan jQuery atau CSS.
Link nudding adalah link yang menyenggol atau bergoyang bila di sentuh oleh cursor.
Efek Link Nudging ini akan membuat link di blog Anda menjadi lebih menarik. dalam Membuat Link Nudging kita akan menggunakan bantuan dari jQuery atau CSS jadi Anda harus memilih salah satu cara ingin menggunakan jQuery atau CSS??? Untuk lebih jelasnya tentang Link Nudging silahkan lihat demo berikut.

Live Link Nudging Demo ↓


Perlu Anda ketahui sebelumnya Oto Website pernah membahas tentang Link Nudging juga yang berada di article Cara Membuat Link Bergoyang.
Jika Anda sudah paham dengan maksud tutorial kali ini mari kita bahas cara membuatnya pada blog Anda.
Pilih salah satu mana yang ingin Anda gunakan, Membuat Link Nudging dengan jQuery atau CSS ?


Membuat Link Nudging dengan jQuery


1. Login ke akun blogger Anda.

2. Pada Dasbor klick Template ➨ Edit HTML.

3. Dalam Edit HTML temukan kode </head> blia kesulitan mencarinya coba klick DISINI.

4. Bila sudah ketemu sekarang letakkan script jQuery berikut tepat di atas kode kode tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.ow').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>

5. Simpan template.

Kode Pemanggil Link Nudging dengan jQuery

Pada saat mengedit postingan masukkan kode berikut:

<a class='ow' href='http:/otowebsite.blogspot.com'>Oto Website</a>

Keterangan:
  • Ganti teks yang di block kuning dengan url tujuan.
  • Ganti teks yang di block biru dengan nama link.


Membuat Link Nudging dengan CSS


Dalam Membuat Link Nudging dengan CSS ini kita membaginya menjadi dua cara:
  • A. Link Nudging Untuk Semua Link (otomatis semua link)
  • B. Link Nudging Untuk Link Terpilih (kita yang menentukan)
Jadi silahkan pilih salah satu.

1. Login ke akun blogger Anda.

2. Pada Dasbor klick Template ➨ Edit HTML.

3. Dalam Edit HTML temukan kode ]]></b:skin> atau <style> blia kesulitan mencarinya coba klick DISINI.

4. Bila sudah ketemu sekarang letakkan salah satu kode CSS berikut tepat di atasnya.


A. Link Nudging Untuk Semua Link



a:link {
-webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms ease-out;
}
a:hover {
padding-left: 12px;}


5. Simpan template.


B. Link Nudging Untuk Link Terpilih



.ow {
-webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms ease-out;
}
.ow:hover {
padding-left: 12px;}


5. Simpan template.

Kode Pemanggil Link Nudging dengan CSS Untuk Link Nudging Terpilih (B)

Pada saat mengedit postingan masukkan kode berikut:

<a class="ow" href="http://otowebsite.blogspot.com">Oto Website</a>

Keterangan:
  • Ganti teks yang di block kuning dengan url tujuan.
  • Ganti teks yang di block biru dengan nama link


Bagaimana Selanjutnya?


Saya rasa cukup untuk kali ini, bila Anda kesulitan dalam Membuat Link Nudging dengan jQuery atau CSS silahkan bertanya, saya akan dengan senang hati membantu Anda!!!

Posting Komentar Blogger Disqus

  1. kalau tidak mau di copas ,jangan ngeblog,,kelaut aja,,memangnya kamu gak pernah nyuri script,,,,

    BalasHapus
  2. @BENNY TRI HARTOYOMaaf bos, sya tidk prnah nyuri script.
    wlpun sya mngmbil script sya psti mnyrtkn sumber.

    Perbedaan blogger dan plagiator: bla blogger bla copas psti mnyrtkan sumber
    dan bagi plagiator copas tidk akan myrtkn sumber, dan biasanya Plagiaotor adalah sperti Anda yang tidk mmhmi dunia intrnet dan mauya enk aja, tnpa mau bljar.

    Plagiator pun bla berkomtar bsa klihtan dri nda komentar speri Anda, yg trliht mndukung Plagiator, krna Anda sndiri juga plagiator :Q

    BalasHapus
  3. @BENNY TRI HARTOYOBner gan, ane juga gak snebg ama Plagiator.
    Y gan klihtan Kalo Plagitor dari komentnx dah klihatan.

    Hati2 gan ama tu orang gan.
    Profil aja di sembunyiin, tkut ketahuan kalo dia admin dari blog Copas kali.

    Hati2 juga ni kalo-kalo blog ane di copas ama tu orang.

    Copas boleh asal menyertakan sumber.
    Yang g' mnyrtakan sumber cuma plagiator.

    BalasHapus
  4. keren nih,gan bisa tolongin ane nggak,kok kalau ane buka fb di rumah gambar nya kaya gini'

    http://lasidroid.blogspot.com/2012/08/fb-erorr.html

    BalasHapus
  5. .. maav kawan,, aq mau tanya. itu contoh nya kayak yg di atas itu ya?!? ..

    BalasHapus
  6. @♥Vpie◥♀◤MahaDhifa♥Yups benar, demonya lansung saya sertakan di atas!

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top