Menambahkan Effek Bayangan (Shadow) Pada Gambar di Postingan Blog Anda
Kalo yang gemar ngotak-ngatik adobe photoshop untuk menambahkan efek bayangan (shadow) pada sebuah gambar atau photo tentu bukan perkara sulit, cukup pergi ke box layers >klik kanan >pilih blending options lalu tinggal ceklis drop shadow > klik Oke. That so simple! Tapi… gimana kalo mau nambah efek bayangan pada gambar di dalam postingan blog kita…? Tentu kita membutuhkan trick khusus dan jika berkaitan dengan blog, maka yang kita bicarakan adalah masalah penambahan pada tag html dan kode CSS. Nah ini dia tips kita kali ini.
Kita akan bermain di area terlarang edit html oleh karenanya biasakan untuk membackup template yg ada sebelum mengedit. Kalo sudah, copy kode CSS berikut dan simpan di bawah tag <head> (di edit html blog Anda) Ingat ceklist dulu kotak “Expand Template Widget”
<style type=”text/css”>
.shadow {
background:#CCCCCC; /* shadow color */
border:1px solid #DDDDDD; /* darker border color */
margin: 5px;
position: relative;
}
.frame {
text-align: center;
background: #FFFFFF;
border: 1px solid #999999; /* lighter border color */
position: relative;
padding: 5px;
left:-8px; /* Anda bisa menentukan sendiri ukuran bayangannya */
top:-8px; /* Anda bisa menentukan sendiri ukuran bayangannya */
}
</style>
Jika sudah klik SAVE.
LANGKAH KEDUA
Berikut adalah kode html yang kita butuhkan ketika hendak memposting gambar,
<div class=”shadow” style=”width: 312px;”> <!– Ubah ukuran lebar gambar Anda – Ingat! lebar gambar harus dilebihi 12 –>
<div class=”frame”>
<img src=”URL GAMBAR ANDA.JPG” alt=”NAMA GAMBAR”>
</div>
</div>
Kalo Anda ragu dengan ukuran width gambar maka Anda bisa menggunakan kode html berikut.
<div class=”shadow” style=”width: 312px;”>
<div class=”frame”>
<img src=”URL GAMBAR ANDA.JPG” border=”0″ height=”200″ width=”300″ />
</div>
</div>
Selamat Mencoba…!
Note:
- Tips ini hanya berlaku untuk
daerah JABOTABEK dan sekitarnyalayout dengan background putih. Untuk background warna lainnya tinggal disesuaikan kode warna pada CSS! - Tips ini berlaku jika Anda mematikan “Konversi ganti baris” pada Setting > Formating >Pilih Tidak.
Perhatian
- Jika Anda masih memilih “ya” maka efek bayangan menjadi tidak sempurna.
- Jika Anda memilih “Tidak” maka jika postingan Anda sudah banyak Anda perlu mengedit ulang seluruh postingan Anda karena tag <br/> akan dinilai satu oleh html dan Anda memerlukan dua tag <br/> untuk memisahkan paragraf tulisan.
- Jika mau berlangganan tips2 semacam ini sekaligus mendapatkan webtool gratis ya daftar ajah di bravenet! klik disini untuk daftar, Gratis ko! heuheu, itu aff saya!
Jika artikel ini bermanfaat.
Popularity: 6% [?]
Themocracy
tutorial yang bagus.. mudah2an mas hakim dapet amal yang banyak
tutorial yang bagus. di tunggu tutorial selanjutnya, mudah2an dapet amal yang banyak dari YME
Amin Amin… alhamdulillah makasih do’anya
Tapi saya ga ngerti kenapa “mdh2an dapat amal yg banyak…” [?] Bukannya dapat balasan yang lebih… heuheu, nawar do’a, gpp kan 
weleh…kirain tips buat bayangan yang tulisan ada dibawahnya…
coz lagi butuh banget nih, punya tutorialnya nggak?
aku dapat dari satu blog tapi membingungkan banget tutorialnya.
Saya belum mengerti apa gerangan bayangan yg dimaksud mas Wiellyam…? ^_^ mungkin bisa disebutkan linknya biar nambah ilmu dan ga membingungkan
mulai tadi tuh, dian mau komentar postingan ini. but sulit banget. eh ndak tahunya…kesalahan ada padaku *mode malu com*. Pertanyaan yg mau diajukan seputar tulisan diatas, jadi lupa deh.. ntar kalo ingat dian kasih info ke…(gak tahu pantasnya manggil gimana nih) hakimtea, ya..
Ternyata mode malu dot com
tadinya udah sampe bikin saya panik. Jgn sungkan mba Dian *pake mba gppkan? atau cukup mba KD saja? heuheu*. Kalo sama saya cukup hakimtea… terasa lebih akrab ^_^
Kalo gitu biar dua duanya merasa nyaman, aku akan memanggilmu Hakimtea dan panggil namaku Dian. Oke?
wuoke! Dian… sweat and simple nickname… SETUJU
Mau tau Promosiin Blog ?, Bikin Backlink ? Tips ? Template blog ?, daftar AdSense Google ?
Lengkap abiz bro….
mau tau caranya ngeblog disini nich belajar lengkapnya :
tips-list.blogspot.com
blogtemplate.co.nr
Thanks
Terima kasih atas artikelnya bos
Terimakasih atas pencerahannya