Tutorial : Cantikkan Blockquote

Assalamualaikum w.b.t :)

Uolls tahu tak blockquote tu apa benda? Kalau tak tahu,

Ini lah yang dinamakan blockquote.

Alah yang biasa orang letak code dalam tutorial tu, tulah blockquote namanya. Macam mana nak apply blockquote on certain words dalam entry ya? Klik gambar untuk lihat lebih jelas.


In case kalau uolls tersalah blockquote ke ataupun memang saja terasa malas pulak nak letak ayat dalam blockquote ke apa ke, uolls klik je dekat sebelah blockquote button tu untuk format balik. Klik yang dalam bulatan tu (dalam gambar). JANGAN klik blockquote lagi pulak. Nanti blockquote uolls tu bukan hilang, tapi jadi double ataupun lebih teruk triple. Hahaha. 

Okaylah okaylah, banyak cakap pulak kan. Ok now, macam mana nak cantikkan blockquote tu ya? Macam ni cara dia, follow step by step ok.

1. Dashboard > Template > Edit Html.
2. Click Ctrl+F serentak untuk cari code ni.

]]></b:skin>
3. Dah jumpa? Then, copy code bawah ni pulak and pastekan DIATAS code ]]></b:skin> tadi.

blockquote {
-moz-border-radius: 25px 10px / 10px 25px;border-radius: 25px 10px / 10px 25px;-webkit-box-shadow: #F5A9F2 0px 0px 30px;
background-color: #FFFFFF; border-left-color: #000000;
border-left-style: solid; border-left-width: 2px; border-top-color:
#000000;
border-top-style: solid; border-top-width: 2px;
padding : 7px;
}
blockquote:hover {
-webkit-transition-duration: 2.5s;
background-image:url(URL IMAGE);
background-position:bottom right;
background-repeat:no-repeat;
border:2px double #000000;border-right:10pt double #000000;
}
Nota kaki:

PINK : warna kesukaan uolls. Klik sini untuk Kod Warna.
BIRU : URL icon yang cute. FREEBIES HERE.
HIJAU : in case kalau taknak double border, juast buang aje perkataan double tu. Ataupun boleh letak solid/dashed/dotted.

4. Preview dulu baru Save. Yay!

1 comment:

  1. Opps, blog saya takde blockquote. Hehehe Thanks for sharing, dear =) Rajin dia buat tuto =)

    ReplyDelete