Four blockquote style

Mau Dong!

Hi! Fathya mau mosting luage... lanjut aja yang kepo, yang gak kepo bicara-bicara aja sendiri disini (wkwkwk canda gaes XP) Btw, itu pandanya lucu ya? itu namanya Gluttony, katanya kak fia, orangnya ganteng. (aku juga bilang gitu seh..) Udah ah, skip!
Ada yang tau blockquote? yang gak tau, aku kasih preview nih 👇👇

Ini yang namanya blockquote. Mau? yang mau, ikuti tutonya!

Template designer.

search guna ctrl dan F tekan dalam satu masa...
1. search perkataan    blockquote    ada tak? kalau tak ada search perkataan
  / * posts   kalau tak ada jugak pilihlah yang lebih kurang macam kod tu...

Classic template

1. search perkataan   blockquote {   atau yang lebih kurang macam tu...

2. kemudian padam semua kod blockquote dibawahnya...
kalau tak ada perkataan blockquote tadi paste code blockquote yang saya bagi nanti bawah 

/ * posts_ _ _ _ _ _


Style pertama :
demo tekan sini

blockquote{

border-left: 20px solid #C2E0FF;

border-right: 2px solid #C2e0ff;

border-radius:10px;

border-top: 2px solid #C2E0FF;

border-bottom: 2px solid #C2E0FF;

background:#F0F5FF;

padding :4px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

blockquote:hover{

border-left: 2px solid #C2E0FF;

border-right: 20px solid #C2E0FF;

border-top: 2px solid #C2E0FF;

border-bottom: 2px solid #C2E0FF;

background:#ffffff;

background-position:bottom right;

background-repeat:no-repeat;

padding :4px;]

-webkit-box-shadow: 0px 0px 12px #99CCFF;

-moz-box-shadow:    0px 0px 12px #99CCFF;

box-shadow:         0px 0px 12px #99CCFF;

}

Style kedua :

blockquote{

border: 2px dashed #FFC2D6;

background:url(http://i.imgur.com/l5ROw.png);

padding :4px; 

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

blockquote:hover{

border: 2px dashed #FFC2D6;

border-radius:20px;

}

Style ketiga :

blockquote{

border: 3px solid #ccc;

background:#F0F0F0;

padding :4px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

blockquote:hover{

background-image:url(http://i11.photobucket.com/albums/a168/evelynregly/

minigifs/teddybear1.gif);

background-position:bottom right;

background-repeat:no-repeat;

border: 3px ridge #ccc;

-webkit-box-shadow: 0px 0px 12px #b2b2b2;

-moz-box-shadow: 0px 0px 12px #b2b2b2;

box-shadow: 0px 0px 12px #b2b2b2;

}

style keempat :

blockquote{

border: 6px solid #EBD6FF;

border-radius:10px;

background:#F5EBFF;

display:block;

padding :4px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

blockquote:hover{

border-left: 2px solid #EBD6FF;

border-right: 10px solid #EBD6FF;

border-top: 2px solid #EBD6FF;

border-bottom: 10px solid #EBD6FF;

-webkit-box-shadow: 0px 0px 12px #DBB8FF;

-moz-box-shadow:    0px 0px 12px #DBB8FF;

box-shadow:         0px 0px 12px #DBB8FF;

}

warna dan background tukarlah sesuka hati

cara guna blockquote :

Dashboard --> new post

Yang pembuka kata tu blockquote...

Cara nak guna:

Highlight perkataan yang nak di blockquote-kan dan tekan pada simbol

blockquote atas tadi...

CREDIT: kawaiilady.blogspot.com