Efek Shadow Gambar pada postingan blog

Label: Diposting oleh Hamba Allah™ Minggu, 01 Januari 2012

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.

Sebelum




Sesudah


Untuk menambahkan efek shadow ini kita membutuhkan kode CSS, seperti gambar di atas, meski tidak seindah efek bayangan yg digunakan di photoshop tapi ya cukup simple, cepat dan tidak mesti berabe ngedit dulu di adobe asalkan kode CSSnya sudah kita tanam terlebih dahulu di edit html blog kita.Yang Anda perlukan sebelum menggunakan kode ini adalah Anda mesti tahu ukuran gambar yang akan dipasang! Lalu cocokkan width html dengan gambar ditambah 12, maksudnya begini, jika width gambar Anda berukuran 300 maka htmlnya 312, nanti kodenya seperti ini, <div class=”shadow” style=”width: 312px;”>Oke, kita langsung saja!LANGKAH PERTAMA 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 sekitarnya layout 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

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)