Tutorial Cute Blockquote With Hover

Assalamualaikum and Hello to Readers !
Malam ni ungu nak buat tutorial pasal blockquote
nak tahu ape itu blockquote ???
Contoh macam bawah ni . comel tak ? hee (:

Ini adalah blockquote !

oke paham ?
Fungsi Blockquote ni sebenarnya untuk korang nak letak code dalam entry 
atau nak buat notes ke ape boleh jugak
Sapa-sapa yang bercadang nak buat tutorial kat blog 
wajib ade benda ni ! :D
oke, jom MULA !


Untuk Kotak Blockquotes


1. Pergi kat Dashboard > Design > Edit HTML > Tick Expand Widget Templates
2. Tekan Ctrl + F and cari code di bawah ni

.post blockquote {

3.  Tekan Ctrl + C atau copy code di bawah ni 

background:url(URL IMAGE);
border-top: 2px dashed #000000;
border-left: 4px solid #000000;
border-right: 4px solid #000000;
border-bottom: 2px dashed #000000;
padding: 6px;
margin:1em 20px;
colour:}

PETUNJUK:
merah : Background kotak blockquote korang
biru : Saiz border kotak blockquote tuh . 
ungu : Jenis border kotak yang korang nak . Nak tiru macam kat atas tuh pon takpe
pink : Warna border kotak tuh . Boleh pilih warna kat SINI
4. Paste kan di bawah code .post blockquote { tadi.


Untuk Hover die pulak

1. Ikut step 1 and step 2 di atas
2. Copy code di bawah ni

blockquote:hover {
background: url(URL IMAGE)
repeat right bottom ;
border-top: 3px solid #000000;
border-left: 2px dashed #000000;
border-right: 2px dashed #000000;
border-bottom: 3px solid #000000;
margin:1em 20px;
}

PETUNJUK: 

merah : Background hover blockquote korang

biru : Saiz border kotak blockquote tuh . Makin besar nombor, makin tebal (:

ungu : Jenis border kotak yang korang nak . Nak tiru macam kat atas tuh pon takpe

pink : Warna border kotak tuh . Boleh pilih warna kat SINI

Kat bawah ni ungu ade sediakan link untuk background hover yang korang boleh pilih (:

http://dl5.glitter-graphics.net/pub/590/590935ankbyj1xx4.gif





http://dl7.glitter-graphics.net/pub/474/474167l68h9nknqq.gif

http://dl.glitter-graphics.net/pub/590/590941r351ykwhz6.gif





http://dl6.glitter-graphics.net/pub/590/590966tdltan40f8.gif

3. Pastekan dibawah code step 2 di atas tadi 

4. Edit, Preview and Save !


So bile nak buat blockquote kat post, ikut step kat bawah 

1. Tulis ayat yang korang nak blockquote kan 

2. Highlight kat ayat tersebut

3. Tekan button dalam bulatan pink macam kat atas tuh 

4. Ok siap ! (: Good Luck !

Sebelum terlupa, kalau korang tak jumpa .post blockquote { , Cari code ]]></b:skin>

and paste code semua tadi tuh kat atasnya (:

Kalau Tak Paham Silalah Tanya, Kalau Berjaya Silalah Komen (: