Membuat Tepi Gambar Bershadow Dengan CSS 3

Posted By anasku
CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.

Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Note :
  1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
  2. Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {
Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Nah yang diganti adalah code CSS yang berwarna hijau saja.

kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome.

Sekian semoga bermanfaat.
Artikel Terkait untuk "Membuat Tepi Gambar Bershadow Dengan CSS 3"


195 comments:

Dava_line09 said...

Salam Bloger,..
Bila Anda merasa Bloger Sejati Silahkan berkunjung ke link di bawah ini,..
http://www.davasiappatahhati.co.cc/2010/09/bloger-bikin-gregetan.html
Semoga Tuhan Melimpahkan semu Rahmatnya Padamu kawan,Amien,..

COMPLETE - ALL in One Blog said...

Thanks atas sharingnya kawan...

blogger admin said...

rumit juga kalu di css template, kalu berkreasi tersendat, sudah penuh kode cssnya

Herdiansyah Hamzah said...

Nice post buddy. Really useful for us......

Ocim said...

Thanx atas sharingnya, saya langsung coba ni.......

Koko Bota said...

nice posting.....

sukses trus bro buat kamu..:)

Tips Ampuh Meraih Sukses said...

Bagus tutorialx, bikin blog lebih indah. makasih ya iinfonya!!!

bolehngeblog said...

punten...permisi...tak bermaksud SPAM

kalo boleh (semoga boleh)..mau ngajak tukeran link nih...link blog ini sudah agak lama berada di blog saya..saya lagi ngumpulin back link nih...pinginnya punya google back link segunung sih..heheheh..

trims ya,
ini blog saya "bolehngeblog"
http://bolehngeblog.blogspot.com

DAPAT LAPTOP said...

Artikel yang sangat membatu para blogger pemula, salut dengan ilmu yang dibagi secara gratis

Loothay Hm said...

infox bagus!! makasih ya!!

Imtikhan said...

thanks Infonya sobat

Dangsulaeman said...

tukeran link yuk..blog anda sudah cukup lama saya pasang di Bolehngeblog di widget link exchange di kolom bawah. Periksa dulu, kalau sudah ada, mohon pasang balik blog saya (namanya : bolehngeblog dan alamatnya ada di atas)

terimakasih

Chenk Rahman said...

Keren sob...
Salam kenal, From: Chenk Rahman

Hanya Seorang Sahabat said...

keren..

COMPLETE - ALL in One Blog said...

lumayan nuih buat tambah ilmu

yuniico said...

Job Feed Aggregator : terimakasih banyak atas informasinya sobat, ini akan sangat berguna untuk kita semua General Forum Discussion

salam hangat

Indonesia News Aggregator

Anonymous said...

Aduh sulitnya sih CSS! Tapi, inilah tantangan hidup.

http://hebatdariinternet.blogspot.com/


ya...

Update Cheat PointBlank PB terbaru said...

wah mantab nih makasih yah kunjungi balik blog ku yah makasih Trik-tips Blog - Free Download
Cheat
Download Film
Download MP3 Gratis
Berita HOT

ok thanks yah

Fawwaz said...

saya mau coba nih
itu bershadow kalo kita sorot pake mouse kan ???

Radea Mitra Sejahtera Program said...

sippppzzzz like this..

sewa mobil said...

Makasih tutorialnya,sangat berguna sekali.

koplek portabel said...

keren brurr...thanks yhua

Agen Bola Online said...

thanks ya mas atas tips membuat tepi gambar bershadow

Jasa Seo said...

Luar biasa sekali tips mas

Baca Komik Manga Naruto said...

baca Manga Komik Naruto One Piece Bleach Fairy Tail Detective Conan Bahasa Indonesia Chapter Terbaru Online Gratis, Download video anime subtitle indonesia|komik blaze

http://komikblaze.blogspot.com

Baca Komik Manga Naruto

Komik Naruto

Komik One Piece

Komik Fairy Tail

Komik Bleach

Komik Detective Conan

School Online said...

I like This

SMAKER said...

wah bagus juga nih bang.,,.,.,.!!

Info : ada kontes SEo disini mohon dilihat dan minta sekedar dukungannya.!

Nurul Imam said...

Mantap gan sudah saya coba liat demonya di blog saya

harga jual blackberry iphone laptop murah said...

makasih mas atas tipsnya.barangkali nanti akan saya coba

mobil pengantin said...

wah thanks mas atas tipsnya

niamblog said...

tipsnya mantab gan thank yah salam kenal

Agen Bola said...

tips yang bagus mas

Penangkal Petir said...

salam kenal mas

Blog's Teguh said...

thanks info ny gan

kunjungi yah http://teguhhariyadi.blogspot.com

free Download software license said...

Kok Gak Jadi2 ya, apa gara2 q gak bakat ya huft... bantuin mas.......

Sewa Mobil said...

A pretty good article, could provide a new information to me. Glad to find a blog like this. Thank You

Dimas Puz Salldown said...

Makasih OM......
tolong kunjungi
http://demplong.blogspot.com/

asuransioke said...

tutorial kren boleh nih dicoba, lam kenal ya Gan, maaf terlambat

UII Fans said...

Artikel yang menarik..
Makasih infonya..
Salam...:)

Fakultas Ilmu Agama Islam, Universitas Islam Indonesia
http://fis.uii.ac.id/

inf said...

lagi pengen bljar css3 nih, smoga ini bisa membantu

acehomegazen said...

Nice Info guy,benar2 membuahkan hasil.. ane salut sama agan... acehomgezen,adseller..
adseller
saatnya kita bergerak maju
bersatu kita teguh
bercerai kita Runtuh
Seandainya kita benar benar jujur
Kita akan selalu di percayai
Teman Sejati Selalu Setia
Selalu terpecaya
Selalu Ada
Saat
Kita Perlu
Selalu Setia menemani

Metropolis Pos said...

terima kasih Gan....tips na
ane mash newbie pngen blajar terus...
sukses selalu blogger indonesia

mr.ang said...

ane coba dulu gan... makasih sharenya... :)

Download Game PC terlengkap said...

nice and thanks...

Lutfie Tutorial said...

info bagus makasih gan..

Arena Liga Online Betting Terpercaya said...

Terima kasih infonya...

Petrick said...

keren,, ^_^

http://cwiter.blogspot.com

obat tradisional Anemia said...

mantap gan infonya. saya jg sdang belajar adobe cs3. toolnya masih meraba.

NEWS PAPER.com said...

wow...iri nie.....kunjungi balik ya.....www.titodesign.co.cc

10 Software Ini akan Melindungi Komputer dari Virus USB Flash Disk said...

Flash Disk yang digunakan sering mengalami serangan virus ataupun malware, trojan yang merupakan program jahat lainnya yang berasal dari USB Flash Disk. Virus-virus tersebut dapat merusak...

ryan mika said...

info oke

music improvisation said...

kode js yah??

photoshop said...

infonya oke banget

Muka Primitif said...

Impoh nya ok banget ...

http://mukaprimitif.blogspot.com/

Pasang Iklan Baris Gratis Tanpa Daftar said...

Ikut menyimak artikelnya Gun :-)
Silahkan mampir2 juga ke Web saya: Pasang Iklan Baris Gratis Tanpa Daftar .

Salam Outbound !

Bikin Profile said...

maksih... :)

klikm disini said...

bagus bangetttt artikelnyza

obat herbal diabetes tipe 2 said...

lumayan sulit,,tapi saya akan mencoba_nya,,,
bermanfaat bagi saya..

airvan42 said...

nice share bos..

aria khrisna said...

Mantap sobat.Terus update yah tutorialnya
Passive income ane
---------------------------
Midnight Sunrise

Blog Amatiran said...

wah, thanx bgt tutorialnya nih, sangat membantu bgt :)

engelbertus eenk henry suyono said...

sangat bermanfaat utk newbie spt sy...thanks

angel said...

thanks banget ya gan... nice bgt infonya ane mesti implemetasi ne... maaf bukan bermaksud nyepam kalo mau tengok hasil implementasinya ada disinihttp://iplaygameonline.blogspot.com/

Kerangbulu said...

Free Download Bokep Terbaru :

1. Mirip Nikita W.3gp
2. Abg Cantik Mabok.3gp
3. Artis Inisial N.3gp
4. Embat Perawan ditoilet.3gp
5. Entub Artis Terbaru.3gp
6. Cew Smu dientub Enak.3gp

Andikwin K.A said...

sip gan infonya!

Cantika Maria Idris said...

Terimakasih atas tutorialnya.
Sangat membantu dalam belajar membuat blog pribadi Cantika :)
Sekali coba langsung berhasil
Salut buat admin :)

Toko Online said...

Thanks Gan infonya

tendou pain said...

wuih hebat gan tutorialnya.. mampir juga ke blog ana.

Milner said...

nice share

neni herawaty

Cek Kualita SEO Blog Anda said...

Mantab Bang...

sundaboy said...

infonya bagus banget gan :)

Blog Dofollow said...

hasilnya kayak apa gan?? bisa di pasang di blogger gak?

Download Novel said...

Makasih infonya..
Salam...

tjoretan-akoe.blogspot.com said...

good,klo cara upload file ke blogspot caranya gimana?

medan said...

Nice sharing Bro

Yasir Utomo said...

thank u agan. trik baru nih buat sya. :)

www.edikomputer.com said...

sip mantab tutorialnya www.edikomputer.com

Obat Jantung said...

mas bro tetap menulis tulisan yang mantaaaap.....

ONTO SENO said...

SIP MANTAB TULISANE...... LANJUTKAN

konveksi seragam online said...

mantaappp infonya, apa tidak menambah beban loading blog kalo CSS pake shadow?

izutolandona said...

mkasih
kunjung balik y
http://izu210298.blogspot.com

beny shukaku said...

halo gan,,ane udah baca2 banyak artikel di blog ente,,artikelnya juga keren2..blog agan juga gak kalahkeren,,
jangan lupa mampir ke blog ane juga ya

ane tunggu kunjungan baliknya ya

http://freekep.blogspot.com/

Ismail said...

Terima kasih atas tutorialnya yang menarik banget............

988BET Agen Bola Untuk Prediksi Piala Eropa 2012 said...

terimakasih tutorialnya boss sangat membantu

obat tradisional radang paru paru said...

kalau pake wordpress gimana gan?

free download file theme said...

nice share gan..
sangat bermanfaat. terimakasih

De Amru said...

Nice info, thans gan
Senang Belajar Di sini

seputar internet said...

Thanks berat

>>>>>>>> said...

sungguh info yang sangat menarik gan.. ane butuh dukungan anda ni blog ane baru.. langsung kunjungan yee :D

Thalasemia Minor said...

terima kasih sudah berbagi informasinya

Obat Manggis said...

Info dan artikelnya bgus bngt, lam knl ya gan ??

moretemplate.com said...

Informasinya bagus-bagus, salam kenal dari more template.com

Mochammad karim Al Amin said...

css itu apa gan heheh
ane anak baru gan,,
salam karimalamin.blogspot.com

Blogspot Tutorial said...

kk....
kok blognya tidak pernah update lagi??
padahal informasinya mantap2

Blogspot Tutorial

dodi said...

semua isi di blog ini mantap semua.....saluuut.......by http://pinjamanuangexpress.blogspot.com

Latifah Yunifa said...

thanks ^^

Ariel said...

siip.:))

tour and travel di surabaya said...

terima kasih sudah sharing tutorialnya..

prediksi togel said...

rumit juga kalu di css template, kalu berkreasi tersendat, sudah penuh kode cssnya

Krido Suseno said...

patut juga nih dicoba tutornya...thanks gan
http://lirikdangitar.blogspot.com

zainal arifin said...

zhipzz bguz
http://zainalarifinmm.blogspot.com/

tutor said...

Hi nice Post written by you guys. It is amazing and wonderful to visit your site. Thank a ton for such a nice post.

rachmad tatawarna said...

hi nice post :D

Cara Herbal Mengobati Kanker Usus said...

nica share ..
lam kenal aja :D

raynaldo grandy said...

Saya suka dengan blog kamu bro, keren..menarik infonya..
------
All About Info|Software|Film|Game|Pemograman|Windows| Visit : http://free-Plex.blogspot.com/

SHARE4RT said...

wah mantabb sob !

salam persahabatan SHARE4RT

cream pemutih wajah said...

makasih banyak artikel bloggingnya gan

afrilla adhitya said...

Mksih bnyak Atas infonya,sya blajar bnyak dari website ini

Ochieed boneng said...

How To Change Blogger Background

Best Free Seo Tools to Optimize Your Blog

Profitable for your business - Guest Blogging

What Function Margin at Your CSS / Tips For Beginner

How to Host Jquery Script in Blogger / Blogspot

How to Earn Money with Chatika, Clicksor & Adhitz Learn in Urdu

How to Reduce site/blog Loading Speed Time?

Social Media & Email Subscription Box For Blogger

SiteMap

How to Make / Install Back To Top Button With

NoFollow | Understanding tag (rel = "nofollow") Attribute

Change Blog's Background Color Automatically with JavaScript

Create A Full-Width Page Without Sidebar In Blogger

cream pemutih wajah said...

wah kok sulit yah

Pelangi Wisata said...

thanks atas ilmunya gan.

soket-dj.com said...

perlu di coba ini. thank sharing nya kang.

Muhammad Rasya said...

gambar di blog saya jadi lebih indah dan terlihat profesional,, makasih ya,,,

Untung Shop | Toko Online Murah
Iklan Untung | Iklan Baris Gratis
RasyaShare | Tempat Berbagi Segalanya

Obat Herbal Batu Empedu said...

Komplit, thanks infonya

Obat Batu Empedu said...

Nice info, sangat bermanfaat, TQ ya

SAKE XP said...

nice info..

solusi pasutri said...

alat pembesar payudara

alat pembesar penis

alat sex untuk pria

alat sex untuk wanita

Krim pemutih wajah

minyak oil pembesar penis

obat kuat sex pria

obat pembesar penis

obat penggemuk badan

Obat Peninggi Badan

obat perangsang wanita

Pelangsing herbal alami

Pemutih badan

Produk Kecantikan

Selaput Dara Palsu

Dwi Ahmad said...

Kunjungan saya dari: free3allpengetahuanku.blogspot.com

mh najiib said...

wah... bagus juga ternyata hasilnya.......

Mitra Bibit said...

Salam Sukses....

Sekedar informasi untuk sahabat blogger smuanya,
Kontes Review untuk mendukung penghijauan bumi tinggal 2 minggu lagi.
Berhadiah JUTAAN rupiah lho....
Kontes ini bukan kontes SEO murni jadi dapat diikuti oleh siapapun....
Info Selengkapnya:
www.MitraBibit.com

agus herbal said...

makasih gan

obat herbal asma said...

terima kasihh sobb. . .sudah mau berbagai akan tips dan triknya !!!

jona rendra said...

kayaknya bikin blog jadi tambah keren
saya coba dulu ya

Nge Trik said...

mantab mas brooo..salut deh

prisma said...

mantab gan infonya .. thanks

QuickPassTV said...

thanks

Obat maag kronis said...

di tunggu saja artikel menarik lainnya..

Agen Obat Herbal said...

makasih banyak informasinya... membantu sekali

obat dan penyakit said...

sip... makasih banyak ya

agen herbal ace maxs said...

wah ok punya nich triknya

pengobatan maag kronis said...

trims..
membantu sekali..
top abis

Obat Tipes Alami said...

nice informasinya,,terima kasih infonya..

Diare said...

menarik sekali infonya,.,.

Herpes said...

terima kasih untuk infonya..

Obat Infeksi Saluran Kemih said...

mantap infonya..

pembesarpenispria.net said...

sippp totorialnya mas...makasih ya... salam sukses buat anda...

asahika said...

nice info...

obat kanker darah leukimia said...

makasih banyak ya sob...
ok punya nich

obat darah tinggi asam urat said...

mantep banget informasinya

Obat herbal liver said...

posting terus ya... infonya pas buat saya

Obat Sakit Kepala said...

trims telah share infonya...

cisska vaneela said...

Pasang Iklan Murah di Area Dewasa

Ukuran Banner 300 x 259
Posisi: Sidebar Kanan
Slot tersedia: 2-5 Slot
Harga 50/bulan

kamasutra jepara said...

luar biasa artikel-nya,,,,
salam kenal dari: http://www.obatkuat-kamasutra.com/
trimakasih

Kamaruddin Tone said...

trims infonya sob ?
by http://new-blacklist.blogspot.com/

seomaxz said...

patut di coba gan nice info

Taufan Riyadi said...

sudah di terapkan gan

http://trikaja.blogspot.com/

blackcyber99 said...

boleh dicoba nih tips nya gan... nice info dah.. salam kenal

nurman sablon said...

terimakasih gan untuk informasinya

edod print said...

makasih sob untuk info dan tipsnya, salam sukses

jamaludin MZ said...

boleh juga gan tutorialnya

oba alami radang empedu said...

oh jadi gitu ya gan, makasih dh infonya

didin saripudin apandi said...

makasih untuk info dan tipsnya

Rojak komara said...

isi artikelnya sangat menarik gan, terimakasih

pengobatan alami limpa bengkak said...

hatur nuhun kang info na...

indah dewi said...

mantep nih infonya, makasih

obat alami batuk pilek pada anak-anak said...

makasih gan infonya

oba herbal radang tenggorokan said...

akhirnye...gue dapet juge informasinye

andrian said...

oye bagus..

suci permata said...

duh makasih banget infonya sangat membantu :-)

Tips mengatasi hepatitis said...

ini dia nih,, infonya gue dapet juga. thanks sob atas informasinya

asep kumala said...

oh jadi gitu ya, infonya menarik dan sangat membantu, thanks

komarudin said...

nice info

solusi alami mengatasi ginjal bocor said...

thanks to info

kohar said...

makasih infonya

obat alami demam berdarah untuk anak said...

nice infonya gan

kamril said...

makasih bro infonya

obat herbal diabetes melitus terbaik said...

infonya sangat bermanfaat, makasih gan

connie said...

thanks mas bro infonya

Muhammad Odhie Akbar said...

Keren blog nya sob... Tips SEO Pemula

kisman nugraha said...

makasih sob tentang infonya, bermanfaat sekali

kostrad 13 galuh said...

saya belajar banyak dari blog ini setelah membacanya, makasih sob

kusnadi said...

makasih mas bro infonya menarik

Obat herbal asma anak said...

Sangat menambah wawasan saya, terimakasih untuk informasinya

udin said...

makasih atas informasinya, sangat bermanfaat

iyah komariah said...

thank infonya sangat bermanfaat sekali

Rizki yudha said...

Langsung jadi :v

http://neoinblog.blogspot.com

moeclazh said...

nice info ;)
http://moeclazh.blogspot.com/

situs web taruhan bola said...

oh ternyata begitu cara yang benar membuat shadow, baik akan saya contoh di lain kali saya membuat blog saya

Jasa Aqiqah Bandung said...

Layanan Aqiqah Bandung

Toko Herbal Online said...

Beragam Macam Obat Herbal

pantangan makanan penyakit darah tinggi said...

nice gan

resep obat herbal diabetes said...

thanks gan

vivobetting.net said...

bermanfaat sekali cara membuat tepi gambar dari anda

sbobet said...

bingkainya cantik ya.. hahahah makasi banyak

Agen Bola Promo 100% SBOBET IBCBET Casino Poker Tangkas Online said...

mantap gan,,thank infonya

Sarang Semut Kalimantan said...

kok gak Ada SS nya gan,...

best ptc said...

terima kasih atas artikelnya ,teruslah berkarya untuk bangsa dan negerimu by
best ptc

obat luka bakar said...

terimakasih untuk ilmunya..:)

gejala darah rendah

cara mengobati penyakit sinusitis said...

informasi yang menarik, terimakasih telah berbagi.

Asam Urat Obat

werkblad said...

I need this article to complete my assignment in the college, and it has same topic with your article. Thanks, great share.

Tara Budiawan said...

Obat Alami Penyakit Vaginitis
Pilose Antler Capsule Green World
Suplemen Ibu Dan Anak
Gabung Green World
Jianxin Capsule Green World
Vig Power Kapsul
Obat Sindrom Iritasi Usus Besar
Obat Cedera Ligamen Lutut Tanpa Operasi
Obat Yang Aman Mengobati Impetigo Pada Anak Bayi
Obat Penyakit Mata Miopi (Rabun Jauh)
Cara Mengobati Mata Bintitan
Obat Alami Memperbaiki Cedera Tulang Rawan
Cara Mengobati Saraf Terjepit
Obat Alami Penyakit Emfisemi

obat kutil kelamin ampuh said...

ok banget nih postingan, biar tambah ilmu ngblog..

les privat said...

makasih banyak infonya

sherlina halim said...

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

Untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : melasian77cs@gmail.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
asianbet77.com

Download Disini

BELAJAR BAHASA said...

Ini bagus, bagaimana membuat bayangan pada tepi gambar

Post a Comment

 

Site Info

Add to Technorati Favorites
Visitor Online
Check PageRank

Recent Comments

Tutorial Jitu - Blog Info, Gadget-Widget, Blogspot tutorial, blog hack, free template, SEO And Blog tips : Admin By Luqman Khoirul Anas