Membuat Blockquote (CSS3)

Blockquote - Blockquote dalam tiap template berbeda beda tampilanya, ada yang sudah dilengkapi dan ada juga yang belum. jika anda ingin menambah/merubah blockquote ini tidak ada salahnya untuk menggantinya dengan yang lebih bagus. Dari tampilan berbeda untuk yang akan kita buat kali ini namun fungsinya tetep sama. Seperti apa tampilan blockquote kali ini? Langsung Nyebur ke HTML Mode deh...

Blockquote Hover

1. Masuk Blogger seperti biasane
2. Pilih Rancangan/Design
3. Pilih EditHTML dan Centang "Expand Template Widget"
4. Cari kode  ]]></b:skin>
5. Copy kode di bawah ini, Lalu Letakkan di atas kode ]]></b:skin>

blockquote {
padding: 10px;
margin: 10px 0 10px 20px;
background-image: url(http://i264.photobucket.com/albums/ii184/aandfx/bgBloquote.png);
font: 13px/17px Serif, Times, Helvetica;
font-style: italic;
color: #FFCC99;
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.bopen, blockquote span.bclosed {
float: left;
margin-right: 5px;
height: 17px;
width: 22px;
background: url(http://i264.photobucket.com/albums/ii184/aandfx/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.bclosed {
float: right;
margin-left: 5px;
margin-right: 0;
background: url(http://i264.photobucket.com/albums/ii184/aandfx/Blockquote-R.png) right top no-repeat;
}
blockquote:hover span.bopen, blockquote:hover span.bclosed {
-o-transform: rotate(1090deg) scale(1.1);
-moz-transform: rotate(1090deg) scale(1.1);
-webkit-transform: rotate(1090deg) scale(1.1);
}

6. Save

Catatan :

anda harus menghapus kode blockquote yang lama terlebih dahulu
Untuk melihat hasilnya tentunya anda harus membuat postingan lalu gunakan blockquote, setelah itu anda pratinjau/preview terlebih dahulu. Selamat Mencoba semoga berhasil..