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: 2% [?]
Catatan:
- Jika Artikel di atas bermanfaat dan membantu, terimakasih untuk menyimpan link hakimtea.com pada blog, forum atau situs Anda.
- Silahkan mengcopy-paste artikel di atas untuk dipublikasikan ulang pada blog Anda, forum, situs atau media lainnya, dengan catatan menyebutkan blog ini sebagai sumber rujukan, dengan teks: Hakimtea.com dan link: http://hakimtea.com atau permalink artikel bersangkutan.
- Jika ada hak cipta yang terlanggar karena kelalaian saya pribadi semoga Anda berkenan menegur saya langsung.
Artikel yang berhubungan:
- Daftar & Cara Setting Feed Blogger Ke FeedBurner Plus "Bonus" Memasang 3 Widget FeedBurner Untuk meningkatkan pembaca/traffic blog kita, salah satu caranya adalah mendaftarkan feed blog ke feedburner. Untuk personal blog mungkin tidak menjadi
- Membuat Banner Blog Postingan ini atas permintaan Teuku Zulfikar Amin yang ingin membuat banner blognya. Karena saya tahu sedikit tentang pembuatan banner blog
- Proses Itu Perlu (Laporan) Tahu Nggak? Pasti tahu kan! [mode maksa] Bukan tujuan yang menjadi pokok dalam segala hal, tapi proses dalam pencapaian tujuan
- Mimin, Template 4 in 3 Column Plus Form Komentar Yang "Super Sexy dan Telanjang" Gila judul postingnya... ;-) Mo nyoba nyuri2 accidental SEO ya? Ga juga, tapi ya bisa dibilang begitu ^_^ mungkin karena
- Membuat & Menyisipkan Tabel HTML di Postingan Blogger Bagi Anda pengguna Ms Office; baik itu excel ataupun MS Word maka untuk membuat table sudah sangat dimudahkan *anak kecil
Hai, saya Hakimtea, bermimpi menjadi seorang full time blogger, berkhayal menjadi master blogger... saat terbangun semua masih tetap sama, hanya seorang hakimtea biasa, seorang blogger newbi yang mencoba menulis dan berbagi informasi seputar budaya ngeblog. 
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