04 September 2010

Tutorial Mencantikkan Blockquote

Salam.....HI semua, hari ni aku rajin nak buat tutorial hehehe....maklum ler taim2 cuti ni semangat aku nak buat itu ini wewewewe....Tau kan apa tu blockquote, kalau yang tak tau tu blockquote adalah tanda "  " yesssssss pandai korang....oklah aku nak ajar macam mana nak bagi gempak lagi blockquote tu...jom terjah!

1. dashboard pegi ke pegi ke layout ==> Edit HTML ==> tick Expand Widget Templates


2. then ctrol + f , cari word  .post blockquote { highlite semua word bawah ini
.post blockquote { margin:1em 20px; } 
3. Sini ada beberapa contoh blockquote style
contoh 1 :
background
.post blockquote { border-top: 1px solid #FF82AB;
border-left: 1px solid #FF82AB; border-right: 2px solid #FF82AB;
border-bottom: 2px solid #FF82AB;
background: #ffffff;
margin: 6px 20px 6px 20px;
padding: 8px 8px 8px 8px;
font-size: 1em;
font-style:italic;
line-height:1.4em;
}
contoh 2 :
background
.post blockquote {
border:1px dashed #DC143C;
background: #EEE0E5;
margin: 6px 10px 6px 10px;
padding: 8px 8px 8px 8px;
font-size: 1em;
font-style:italic;
line-height:1.4em;
}
contoh 3 :
background
.post blockquote {
color:#EE9A00;
border:5px dotted #000000;
background: #ffffff;
margin: 6px 6px 6px 6px;
padding: 8px 8px 8px 8px;
font-size: 1em;
line-height:1.4em;
}
contoh 4 :
background
.post blockquote {
color:#00CED1;
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #ffffff;
margin: 6px 0px 6px 0px;
padding: 8px 8px 8px 8px;
font-size: 1em;
line-height:1.4em;
}
untuk pengetahuan korang saja jangan bubuh dalam coding yer :
solid adalah garisan lurus. contoh ___________
dotted adalah garisan titik² contoh .........................
dashed adalah garisan putus² contoh _ _ _ _ _ _ _
margins (jarak antara kotak dan post content)
padding (jarak antara quote text dan borders)

KALAU anda tak jumpa code blockquote, jangan risau, anda boleh terus copy code yang di beri dan paste kan dia sebelum
]]></b:skin>
jangan lupa save yer.....dahhhh siap cmne cantik tak hehehe....kalau xjadi mai habaq kat ceq....

creadit liyana & blogbulk

4 comments:

  1. wah...ilmu ne...huhu...thankz...lets following yer..

    ReplyDelete
  2. hye..
    nak tnye..cmne nak wat tulisan dalam kotak ni?..ajar boleh?..

    ReplyDelete
  3. @FaTmaLiYaNa kotak komen ea...tengok kat sini yer http://sharingland-lyza.blogspot.com/2010/10/tutorial-nak-cantikkan-ruangan-komen.html

    atau

    cari code dibawah

    #comments-block{
    margin:0;
    padding:0;
    }
    #comments-block .comment-author{
    background:black; <--- tambahkan code ni ( kaler boleh la letak apa2 kaler yg anda suka...kalau xbole jugak bgtau yer...semoga berjaya)

    ReplyDelete