Four blockquote style

Assalamualaikum...ini post pertama saya dalam bulan disember... ^^, kali ni saya nak share empat style blockquote...tau tak blockquote tu apa?

Inilah dia blockquote...kotak pada tulisan nie...haa...nak buat jugak?? ikut tutorial nie...

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...kod warna disini

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