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 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.
Posting Komentar