Tutorial : Kotak Blockquote
Hai semua. Pagi-pagi ni rasa semangat pulok nak update entry yang tak seberapa ni :) Hah, ada orang send dalam chat box Tika. Dia tanya lebih macam ni lahh
Blogwalking Nak tanya, macam mana Tika buat kotak dalam entry tu?
Tau tak apa tu? Macam gambar dekat bawah ni
Untuk Blogskin
1. Pergi -> Template
2. Then tekan CTRL + F serentak dan cari kod blockquote {
3. Kemudian, delete kod yang ada kaitan dengan blockquote dekat bawah dia
4. Pastekan kod bawah ni dekat bawah kod blockquote { tadi
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 350ms;
color:#000000;
font:12px Verdana;
padding:5px;
border-right:5px #FAAFBE solid;
border-left:5px #FAAFBE solid;
text-align:left;
opacity:1;
}
blockquote:hover {
background:#FDEEF4;
text-align:center;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 350ms;
color:#000000;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-right:4px #C38EC7 solid;
border-left:4px #C38EC7 solid;
}
Merah : Warna sisi blockquote sebelum dihalakan cursor. Tukarkan dekat sini
Hijau :Warna blockquote selepas dihalakan cursor.Tukarkan kat sini
Untuk Template
1.Pergi ke Dashboard > design > edit HTML > tick Expand Widget Templates
2.Cari kod .post blockquote {
3.Highlightkan kod kat bawah ni
.post blockquote {margin:1em 20px;}
4.Tukarkan dengan kod ni
.post blockquote {
background: #FF0080;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 1px solid #000000;
margin:1em 20px;
}
Merah : Tukarkan dekat sini
Cara buat kotak blockquote di post
1. Dah sudah tadi kan? Then, update la ape korang nak dan highlight kan words, time edit post tu, pastu tekan " kat bahagian atas macam ni:
2. Kemudian, tekan
3. Okay, dah sudahh!