Kamis, 03 Juli 2014

Cara Membuat Efek Api pada Link di Blog

Cara membuat efek terbakar / api pada link saat disentuh cursor / pointer mouse, preview efek terbakar / api pada link, blog design, tips trik bloggerCara Membuat Efek Api pada Link di Blog – Kemarin lusa saya telah membahas cara membuat 1 link dengan 2 tujuan berbeda. Sekarang, saya akan membahas cara membuat efek api (atau terbakar) pada link di blog. Saya ucapkan terima kasih pada admin blog izal-sragi.blogspot.com, yang telah membagi script ini. Secara pribadi, efek api pada link ini terlihat cukup keren dan menarik pengunjung, serta dapat menambah nilai seni pada blog. Efek ini akan terlihat apabila pengunjung blog meletakkan pointer mouse diatas link. Untuk lebih detailnya, silahkan lihat gambar disamping


Berikut ini langkah – langkahnya :
  1. Login ke Blogger.com, lalu masuk ke Template.
  2. Backup template blog Anda (lihat caranya disini).
  3. Klik tombol Edit HTML, dan tekan CTRL+F, dan cari kode a:hover{ (Jika Anda tidak menemukan kode ini, tolong baca catatan dibawah.)
Contoh : Di blog saya, kodenya seperti ini : a:hover{text-decoration:none;}
  1. Jika sudah ketemu, pastekan kode berikut (setelah a:hover{)
text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;
Sehingga, kode akhirnya akan menjadi :
a:hover{text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;
  1. Terakhir, klik Simpan template.

Catatan : Jika di blog Anda tidak ada kode a:hover{, silahkan copy kode berikut dan pastekan di Edit HTML (dibawah <b:skin><![CDATA[  :
a:hover{text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;
text-decoration:none;
}
Bagaimana, mudah bukan? Selamat mencoba membuat / memasang efek api pada link di blog! Tolong juga like blog ini di Facebook, follow di Twitter, dan Add Google + nya. Ups, satu lagi. Tolong pula berikan Google +1! Selamat mencoba, terima kasih dan salam blogger!

Suka Artikel Ini? Yang Share Dapat Pahala Lho... Trims!

4 komentar:

  1. ini akan berlaku disetiap link mas, termasuk link pada gambar jika kita menerapkan secara langsung pada selector HTML, hmm.. bisa mengganggu pembaca jika kursor menyentuh gambar

    BalasHapus
  2. Keren juga Kang kalau ada efek-efek ini di blog :)

    BalasHapus
  3. woow mantap, di hp bisa gak ya?

    BalasHapus

Kurang mengerti dengan artikel diatas, ingin menanyakan sesuatu yang kurang jelas atau ingin meninggalkan jejak? Silakan gunakan Kotak Komentar!. Jika Anda ingin meletakkan kode HTML pada kotak komentar, gunakan tools HTML Parser But, remember! Berkomentarlah dengan bahasa yang sopan, tanpa iklan, spam politik, porno, dan hal - hal negatif lainnya. Terima kasih!