32 Menambahkan Effect Link Nudging Pada Bloger Dengan CSS3

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Setelah fakum sekian waktu agak sedikit bingung, mau mendahulukan postingan dengan tema apa ya? Karena draft dalam windows Live Writerku ternyata tidak sedikit. Menulis tutorial memang mudah, tapi butuh waktu untuk mempraktekkan dan sukses dengan eksperimen kecil itu, tentunya untuk meyakinkan para blogger bahwa suatu script bekerja, kode CSS dan HTML yang ada benar sehingga dengannya para bloggerpun tertarik untuk mencoba.

Nah karena pada postingan sebelumnya saya pernah mengetengahkan cara menambahkan link nudging dengan JQuery, kali ini saya akan berbagi cara menambahkan effect link nudging dengan CSS3. Bahkan effect inipun bisa diterapkan pada image. Berikut langkah-langkah menambahkan effect link nudging pada blogger

View Demo

Link Nudging CSS31. Sign in ke account anda

2. Pada dasbor => Rancangan / Design => Edit HTML

3. Back up template anda

4. Tambahkan code berikut diatas kode ]]></b:skin>

/*--- Link Nudging Effect ---*/
.nudge  { 
-moz-transition: all 0.4s ease-out;   
-o-transition: all 0.4s ease-out;   
-webkit-transition: all 0.4s ease-out;   
-ms-transition: all 0.4s ease-out;   
transition: all 0.4s ease-out;   

.nudge:hover  { 
margin-left: 25px; 
padding-left: 5px; 
}

5. Simpan template

Selanjutnya untuk melihat effect ini bekerja pada postingan, anda cukup memasukkan beberapa kode berikut dalam tab HTML pada post editor.

Untuk Link Nudging gunakan kode berikut:

<a href="Disini letakkan URL" class="nudge">Disini tambahkan teks</a>

Yang diganti dari kode diatas:

  • Ganti kalimat "Disini letakkan URL" dengan link anda
  • Ganti kalimat "Disini letakkan teks" dengan teks yang ingin ditampilkan pada link anda

Untuk Image Nudging gunakan kode berikut

<img src="Link image letakkan disini" border="0" alt="Deskripsi image letakkan disini" class="nudge"/>

Yang diganti dari kode diatas:

  • Ganti kalimat "Link image letakkan disini" dengan URL dari image anda
  • Ganti kalimat "Deskripsi image letakkan disini" dengan deskripsi yang ingin ditampilkan pada image anda

Silahkan lihat hasilnya diblog anda!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

32 komentar :

  1. Mau coba membuat effect mouse hover lain pada image? Lihat disini

    BalasHapus
  2. wah bagus bisa dicoba, terimakasih infonya. sukses selalu. salam blogger.

    BalasHapus
    Balasan
    1. Sukses juga tuk anda, terimakasih apresiasinya!

      Hapus
  3. memang lebih ringan jika dibandingkan dengan yang pake jquery

    BalasHapus
  4. Wah terima kasih mbak admin tipsnya oke punya!

    BalasHapus
    Balasan
    1. Sama-sama, terimakasih jg atas kujungan dan apresiasinya.

      Hapus
  5. lama banget baru sempat mampir baca tutorial disini.
    Gimana khabarnya Sis?....

    BalasHapus
  6. uda berhasil, makasi sob :D

    BalasHapus
  7. Selamat Idul Fitri, Mohon maaf lahir dan bathin.

    BalasHapus
  8. wahhh aq gak mau nungging2 deh bahaya hehehe..

    oya info buat teman2..info blog dofollow terbaru auto backlink silahkan kunjungi
    http://www.rajacolek.co.cc
    http://www.cara2.co.cc

    thankss ..buat admin anaa...

    BalasHapus
  9. Ikut menyimak artikelnya Gun :-)

    Salam Outbound!

    BalasHapus
  10. good information ... I have read and will be added to my personal knowledge... thanks

    BalasHapus
  11. thank gan atas infonya...boleh di coba nih. oh ia themes nya ok. cerah euy

    BalasHapus
  12. Assalamu'alaikum mbak.... ehehe

    dah lama gak mampir kesni.. makin canggih aja nieh...
    gmna punya kabar mba? masih di mekkah kah?

    BalasHapus
  13. hemmh,,gituh ya caranya,,mempercantik blog itu menyenangkan tapi sangat menjengkelkan jika kita gagal,,hehehe,,dan saya sering,,,he :p
    terima kasih gan buat tipsnya

    BalasHapus
  14. really nice post!! thanks for sharing :D

    berkunjung malam2..

    BalasHapus
  15. apa kabar sobatku? lama tak berkunjung kesini?

    BalasHapus
  16. emang salut bwt mba, bikin blog tutorial itu gak mudah mba..

    Met tahun baru ya mba. semoga harapan baik terwujud ditahun ini.

    oya, ada award utkmu mba, spesial dariku, mohon dpt diambil dan diterima ya..
    :D

    BalasHapus
  17. wah keren neh tipsnya, bisa dicoba :)

    BalasHapus
  18. terimakasih gan info dan artikel di blog anda bagus dan bermanfaat, saya suka dengan blog anda adalah blog yang bagus, salam blogger sprei murah

    BalasHapus
  19. Muy buen Blog, te recomiendo que uses Adweblink.com es un sitio web para rentabilizar tu pagina web, vas a tener mejor posicionamiento, mayor numero de visitas y lo mas importante, vas a empezar a ganar dinero... Yo lo estoy usando hace unos meses y ya tuve mi primer pago :D... Saludos !

    BalasHapus
  20. bagus jadi berwarna warni, nambah berat nngak ya?

    BalasHapus
  21. wah baru tahu ada yang kaya ginian ternyata yah gan ...hehehe

    BalasHapus
  22. Terima kasih sahabat atas berbagi info dan tipsnya ini.

    Jadi kelihatan lebih hidup lagi

    BalasHapus
  23. @admin,

    Ada award untuk kamu teman,, silahkan ambil ya

    di SINI

    dan cek hadiahnya di SINI.

    BalasHapus
  24. tak cobain dulu ya om..

    BalasHapus
  25. yess... akhirnya ketemu juga,
    dari tadi aku cari-cari ini sob..
    info yg bermanfaat sekali..
    ijin bookmark ya :D



    #Semoga Sehat Selalu

    BalasHapus
  26. salam sukses gan, bagi2 motivasi .,
    Pikiran yang positiv dan tindakan yang positiv akan membawamu pada hasil yang positiv.,.
    ditunggu kunjungan baliknya gan .,.

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN 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>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!