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% [?]
Related posts :
- Blogging untuk yang pertama Menulis beberapa rangkaian kata menjadi sebuah kalimat, menambah setiap baris
- The Right Light Fixtures and Lighting Accessories Can you imagine world without lighting...? Not to far, just
- 11 Tehnik Meningkatkan kunjungan ke blog anda! Apakah blog anda sepi pengunjung? Kalau iya, anda harus mengetahui
- SUBMIT ARTIKEL GRATIS Salah satu cara untuk meningkatkan trafik ke situs anda ialah
- Struktur Tag Title yang Baik dalam Strategi SEO Beberapa dari blogger pemula mungkin belum mengetahui apa itu SEO
Hi, my name is Hakimtea, I like drink a cup of tea n blogging is really my cup of tea :) I've been dreaming to be a fulltime Blogger, I imagine to be a Master Blogger... when I wake up and realize that all my dreams are still like all I consume, an ordinary Hakimtea... a newbie Blogger who try to write, sharing information and getting money from blogging. 
March 12th, 2008 at 12:06 am
tutorial yang bagus.. mudah2an mas hakim dapet amal yang banyak
March 12th, 2008 at 12:08 am
tutorial yang bagus. di tunggu tutorial selanjutnya, mudah2an dapet amal yang banyak dari YME
March 12th, 2008 at 12:15 am
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 
March 12th, 2008 at 9:13 pm
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.
March 12th, 2008 at 9:30 pm
Saya belum mengerti apa gerangan bayangan yg dimaksud mas Wiellyam…? ^_^ mungkin bisa disebutkan linknya biar nambah ilmu dan ga membingungkan
March 14th, 2008 at 11:34 am
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..
March 14th, 2008 at 11:55 am
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 ^_^
March 16th, 2008 at 1:53 pm
Kalo gitu biar dua duanya merasa nyaman, aku akan memanggilmu Hakimtea dan panggil namaku Dian. Oke?
March 16th, 2008 at 2:07 pm
wuoke! Dian… sweat and simple nickname… SETUJU
September 25th, 2008 at 4:38 pm
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
September 7th, 2009 at 9:09 am
Terima kasih atas artikelnya bos
September 7th, 2009 at 9:11 am
Terimakasih atas pencerahannya