Posts Subscribe to This BlogComments

Follow Us


widget

make widget
Please Vote Us
Enter Yahoo Topsites | Yahoo Rare Sites | Yahoo Booter Sites and Vote for this site !!!
Vote For Us
Top Blogs BOOTER-CENTER - Find me on Bloggers.com
Mau Pasang Iklan Disini? Resize Banner 460X61
ads ads ads peluang usaha

Tuesday, December 6, 2011

Membuat blockquote background animasi kertas dengan CSS3

Please Vote Us
Enter Yahoo Topsites | Yahoo Rare Sites | Yahoo Booter Sites and Vote for this site !!!
Vote For Us

Biar mengurangi rasa suntuk, saya postingkan lagi masih seputar blogger dengan menu-menu nya yang bisa kita buat sesuai kreasi sendiri dan banyak referensi lainnya yang bisa kita pakai sebagai pembelajaran, menu kali ini diawali dari saya yang melihat cara membuat background animasi kertas dengan CSS3 di www.css-tricks.com. Coba lihat demo blocquote dibawah ini

blockquote {background: #EEE ;
width: 400px;
padding: 5px;
margin: 5px;
width: 400px;
overflow:auto;
max-height:250px;
  -webkit-box-shadow:
        1px 1px   0 rgba(0,   0,   0,   0.100),
        3px 3px   0 rgba(255, 255, 255, 1.0),
        4px 4px   0 rgba(0,   0,   0,   0.125),
        6px 6px   0 rgba(255, 255, 255, 1.0),
        7px 7px   0 rgba(0,   0,   0,   0.150),
        9px 9px   0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0,   0,   0,   0.175);
  -moz-box-shadow:
        1px 1px   0 rgba(0,   0,   0,   0.100),
        3px 3px   0 rgba(255, 255, 255, 1.0),
        4px 4px   0 rgba(0,   0,   0,   0.125),
        6px 6px   0 rgba(255, 255, 255, 1.0),
        7px 7px   0 rgba(0,   0,   0,   0.150),
        9px 9px   0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0,   0,   0,   0.175);
  box-shadow:
        1px 1px   0 rgba(0,   0,   0,   0.100),
        3px 3px   0 rgba(255, 255, 255, 1.0),
        4px 4px   0 rgba(0,   0,   0,   0.125),
        6px 6px   0 rgba(255, 255, 255, 1.0),
        7px 7px   0 rgba(0,   0,   0,   0.150),
        9px 9px   0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0,   0,   0,   0.175);

}
 Untuk cara membuatnya silahkan copy paste css yang ada di blockqoute diatas, jika sudah sekarang ikuti langkah-langkah berikut:

  1. Masuk ke menu Rancangan
  2. Pilih Edit Html
  3. Cari kode ]]></b:skin> dan simpan CSS berikut diatasnya:
  • Catatan: Jika sudah ada css seperti blockquote { ....... } hapus atau ganti dengan CSS diatas.
Simpan template jika sudah.
Sekarang untuk cara penggunaan blockquotenya pada menu Posting bisa dilihat pada gambar berikut :

  • Blok kode atau teks yang diinginkan lalu klik Tool Menu yang ditunjuk dengan tanda panah.
Setelah selesai, bisa dilihat hasilnya. Kurang lebih nya saya tunggu kritik dan sarannya, dan bagian terpenting dari Tutorial ini yaitu dari CSS3 nya bukan hanya untuk blockquote saja bisa juga untuk yang lainnya seperti untuk backround image pada posting bisa kita beri background Animasi Kertas seperti pada blockquote diatas.

Trimakasih semoga bermanfaat.

Related Post



Get Traffic Like Spam
Loading...

5 Comment:

  • Anonymous

    tes...tes....tes....tes.... :))

  • Anonymous

    Mantab saya cba gan

  • Trik yang bagus . comment back yah ^^.

  • wah keren om..
    saya olah TKP dulu
    salam kenal om..

    http://super-bee.blogspot.com/

  • Post a Comment

    Section meetings - Registered
    recent entries

    users online



    ads ads ads ads
     

    networkedblogs

    B-C ON YAHOO

    Trafic

    Followers

    MyFreeCopyright.com Registered & Protected MyFreeCopyright.com Registered & Protected