™Galery™

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.