Senin, 06 Mei 2013

Cara Memasang Bayangan pada Link di Blogger

Cara Memasang Efek Bayangan pada Link di Blogger, hanya dari Tips SEO + Blog - PC 123!
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 :
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!

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

3 komentar:

  1. Ide yang brilian bos, saya agak kurang faham dengan CSS, tapi sepertinya tips ini patut dicoba di blog saya !

    BalasHapus
  2. @Yans Ghifansyah : Trims atas komentar dan kunjungannya... :) Monggo, silahkan dicoba... :)

    BalasHapus
  3. saya coba dulu ya gan, mau liat hasilnya

    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!