Kotak Oren comel atau blockquote.

Assalamualaikum and Hai.

First of all mau cakap, Apa Khabar kawan kawan blogger yg comil² dan hensem²?

Macam mane cuti hujung minggu? 

ohh.. dua hari tak hapdet blog. hek hek

bukan malas, tapi tak rajin. ;p

Okeyy, hari ni nak buat tutorial lagi.

Bukan nak berlagak ke apa. Orang mintak tolong.

Tak salahkan kita ajarkan. Dapat pahala. auuww~

 amoi yg gojess bertanya.

okey, kotak² oren tu di panggil blockquote.

macam ni. yang korang tengah tengok ni.
here goes the tutorial. :D

macam biasa pergi,

• Dashboard > Layout/Design > Edit HTML 
(BACKUP TEMPLATE dulu, nanti tak jadi nanges tak berlagu pulak.)
• Tekan CTRL+F dan cari kod bawah ni :

.post blockquote {
ATAU
blockquote

pastu akan jumpa code ala ala macam ni :

.post blockquote {

margin:1em 20px;
}

hightlight je semua code tu, gantikan dengan code ni :

.post blockquote {
background: #FFB380;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
padding: 6px;
Border: 3px solid #e06666;
margin:1em 20px;
}

okeyy, ada penerangan sikit,

.post blockquote {
background: #FFB380; (ini background color,ubah color lain SINI.)
 
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px; (ini bentuk border, hanya yang guna mozilla saje berfungsi. Tak caye? cuba view blog ni guna mozilla.)
 
padding: 6px; (tak payah usik.)

Border: 3px solid #e06666; (ini ketebalan dan garisan border.)
- tebal/nipis border boleh ubah di 3px. sila buat eksperimen sendiri.
- garisan border boleh ubah di solid.
ini contoh :
solid,garisan lurus.  ___________
dotted,garisan titik².  ................
dashed, garisan putus².  _ _ _ _ _ _ _


ada lagi: double, groove, ridge, outset, inset : buat eksperimen sendiri. ;p

 
margin:1em 20px; (tak payah usik)
}


dah puas hati, save saje.

macam mane nak guna?

pergi create New post, tulis saje ape ape
hightlightkan dan tekan 

ini contoh.

-Kalau tak jumpa code:

.post blockquote {
ATAU
blockquote

 Sila Ctrl + f, dan cari ]]></b:skin>

copy je code yang dah di beri dan paste sebelom  ]]></b:skin>

 Itu saje. 

p/s: Banyak gila blockquote kat entry ni. haha

Waktu korang korang baca entry ni, 

nadd sedang di ulit mimpi basah indah.

 Gua tak sihat lah.

DEMAM. :'( tsk tsk

TAMBAHAN.

Disebabkan ade budak budak comel yg manja bawah ni tanya,

so nak update sikit, :D

blockquote dengan background, just tambah :
background-image:url (Image URL);



macam ni :


 .post blockquote {
background-image:url (Image URL);
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
padding: 6px;
Border: 3px solid #e06666;
margin:1em 20px;
}

so, sini ade beberapa background comel kot?

copy je code tu. :)

http://i465.photobucket.com/albums/rr19/karrinaxsmile/Background%20music/wall_grey.gif

http://i234.photobucket.com/albums/ee284/ohbaby3425/patterns.jpg

http://dl3.glitter-graphics.net/pub/2725/2725413buoul6giov.gif

http://dl9.glitter-graphics.net/pub/2728/2728019krp8i2239s.jpg

http://dl6.glitter-graphics.net/pub/606/606506ynkjl9iq9c.gif

http://dl2.glitter-graphics.net/pub/2731/2731612wdjmgdstyl.jpg

for more kawaii background pergi sini dan sini juga. :)

UPDATE FOR TEMPLATE DESIGNER.

1. pergi dashboard >> klik design >> klik Template designer.
2. cari :
3. pastu copy code yg dah bagi kt ats tu,then cari "Add CSS" pastekan kat situ. (tengok gamba)

SIAP! untuk template designer ni tak sure boley letak background ke tak. boleh test sendiri. =)

okey, Bai <3

Tweet ♥