Monday, November 01, 2010

TOTURIAL BLOG : Kotak Blockqoute





Assalammualaikum


Selamat tengah pagi :) hari ini cikgu nak mengajar anak anak murid cikgu buat kotak blockquote . eh eh ? ape itu kotak blockquote ya ? okey , mari belajar ya murid murid . cewahh , macam cikgu bagai plak kan ? haha . btw , i pun baru terer nak mencantikkan blog . wahh , bangga u all . sebelum neyh i jealous u all tengok blog blog syaitan orang yang cun melecun tuu . hahh ! sekarang i da berjaya menghasil kan blog yang cun melecun . amcam ? lawa tak blog i sekarang ? hehe , pinky gituu *winkwink* please laaaaaaaaaa cakap lawaaaaaaaaaa ! memakan beberapa saat hari untuk i mencipta blog yang sebigitu cantik tauu . pleaseela pujii , HAHAHA . eh eh ? ape u neyh alya ? kembali ke topic asal pleaseeee . apa itu kotak blockquote ? jeng jeng jengg ! saksikan !

*sila click image untuk tumbesaran yang lebih besar dan jelas*

ini lah kotak blockquote itu . cantik tak , cantik tak ? tak teringin nak buat ke hah ? hehe . jum follow step di bawah :)


1. firstly , dashboard u all pegy ke layout ==> Edit HTML ==> tick pada Expand Widget Templates .

2. then tekan ctrol + f pada keyboard anda and cari word .post blockquote { dan highlight semua word bawah ini ( tekan ctrl+c secara serentak untuk copy code )

post blockquote {
margin:1em 20px;


3. cut code di atas dan pastekan semua itu dengan code ini :

.post blockquote {
background: #FFCC99;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 1px solid #ff0d62;
margin:1em 20px;
}


4. sekarang kita belajar lebih lanjut ya :)


.post blockquote { background: #FFCC99; ( ini background belakang warna plain , contoh if u all nak background kale pink u all bole tukarkan codenye , u all boleh tukar code dekat sini ada macam macam code utuk change colour yang u all nak )

-moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px; ( ini adalah border dea , ta payah tukar lebih afdhal )

padding: 6px; ( tak perlu usik )

Border: 1px solid #ff0d62; ( ini border color merah . kalau nak tukar line dia tebal , tambah lagi 1 kepada 5 atau 10px )

solid adalah garisan lurus. contoh ___________
dotted adalah garisan titik² contoh .........................
dashed adalah garisan putus² contoh _ _ _ _ _ _ _

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



5. dah settle & save .

6 . pergi new post ==> then tulis lah sesuatu kemudian highlight semua word yang anda mahu bubuh kotak ini kemudian tekan ( yang dalam kotak warna merah tu )

*sila click image untuk tumbesaran yang lebih besar dan jelas*

7 . bagi yang nak background bercorak bunga , bintang and etc etc sila tukarkan code ( tekan ctrl+c secara serentak untuk copy code ) :

background: #FFCC99; ==> background: url(URL IMAGE);

credit to : Liana Lunia , maaf ya babe :)

SELAMAT MENCUBA !


2 comments:

  1. kak alyaaaa , yang tyme find tu kan , kenapa takde eh ? err

    ReplyDelete
  2. @muja

    try tekan ctrl+f
    kuar laa :)

    ReplyDelete