23 April 2013

Cara membuat peel back image / gambar terkelupas sebelum dan sesudah di blog

Posted at  16.10  |  in  tips dan triks blog


Peel back image selalu menyenangkan untuk dilihat, terutama jika efek transisi yang tepat digunakan untuk pertukaran gambar secara efektif antara keduanya. Contoh dari CSS ini menunjukan bagaimana fungsi dari CSS3 transisi seolah-olah animasi dari klip gambar seperti hidup. Hasilnya cukup simple, akan tetapi keren sekali.




MENAMBAHKAN KODE CSS DI BLOG
  • Masuk ke akun blogger anda -> Klik Drop down menu
  • Kemudian klik Template -> Edit HTML
  • Cari tag / kode ]]></b:skin> tekan CTRL + F  untuk memudahkan pencarian
  • Selanjutnya pastekan kode CSS berikut tepat diatas kode  ]]></b:skin> 



  • Simpan Template..

MENAMBAHKAN KODE HTML 
  • Klik Tata letak -> Tambahkan gadget HTML/Javasript -> masukan kode didalamnya -> Simpan gadget.
  • Atau Tambahkan kode HTML berikut didalam postingan (HTML bukan compose) 
<a class="nowandthen">
    <img src="http://img526.imageshack.us/img526/8063/beforejt.jpg" alt="">
    <img src="http://img52.imageshack.us/img52/75/afteruc.jpg" alt="">
</a>

<a class="nowandthen alt">
    <img src="http://img23.imageshack.us/img23/3189/before2f.jpg" alt="">
    <img src="http://img824.imageshack.us/img824/2466/after2g.jpg" alt="">
</a>

  •  Ganti link direct dengan link gambar anda..
Semoga bermanfa'at... 

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 16.10
Anda menyukai postingan di atas? Silahkan di share..!
Blogging dan wawasan spiritual Post Author

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

3 komentar:

  1. Balasan
    1. Caranya? ikuti aja kang tutorialnya diatas...mohon maaf, kesulitannya dimana? terima kasih atas kunjungan dan komentarnya. :)

      Hapus
  2. terimakasih kang jalupangna , udah nyari kemana - mana habisin banyak kuota eh taunya nemunya dan berhasil disini :D

    BalasHapus

About Us-Privacy Policy-Contact us
Copyright © 2013 Wawasan spiritual dan blogging. Blogger Template by BloggerTheme9
Proudly Powered by Blogger.
back to top