Home
Tukaran Link
Pasang Iklan
Contact Me
Drop Shadow Mempercantik Tampilan Gambar
Drop Shadow adalah sebuah efek bayangan yang timbul pada suatu objek, bisa pada sebuah kotak, tabel, dan gambar. Coba anda perhatikan gambar yang ada pada setiap postingan blog ini. Semua gambar tersebut memiliki bayangan yang membuat tampilannya menjadi lebih menarik. Untuk membuat drop shadow bisa kita lakukan pada beberapa software photo editing seperti Adobe Photoshop. Tapi gimna jika semua postingan kita memiliki gambar yang akan diberi shadow dan jumlahnya banyak? Duh, bisa pusing jadinya... Tenang, dengan membaca tips ini sampai tuntas anda akan mengetahui cara memberi drop shadow pada gambar postingan dengan hanya menggunakan kode css yang simpel.
Berikut Cara Membuat Drop Shadow Gambar
1. Login ke akun Blogger anda, lalu pilih Layout > Edit HTML
2. Cari kode ]]></b:skin>, lalu paste kode css berikut tepat di atasnya:
.drop-shadow img {
background:url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}
3. Cari kode <data:post.body/>, lalu ganti kode tersebut dengan kode berikut:
<div class='drop-shadow'><data:post.body/></div>
4. Terakhir, klik Save Template dan lihat hasilnya.
Selamat mencoba...
Jangan lupa kasih komentar ya...
Bagikan Artikel Ini!
:))
:)]
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
~x(
:-t
b-(
:-L
x(
=))
31 komentar:
bikin berat ga mas?
Gak berat kok...
Ukuran gambar background cuma 3kb, jadi boleh dibilang gak nambah beban blog...
3 kb cukup berat...musik box sekitar 1,7 kb..label cloud sekitar 2,8 kb bahkan lebih
Terima kasih infonya
@Ossy: Ya ossy, tapi menurut saya tidak apa2 kalau hanya 3kb...
makasih mas, aas tips nya!! smoga makin update blognya!!
ini fungsinya untuk semua gambar di page blog y?
boleh coba!! tapi klu gx terlalu berat dipertahankan deh widget yg satu ini...
@artiirhamna: Trik yang saya jelaskan ini hanya untuk gambar yang ada di setiap postingan.
Kalau untuk semua gambar yang ada di blog lain lagi, begini kodenya:
img {
background:url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}
dan taruh kode itu di atas kode ]]></b:skin>
wah bro.... semakin elite aja blognya... penuh inspirasi...
bro..., radhityaNotes.com buat event nech.., Lo bisa di bilang Kontes SEO, Award yang radhityanotes.com berikan adalah adalah sejumlah uang tunai. Space iklan barner dan Iklan Mini di 11 jaringan Iklan Online Gratis selama 1 thun.
saya berharap master Blog dan master SEO ini biosa ikut berpartisipasi.., Lumayan buat cari duit tambahan, nambah temen, naikin Trafik blog..
Untuk selengkapnyan mampir yach sob...
kelaitan lebih enak diliat klo ada efek bayangan ya.:D
@Radhitya: Ya ntar gw coba lihat bro...
@gambutku: Ya donk, kan keliatan lebih hidup tu gambar...
ok dech coba dulu, efek ini bisa menarik pengunjung untuk rajin datang lagi, aku sudah punya efek weak, jika di gabung dengan efek ini menarik nggak ya...?
keren sob.. coba dulu..
hehe, udah praktek. hasilnya kuerennnnn bro. makasih ye udah share. kalo gak percaya. liat aja langsung blog ane.
klo bikin bayangan pada badan blog atau bingkai/border tampilan blog (mksud saya sisi luarnya gt) bisa ga? bagi donk ilmunye.
@sandhioke: Maaf, kalau yang itu saya belum tahu caranya...
mantap bro....
thanks a lot....
:p:p:p:p:p:p
siiip gan
makasih tipsnya dah kulaksanakan dan....
'berhasil'
:)0 gak temu nih yang ini :-t
Keren bro .... makasih untuk informasinya
info yg bgt thx sob :)]
mw tanya nh bro kl mw bikin tab kl kursor d arahin ke tab muncul slidebar gmn y thx infox bls d blog gw y bro..gw newbie nh hihihi ;))
bagus nich....
dicoba dulu yach....
terima kasih :D
mantap deh...
tips yang bagus sekali, praktis untuk dipraktekkan, thanks
TEMPLATE BLOG GUE LATAR BELAKANGNYA HITAM... BISA GA GAN??? MOHON PENCERAHANYA.. HTTP://MEMO-XP.BLOGSPOT.COM
COBA DI TENGOK
ini kalo kita upload gambar ya mz...??
maz tuker link ya ^_^
bingung masalah html-nya bozz
thanks ats tips"nya....
mantap infonya gan...