Cara Buat Blockquote CSS3: How to Create Blockquote using 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!

D E M O

Cara Membuat Blockquote dg CSS3

Kode CSS

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!

Brazil will expect another commanding performance from Thiago Silva when they take on Ukraine at Derby's Pride Park in an international friendly on Monday.<blockquote><span class="bbuka"></span>Before today you might not ever interested in using the blockquote, but from now maybe you can change your mind after seeing the beautiful blockquote built using CSS3. A blockquote charming with animation that fits perfectly with your own blog.
Built with a simple way of utilizing rounded Corners (CSS3 border radius), CSS3 text-shadow, CSS3 transition, transformation and 3 pieces of CSS3 background-image. Take a look below! Is not this a very interesting blockquote?!<span class="btutup"></span><blockquote>The 26-year-old Milan defender was in fine form in last Thursday's 3-0 win over Iran - especially important as his centre-back partner David Luiz had a poor game, obliging Thiago Silva to show off his excellent sense of cover.

In the World Cup, Thiago Silva was a reserve to the old firm of Juan and Lucio. Just three months later, he is the rock on which Brazil's defence is based, highlighting the speed of the generational change taking place under new coach Mano Menezes.

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).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 


• 

» Happy Blogging - gubhugreyot «