Efek Blockquote Unik

Ini tutorial untuk memberi efek Blockquote yang unik,, ketika kursor menyentuh blockquote dia akan bergerak miring dan berganti background serta muncul icon lucu yang menghiasi kotak blockquote nya,, Mau tau gimana ? coba aja sendiri    

Nih langkah-langkahnya :


1. Dashboard
2. Template
3. Edit HTML
4. Ctrl+F dan temukan kode .post-body { , jika sudah ketemu kurang lebih kodenya seperti ini kan ,

.post-body {

  line-height: 1.4;

  font-size: 110%;

  position: relative;

}

5. Ok , selanjutnya tempelkan kode berikut ini , dan letakkan dibawah kode di atas :

.post blockquote {

background-image :url(URL Gambar); padding: 5px;

Border: 2Px dashed #000000;

colour:#000000}

blockquote:hover {

background-color: #000000;

border:2px dashed #000000 ;

-webkit-transition-duration: 3.5s;

background-image:url(URL ICON);

background-position:bottom right;

background-repeat:no-repeat;

-webkit-border-radius: 36px 12px;

-moz-border-radius-topleft: 25px 10px/25px 10px;;

-webkit-transform: skew(1.deg,1.5deg);

-moz-transform: rotate(3deg);

-webkit-transform: rotate(3deg); }

Border: 2px dashed #00000;

-moz-border-radius-topleft: 25px 10px/25px 10px;

border-radius :25px 10px/25px 10px;

}

6. Jadi nanti letaknya akan seperti ini

.post-body {  line-height: 1.4;
  font-size: 110%;
  position: relative;
}
.post blockquote {
background-image :url(URL Gambar); padding: 5px;
Border: 2Px dashed #000000;
colour:#000000}
blockquote:hover {
background-color: #000000;
border:2px dashed #000000 ;
-webkit-transition-duration: 3.5s;
background-image:url(URL ICON);
background-position:bottom right;
background-repeat:no-repeat;
-webkit-border-radius: 36px 12px;
-moz-border-radius-topleft: 25px 10px/25px 10px;;
-webkit-transform: skew(1.deg,1.5deg);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg); }
Border: 2px dashed #00000;
-moz-border-radius-topleft: 25px 10px/25px 10px;
border-radius :25px 10px/25px 10px;
}

7. Sampai sini ngerti kan ? sebelum di Save, ganti beberapa kode yang harus anda ganti ,, sudah saya tandai kok :

Warna Hijau    : URL Gambar Background

Warna Ungu    : Kode Warna sesuai keinginan cari DISINI

Warna  Merah :URL gambar Icon , Iconnya yang akan muncul ketika kursor menyentuh kotak Blockquote.

dapat anda cari DISINI

8. Simpan Template dan lihat hasilnya..

Note :

Jika sebelumnya anda tela