Blockquote CSS3 Blockquote CSS3

Blockquote yang lain daripada yang lain ini dibangun dengan melibatkan CSS3 transition, CSS3 transformation, CSS3 border radius, CSS3 text shadow dan 3 (tiga) buah background image untuk background blockquote dan dua tag span yang kita manfaatkan. Bagaimana cara membuat blockquote yang benar-benar lain dari pada yang lain ini? Cocokkah untuk blog sampeyan? Adakah manfaatnya?

Blockquote bukanlah "gadis yang jelek" atau "gadis kaya raya" yang tak layak dipinang untuk melengkapi blog. Aku juga heran kenapa jarang sekali blogger yang memanfaatkan tag spesial yang sebenarnya amat pantas dipakai ini, ya? Oho ... atau barangkali tak begitu kenal dengan blockquote? Atau kalian merasa antipati terlebih dahulu? Ataukah sampeyan ketularan blogger lain yang jarang menggunakan blockquote? Heh... heh.... Coba rasakan betapa mudah dan pentingnya memanfaatkan "si gadis jelita ini". Dia bisa digunakan untuk wadah teks-teks tertentu yang perlu ditonjolkan di posting, lhoh! Sampeyan tak perlu membuat tag baru untuk melakukan itu. Cukup blockquote! Dan tampilannya? Hoooohoooo coba lihat saja yang ini!

Cara Membuat Blockquote dg CSS3

Kode Blockquote CSS3

blockquote {
         padding: 10px;
         margin: 10px 0 10px 20px;
         background-image: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/bgBloquoteV236H2.png);
         font: 13px/17px Serif, Times, Helvetica;
         font-style: italic;
         color: #FFCC99;  /* original code: gubhugreyot.blogspot.com */
         text-shadow: 1px 1px 1px #000;
         border: 1px ridge  #0099FF;
         border-radius: 20px 10px 20px 10px;
        -moz-border-radius: 20px 10px 20px 10px;
        -webkit-border-radius: 20px 10px 20px 10px;
        -o-transition: all 1.2s ease-in;
        -moz-transition: all 1.2s ease-in;
        -webkit-transition: all 1.2s ease-in; }
blockquote:hover {
         color: #eee;
        -o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
        -moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
        -webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);}
blockquote span.bbuka, blockquote span.btutup {
         float: left;
         margin-right: 5px;
         height: 17px;
         width: 22px;
         background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;
        -o-transition: all 1.2s ease-in;
        -moz-transition: all 1.2s ease-in;
        -webkit-transition: all 1.2s ease-in;
}
blockquote span.bbtutup {
         float: right;
         margin-left: 5px;
         margin-right: 0;
         background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat;
}
blockquote:hover span.bbuka, blockquote:hover span.btutup {
        -o-transform: rotate(1090deg) scale(1.1);
        -moz-transform: rotate(1090deg) scale(1.1);
        -webkit-transform: rotate(1090deg) scale(1.1);
}

Cara Menyimpan Kode CSS

• Login : Login kee Blogger.
  • Tuliskan "User Name (Nama Pengguna)" atau bisa juga gunakan "Email Address".
  • Tuliskan "Password (Sandi)".
  • KLIK "Login".
• Sesaat setelah login maka akan terlihat halaman "Dashboard (Dasbor)". KLIK link "Design (Rancangan)"..
• Design/Rancangan : Cari dan klik link Edit HTML.
• Cari kode ]]></b:skin>. Letakkan dan simpan semua kode CSS tepat di atasnya.
• KLIK SAVE Templates/Simpan Template.
• KLIK link Posting.
• KLIK Entri Baru/New Entry.
• Gunakan blockquote untuk melakukan posting. Sampeyan bisa menggunakan contoh di bawah ini.
• Buka hasil posting di halaman blog untuk melihat hasilnya.

Contoh bentuk kode untuk posting

Silahkan di copy untuk percobaan!

<blockquote> Keindahan Hembus Sembayu
Tak Sehangat Telapak Tanganmu
Yang Membelai Hatiku Dengan Kasih Sayangmu
Selat Yang Memisahkan Kita
Sunyi Tampa Bintang Kejora
Ku Serahkan Ketulusan Cinta Suci
Asmara Yang Kita Idamkan Ini
Dibayangi Suasana Sunyi
Mahligai Indah Yang Yang Kau Bina
Tak Tercapai Oleh Tanganku
Antara Kilauan Di Air Biru
Wajahmu Sayut Tersiksa
Oh.. Tuhanku
Satukanlah Hati Yang Setia
Sampai Bila Aku Harus Menanti
Percintaan Yang Menghukumku
Karena Tiada Lagi Duanya
Ku Serahkan Kepadamu Tuhan...!! !</blockquote>

Catatan

• Bila dalam template sampeyan sebelumnya sudah ada tag blockquote bawaan template asli, sebaiknya dihapus saja. Cari menggunakan Ctrl+F.
• Jika merasa ada kesulitan untuk mencari kode atau yang lain, coba buka Special Tutorials (menu di kiri). Di dalamnya terdapat beberapa tutorial penting berkaitan dengan modifikasi template termasuk cara cepat cari kode HTML.
• Untuk menggunakan blockquote, sampeyan harus memasukkan kodenya melalui posting mode "Edit HTML" (ada dua mode: mode Compose dan Edit HTML).

Hasik Dari Blockquote CSS3

Keindahan Hembus Sembayu
Tak Sehangat Telapak Tanganmu
Yang Membelai Hatiku Dengan Kasih Sayangmu
Selat Yang Memisahkan Kita
Sunyi Tampa Bintang Kejora
Ku Serahkan Ketulusan Cinta Suci
Asmara Yang Kita Idamkan Ini
Dibayangi Suasana Sunyi
Mahligai Indah Yang Yang Kau Bina
Tak Tercapai Oleh Tanganku
Antara Kilauan Di Air Biru
Wajahmu Sayut Tersiksa
Oh.. Tuhanku
Satukanlah Hati Yang Setia
Sampai Bila Aku Harus Menanti
Percintaan Yang Menghukumku
Karena Tiada Lagi Duanya
Ku Serahkan Kepadamu Tuhan...!! !

Semoga berhasil dan bermanfaat dalam memperindah blog Sampean!