Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3

Viyan Pradita Rabu, Mei 16, 2012 ,

Setelah kemarin posting tentang Cara Memasang Rating Bintang Rich Snippets Pada Blogspot Kali ini lanjut lagi share tentang Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3. Efek gambar pada postingan blog, pastinya akan membuat blog lebih enak dipandang mata. Seperti yang kita tahu, ada banyak macam dan cara untuk membuat efek pada gambar di postingan blog, salah satunya yaitu efek image dengan JQuery, tapi yang akan saya bahas disini yaitu efek image dengan CSS3. Dibawah ini merupakan kumpulan efek-efek gambar pada postingan blog yang bisa saya kumpulkan.

Wuookeee.. langsung saja praktek sob !!
1. Login blogger
2. Pergi ke Edit HTML
3. Beri ceklist pada Expand Widget Templates
4. Cari kode CSS .post img dan .post img:hover, bila ada kode tersebut ganti/replace dengan kode yang saya siapakan dibawah. Tapi bila tidak ada kode seperti diatas, tinggal paste'kan saja diatas kode ]]></b:skin>

DEMO : Arahkan mouse ke gambar dan lihat efeknya.
Dan berikut adalah KODE CSS beserta DEMO untuk efek gambar pada postingan blog :


.post img {
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
    transform:  rotate(+2deg);
    -o-transform: rotate(+2deg);
    -webkit-transform:  rotate(+2deg);
    -moz-transform: rotate(+2deg);
}
.post img:hover {
    box-shadow:  0 3px 6px rgba(0,0,0,.5);
    transform:  rotate(-1deg);
    -webkit-transform:  rotate(-1deg);
    -o-transform:  rotate(-1deg);
    -moz-transform: rotate(-1deg);
}


.post img {
    height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.post img:hover {
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}


.post img {
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
}


.post img {
    border-radius: 30px 0 30px 0;
    -moz-border-radius: 30px 0 30px 0;
    -webkit-border-radius: 30px 0 30px 0;
    -o-border-radius: 30px 0 30px 0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
}


.post img{
    transition:all 1.2s ease-out; 
    -o-transition:all 1.2s ease-out; 
    -moz-transition:all 1.2s ease-out; 
    -webkit-transition:all 1.2s ease-out; 
} 
.post img:hover {
    z-index:99;
    transform:rotate(-10deg) scale(1.4) translate(5px,-3px);  
    -o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
    -moz-transform:rotate(360deg) scale(2) translate(1px,-3px); 
    -webkit-transform:rotate(30deg) scale(2) translate(10px,-3px);
    box-shadow: 0 3px 6px rgba(0,0,0,.5);
} 


5. Bila sudah memilih salah satu efek gambar diatas, jangan lupa Save Template.

Nah, simpel dan gampang kan tutorialnya sob ??
Demikian ulasan saya tentang Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3. Semoga bermanfaat, dan salam Kode Blogger \m/

Ditulis Oleh :

Artikel Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3 ini dipublish pada hari: Rabu, Mei 16, 2012. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

65 komentar
Terjun Ke Kolom Komentar

  1. menarik sekali gan :)
    thanks infonya :)
    blogwalking :)

    BalasHapus
  2. Knapa Gan waktu di paste di atas ]]>,, gak work ??

    BalasHapus
    Balasan
    1. Coba diteliti lagi gan untuk kode CSSnya, mungkin kode css untuk .post img dan .post img:hover sudah ada di template sobat.
      Coba cek ditemplate sobat dan cari: .post-body img dan hapus kode CSS tersebut (jgn lupa backup dulu).

      Hapus
  3. makasih gan,,,sngat bermanfaat,...

    BalasHapus
  4. Cara Backup Gmana,, please kasih tau ??

    BalasHapus
  5. Thanks'z banget,, udah work nih :)

    BalasHapus
  6. wah infonya bagus sob..
    sangat bermanfaat & lengkap lagi..
    makasih ya :)
    salam kenal :)




    #Happy BLogging :D

    BalasHapus
  7. makasih banget ya. alhamdulillah dengan adanya efek yang dikasi oleh kode-blogger, blog saya lumayan cantik.

    BalasHapus
  8. wah perlu d coba nih ;)..thanks..

    BalasHapus
  9. Thanks gan, WORK n udah saya terapin di blog.
    Terimakasih :)

    BalasHapus
  10. saya mau tanya gan...kan itu otomatis nanti semua gambar yang di blog kita kena efek itu semua..nah klo cuma gambar tertentu saja yg kita inginkan terkena efek gimana caranya?

    BalasHapus
    Balasan
    1. Tiggal di edit di CSS'na sob. tergantung bagian mana yg mau di edit.

      Hapus
  11. dengan adanya efek yang dikasi oleh kode-blogger, blog kaka saya lumayan cantik thx atas informasinya yah gannn

    BalasHapus
  12. Berhasilll... Keren sob. thanks ilmunya :D

    BalasHapus
  13. nice shara gan,, thx infonya ya :)

    BalasHapus
  14. kang, kalo di aplikasiin ke intro blog bagimane, maturnuwun(:

    BalasHapus
  15. makasih gan, langsung ngefek nih...

    BalasHapus
  16. @bagong hs
    Bisa" saja, silahkan di kreasikan sendiri sob :)

    BalasHapus
  17. Wiss. berhasil kang. Saya udah pakai di blog saya. haturnuhun...

    BalasHapus
  18. gud job mas brad.. ehehe ;)

    BalasHapus
  19. wahhh mantaf gan...dari dulu ane cari gini rupanya gak jauh2,,,dapat disini...thanks ya ....

    BalasHapus
  20. keren maz....ijin pasang di blog saya maz..N terus di update blognya maz...

    BalasHapus
  21. izin komen ya gan, mari tukar menukar link gan Buku Murah Inspiratif DIVA Press dan juga Buku Murah Inspiratif DIVA Press ini semoga bermanfaat.

    BalasHapus
  22. efeknya keren" ijin coba mas :)

    BalasHapus
  23. izin komen ya gan, mari tukar menukar link gan
    Layanan Bisnis Pulsa dan Token PLN
    sob tukeran link yuk page rank n2 dofollow nii http://artikel-berry.blogspot.com/2012/03/tukar-link-otomatis-dapat-backlink.html

    BalasHapus
  24. Postingan anda sangat membantu saya dalam me-share karya-karya saya... :D
    apalagi saya newbie... ;)
    terima kasih ya gan ^-^
    oh ya saya perempuan *penting ga sih*

    BalasHapus
    Balasan
    1. Sama-sama mbak :D
      Maaf neh gak sempet cek satu satu komentarnya, karna memang, jarang oll kemarin.

      Sukses terus.. :-bd

      Hapus
  25. Makasih banget sobat :) saya udah pakai tutorial ini Dan hasil nya makzimal banget

    BalasHapus
  26. makasih banyak atas tips nya ya, maklum saya masih pemula jadi harus cari2 tips, hehe. kunjungi juga blog saya ya: gtasa-modslibrary.blogspot.com Keep Posting!

    BalasHapus
  27. mampir ya mas brooo.... http://cherylaghniparfum.blogspot.com/

    BalasHapus
  28. Thaks gan shernya.. wowo bisa langsung praktek nich.. Salam kenal jg ya.. :)

    BalasHapus
  29. Thanks ya! :-bd
    visit me: styleragoom.blogspot.com

    BalasHapus
  30. MAKASI BANYAK OM... SANGAT OK NI... AKU UDAH PASANG DI BLOGKU.

    BalasHapus
  31. thanks sharing tag buat efek gambarnya. regards

    Anti Rayap

    BalasHapus
  32. thank's artikel nya sangat bermanfaat

    BalasHapus
  33. langsung pasangdah efeknya..
    mantep bro...

    BalasHapus
  34. \m/

    keren Mas Bro
    #MAHASISWA GO BLOG

    BalasHapus
  35. keren sob, thanks atas tutornya.
    visit my blog gan, ujangyoyo.blogspot.com

    BalasHapus
  36. akhirnya nemu juga hahahaha... gw mo cari di google, tapi bingung kata kunci nya apa... "agar gambar blog gerak-gerak" gak nemu2...

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers