Tutorial : Type of Blockquote

Hmm , banyak sangat jenis blockquote yang menjadi tarikan aku... Jadi untuk share dan ajar korunk.. aku gabungkan semua jenis-jenis blockquote yang ada... , senang korunk nak membanding beza apa yang korunk suka dan tertarik ! :D

so , lets follow this tuto.. step by step okeyh ? :))

1. Dashboard --> Template --> Edit Html --> Proceed --> Tick Expand Widget

2. tekan Crtl+F secara serentak untuk cari kod

Simple Template

]]></b:skin>

Copy code blockquote bawah ini dekat atas ]]></b:skin>

Wash Denim

.post blockquote {

Gantikan code tersebut dengan :

4. Copy code bawah.

Blockquote #1(Hover) : Live Preview

blockquote {

background:url(URL IMAGE)repeat; padding:5px;

Border:2px solid #F7BE81;

colour:#000;-webkit-transition: 2s;

-moz-border-radius: 1em 4em 1em 4em;border-radius: 1em 4em 1em 4em;

}

blockquote:hover {

background: url(URL IMAGE) repeat;

border:2px solid #A9BCF5;

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

}

Blockquote #2(Rotate) : Live Preview

blockquote {

background:url(URL IMAGE)repeat; padding:5px;

border:2px ridge #DA81F5;

colour:#000;-webkit-transition: 2s;

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

}

blockquote:hover {

background: url(URL IMAGE) repeat;

border:2px dashed #F5BCA9;-moz-transform: rotate(-2deg);-webkit-transform: rotate(-3deg);

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

}

Blockquote #3(FlashCuteIcon) : Live Preview

blockquote {

background:url(URL IMAGE)repeat; padding:5px;

border:1px solid #74DF00;border-left:10pt double #74DF00;

padding: 3px;border-bottom-left-radius: 10px;border-top-left-radius: 10px;

}

blockquote:hover {

-webkit-transition-duration: 2.5s;

background-image:url(URL ICON);

background-position:bottom right;

background-repeat:no-repeat;

border:1px dashed #000000;border-right:10pt double #000000;

}

Blockquote #4(Shadow) : Live Preview

blockquote {

-moz-border-radius: 25px 10px / 10px 25px;border-radius: 25px 10px / 10px 25px;-webkit-box-shadow: rgb(255, 0, 64) 0px 0px 30px;

background-color: #fbeff2; border-left-color: rgb(250, 88, 130);

border-left-style: solid; border-left-width: 2px; border-top-color:

rgb(250, 88, 130);

border-top-style: solid; border-top-width: 2px;

padding : 7px;

}

blockquote:hover {

-webkit-transition-duration: 2.5s;

background-image:url(URL ICON);

background-position:bottom right;

background-repeat:no-repeat;

border:2px double #F5A9E1;border-right:10pt double #F5A9E1;

}

 EDIT :

ABC : Image Url , etc :background: url(background url)  / background: #FFFFFF; , kod warna sini

ABC : boleh tukar ke solid > double > dashed. warna border sini

ABC: Bentuk border

ABC : Url Icon

5. Preview and save ! :))

Choose one of them okeyh ! ! :) If working .. tell me , noona ..

Cara nak guna blockquote 

Macam biasa buat entry, pastuu highlightkan text yang hangpa nak masukkan quote tuu. Pastuu tick kotak quote dekat atas box entry tuu . Tengok gambar bawah nih yerr .

Good Luck ! :)