Sesuai dengan namanya, efek shadow image merupakan efek pada image yang menyerupai bayangan. Dalam penerapan efek shadow tidak sepenuhnya dibentuk dengan kode CSS, melainkan memanipulasinya dengan menggunakan image. Maaf apabila saya tidak bisa memberikan demonya di blog ini, untuk itu live demo saya tempatkan di blog yang saya khususkan untuk live demo. karena tidak mungkin lagi rasanya jika template ini harus ditambah banyak kode lagi ^^, Silakan klik DI SINI untuk melihat demonya. Berikut ini cara untuk membuatnya.
- Login ke blogger.com
- Klik Rancangan
- Pilih menu Edit HTML (tidak perlu memberi centang pada 'Expand Template Widget')
- Cari kode berikut
]]></b:skin> - Copy kode berikut ini lalu letakkan tepat di atas kode tadi.
.shadow img {
background: url(http://i50.tinypic.com/10xyg4w.png) no-repeat right bottom;
padding: 0 6px 6px 0;
}
- Klik Simpan
Untuk menerapkan efek shadow pada image kodenya seperti ini.
<div class="shadow"><img border="0" src="http://URL GAMBAR ANDA"/></div>
Kekurangan dalam langkah ini anda harus memasukkan kode CSS tersebut setiap anda ingin memposting image. ^^, Solusinya di bawah ini adalah penerapan efek shadow pada image secara otomatis.
- Login ke blogger.com
- Klik Rancangan
- Beri centang pada Expand Template Widget
- Setelah loadnya selesai, Cari kode berikut
<data:post.body/> - Lalu sisipkan kode CSS tadi, perhatikan kode di bawah ini
<div class="shadow"><data:post.body/></div>
- Klik Simpan
Dengan menerapkan langkah kedua ini, begitu anda memposting image pada blog maka akan secara otomatis terdapat shadow pada image tersebut. Semoga bermanfaat...
^^,
27 Comments:
bisa di pasang di posting ya sob?
@Blogger-Admin, iya mas, bisa kog... Seperti live demo tuh :D
kayaknya ini g terlalu banyak code2an, bolehlah aq coba sob
kayaknya ini g terlalu banyak kode2an sob, bolehlah aq cobain
wah, ternyata gak terlalu ribet yah :)
kalau yang pake photoshop gimana ni brada?
ternyata buka text aja ya agan masda yg bisa dikasi efek shadow, gambar juga bisa tanpa perlu ngedit lagi lwt photoshop..
keren... keren...
ntar kapan2 dicoba... ^^
thx 4 share ^^
kaLo yang ini mudeng nih, terima kasih om atas sharenya. seLamat istirahat aja yah.
Wah ilmu baru lg y bos ajarin ya ntr ? Biar bisa lbh keren blog ku !
ihiy,, infonya bagussss!!!
siap dicoba.
salam kenal. hehe:)
mantap kawan........coyyy aku coba ahhh.....:)
sepertinya simpel ni, ijin save dulu ya
boleh nih.. saya ada projek juga tentang ini :)
kayaknya lucu sih...
tapi saya lebih suka gak pake shadow ato frame. kalo ada gambar dengan latar putih, keliatan ngeblend ama background blognya...
kunjungan maLam om, cuma sekedar mampir aja nih, maap beLum sempat baca-baca tutor yang Lainnya.
mantap info nya sobbbbbb.....
wah keren sob infonya
terima kasih
kerennn mas...ntar tak cuba ahh
kunjungan maLam, seLamat berakhir pekan aja om.
aku suka banget foto-foto, kalo tmpilan foto ku di edit jari keren nich.
Saya sebenaernya suka dengan efek bayangan, tapi males ngerancangnya, he...he...
Mantap sob info nya...saya mau tanya sob,,,kenapa ya di atas kotak postingan ane ga ada kotak kecil buat up load gambr untk postingan..??
Mantap sob info nya...saya mau tanya sob,,,kenapa ya di atas kotak postingan ane ga ada kotak kecil buat up load gambr untk postingan..??
Mantab infonya, biar blogku kelihatan lebih canggih ne :D ,
Oy link kamu sudah kupasang, ditunggu link exchangenya ya
DO
Segera saya pasang DO, makasih ya ;)
Wah mantap min tutorialnya, saya udah coba di website saya dan hasilnya makin keren deh tampilannya. Makasih ya min, sekalian saya izin save ya , thank you
Blog ini "DOFOLLOW", Silakan tinggalkan komentar anda, bebas tapi sopan. Tidak kami anjurkan untuk mencantumkan link pada komentar serta memakai nama Anonymous.
Komentar yang bernada SPAM atau SARA akan kami hapus.
Post a Comment