adsense link 728px X 15px

Wednesday, June 30, 2010, 

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.


  1. Login ke blogger.com
  2. Klik Rancangan
  3. Pilih menu Edit HTML (tidak perlu memberi centang pada 'Expand Template Widget')
  4. Cari kode berikut

    ]]></b:skin>
  5. 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;
    }
  6. 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.

  1. Login ke blogger.com
  2. Klik Rancangan
  3. Beri centang pada Expand Template Widget
  4. Setelah loadnya selesai, Cari kode berikut

    <data:post.body/>
  5. Lalu sisipkan kode CSS tadi, perhatikan kode di bawah ini

    <div class="shadow"><data:post.body/></div>
  6. 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:

Amdhas said...  on  June 30, 2010 at 3:21 AM

bisa di pasang di posting ya sob?

Masda said...  on  June 30, 2010 at 3:41 AM

@Blogger-Admin, iya mas, bisa kog... Seperti live demo tuh :D

rizky2009 said...  on  June 30, 2010 at 3:59 AM

kayaknya ini g terlalu banyak code2an, bolehlah aq coba sob

rizky2009 said...  on  June 30, 2010 at 3:59 AM

kayaknya ini g terlalu banyak kode2an sob, bolehlah aq cobain

Belajar SEO said...  on  June 30, 2010 at 5:06 AM

wah, ternyata gak terlalu ribet yah :)

Umy Diary said...  on  June 30, 2010 at 5:26 AM

kalau yang pake photoshop gimana ni brada?

Belajar SEO Blogspot said...  on  June 30, 2010 at 5:42 AM

ternyata buka text aja ya agan masda yg bisa dikasi efek shadow, gambar juga bisa tanpa perlu ngedit lagi lwt photoshop..

non inge said...  on  June 30, 2010 at 5:49 AM

keren... keren...
ntar kapan2 dicoba... ^^
thx 4 share ^^

om rame said...  on  June 30, 2010 at 12:22 PM

kaLo yang ini mudeng nih, terima kasih om atas sharenya. seLamat istirahat aja yah.

encosgoblog said...  on  June 30, 2010 at 8:00 PM

Wah ilmu baru lg y bos ajarin ya ntr ? Biar bisa lbh keren blog ku !

thya said...  on  June 30, 2010 at 8:38 PM

ihiy,, infonya bagussss!!!
siap dicoba.

salam kenal. hehe:)

Koko Bota said...  on  July 1, 2010 at 2:26 AM

mantap kawan........coyyy aku coba ahhh.....:)

mixedfresh said...  on  July 1, 2010 at 4:11 AM

sepertinya simpel ni, ijin save dulu ya

secangkir teh dan sekerat roti said...  on  July 1, 2010 at 6:46 AM

boleh nih.. saya ada projek juga tentang ini :)

GigiSehatBadanSehat said...  on  July 1, 2010 at 8:19 AM

kayaknya lucu sih...
tapi saya lebih suka gak pake shadow ato frame. kalo ada gambar dengan latar putih, keliatan ngeblend ama background blognya...

om rame said...  on  July 1, 2010 at 9:12 AM

kunjungan maLam om, cuma sekedar mampir aja nih, maap beLum sempat baca-baca tutor yang Lainnya.

ariefborneo said...  on  July 2, 2010 at 6:31 AM

mantap info nya sobbbbbb.....

imtikhan said...  on  July 2, 2010 at 6:32 PM

wah keren sob infonya
terima kasih

admin said...  on  July 2, 2010 at 11:10 PM

kerennn mas...ntar tak cuba ahh

om rame said...  on  July 3, 2010 at 8:14 AM

kunjungan maLam, seLamat berakhir pekan aja om.

Azzmie said...  on  July 3, 2010 at 8:20 PM

aku suka banget foto-foto, kalo tmpilan foto ku di edit jari keren nich.

MONOKROM said...  on  July 4, 2010 at 2:42 AM

Saya sebenaernya suka dengan efek bayangan, tapi males ngerancangnya, he...he...

ariefborneo said...  on  July 5, 2010 at 9:18 PM

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..??

ariefborneo said...  on  July 5, 2010 at 9:23 PM

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..??

DO said...  on  July 25, 2010 at 8:57 AM

Mantab infonya, biar blogku kelihatan lebih canggih ne :D ,

Oy link kamu sudah kupasang, ditunggu link exchangenya ya

Masda said...  on  July 25, 2010 at 9:33 AM

DO
Segera saya pasang DO, makasih ya ;)

distributor kertas struk jakarta said...  on  December 15, 2015 at 12:58 AM

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

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

It's Me

My Photo
Masda
Seorang blogger "KOTA GADIS" yang selalu penasaran dengan sesuatu hal yang baru. Belajar, belajar, dan terus belajar serta berusaha untuk menerapkannya. Karena menurut saya "Ilmu itu untuk diterapkan bukan untuk dipelajari".

Facebook Twitter
View my complete profile

Exchange Link

MasdaZine

Followers