Memberi effect shadow pada tampilan gambar yang kita posting, tentu saja memiliki pengaruh pada tampilan blog kita. Tampilan shadow pada gambar disamping dapat memberikan kesan elegan juga memberikan dampak pada orang yang berkunjung di blog kita. Apalagi gambar yang di tampilkan sangat unik, bisa jadi akan meningkatkan daya tarik mata ketika memandang. Langsung ke TKPPerhatikan gambar disamping yang berwarna merah dan terdapat efek bayangan pada gambar tersebut, ternyata pada gambar yang akan dimasukan ke dalam posting artikel blog bisa diberi efek bayangan juga, kalian bisa melihat contohnya di blog saya ini yang semua gambar pada posting dihiasi dengan efek bayangan. Untuk membuat sebuah efek bayangan pada gambar posting tidaklah sulit, cukup menambahkan sedikit kode CSS. tapi efek bayangan ini hanya akan berpengaruh di area posting blog atau di artikel blog saja. untuk banner dan lain-lain saya rasa itu tidak bisa, kecuali kalian mengeditnya dengan software edit foto. Jika kalian tertarik langsung saja lakukan langkah-langkah dibawah ini :
- Login ke akun Blogger kalian, lalu pilih Tata Letak dan klik Edit HTML
- Cari kode ]]></b:skin> lalu paste kode CSS dibawah ini tepat di atasnya:
drop-shadow img { background:url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom; padding: 5px 10px 10px 5px; }
- Cari kode <data:post.body/> lalu ganti dengan kode dibawah ini:
<div class='drop-shadow'><data:post.body/></div>
Setelah semua langkah diatas dilakukan dengan benar, sekarang tinggal di SAVE dan lihat hasilnya pada gambar yang kalian masukan ke dalam postingan artikel blog kalian.
Keterangan:
Pada efek shadow yang saya berikan diatas adalah efek shadow yang berwarna abu-abu, kalian juga bisa menggantinya dengan warna pink,merah atau biru sesuai keinginan tapi dengan syarat kalian harus membuat gambar seperti "http://i30.tinypic.com/1qsh1h.jpg" dan merubah shadow pada gambar tersebut menjadi warna yang kalian inginkan. Setelah itu upload gambar hasil editan kalian tadi kemudian ambil URL nya dan ganti alamat http://i30.tinypic.com/1qsh1h.jpg pada kode CSS diatas dengan URL gambar yang telah kalian edit.
selamat mencoba dan semoga bermanfaat. jika ada pertanyaan silahkan pada kolom komentar dan insyallah akan saya jawab. terima kasih.
http://www.aziz-rhamadhan.co.cc/
