Cara Memasang Bayangan pada Link di Blogger

Cara Memasang Bayangan pada Link di Blogger – Dengan sedikit permainan kode CSS, kita dapat mendekorasi semua ornamen (widget) yang terdapat dalam blog kita. Contohnya dalam tips yang satu ini, menambahkan efek bayangan pada link di blog. Selain dapat menambahkan nilai seni terhadap link (sehingga akan menarik pengunjung untuk meng-kliknya), penambahan bayangan pada link dapat mencegah pengunjung bosan, karena pengunjung akan melihat bayangan apabila pointer mouse digerakkan (diletakkan) diatas link. Jika anda penasaran mengenai preview-nya, silahkan klik link dibawah ini untuk masuk ke blog percobaan saya :

PREVIEW Bayangan Pada Link di Blogger

Silahkan arahkan pointer Anda ke sembarang link, lalu lihat bayangan yang timbul di belakang link. Seperti itulah preview bayangan pada link di Blogger.

Oke, inilah sedikit tips singkat bagaimana cara memasang efek bayangan pada link di Blogger.

1.   Seperti biasa, buka akun Blogger Anda, lalu pilih Template.

2.   Jangan lupa untuk membuat backup (cadangan) dari template blog Anda (dengan cara mengklik tombol Cadangkan/Pulihkan).

3.   Lalu, masuk ke menu Edit HTML.

4.   Klik pada areal kode HTML, lalu tekan ctrl+f untuk menampilkan kotak Find.

5.   Carilah kode dibawah ini.

a:hover {
color:#FFFFFF;
text-decoration: underline;
}

Tips :

Jika Anda tidak menemukan kode yang sama persis dengan kode diatas, cobalah untuk mencari kode a:hover{.  Lalu perhatikan kode tersebut, dan lihat bentuknya (sampai tanda ‘}’, tanpa tanda kutip). Apabila bentuknya sama dengan kode diatas (hanya berbeda kode setalah # - kode tersebut mewakili warna link dalam blog Anda, dan warna link untuk setiap template umumnya berbeda), kode itulah yang Anda cari!

6.   Lalu, modifikasi kode tersebut dengan menambahkan kode dibawah ini:

text-shadow:5px 5px 5px #000;

Keterangan :

-          3px 3px 3px merupakan ukuran/ketebalan bayangan pada link yang ditampilkan. Silahkan diganti sesuai dengan keinginan.

-          #000 merupakan kode warna bayangan (dalam contoh ini hitam). Silahkan ganti sesuai dengan keinginan, atau lihat Generator Kode Warna untuk melihat daftar kode warna.

7.   Tempatkan kode pada langkah no.6 seperti contoh dibawah ini :

a:hover {
color:#FFFFFF;
text-decoration: underline;

text-shadow:5px 5px 5px #000;

}

8.   Terakhir, klik Pratinjau untuk melihat hasil perubahan. Jika dirasa telah sesuai, klik Simpan Template untuk menyimpan perubahan pada template.

Bagaimana? Jika terjadi kegagalan, upload kembali template yang telah Anda backup tadi. Selamat mencoba memasang efek bayangan pada link di blogger! Senang rasanya apabila saya bisa mendengarkan pendapat Anda melalui kotak komentar, dan terima kasih atas ketersediaannya untuk mengkritik artikel ini.

Salam Blogger!