Saturday, December 11, 2010

Tutorial: Background untuk Sidebar Title


Assalamualaikum..

Background Sidebar Title di blog boleh di tukar. macam mana nak tukar? boleh ikut tutorial di bawah ni

ape tu sidebar title? ni ha macam kat bawah ni:


Yang ditandakan dengan anak panah tu la sidebar ok =)

Step 1: Dashboard ---> Design ---> Edit HTML

Step 2: Cari code h2 { dengan guna CTRL+F

Step 3: Copy code di bawah dan letakkan di bawah code h2 {

background:url(URL IMAGE);
border: 2px solid pink;
line-height: 28px;
-webkit-border-radius: 10px;
text-align: center;

* URL IMAGE tukar dengan URL yang korang nak.
* border boleh tukar dengan kaler yang korang nak.
* line-height pon boleh tukar. ikut korang la image sidebar tu nak tinggi mana. tapi 28px ok dah kot.

Nota:
Kalau tak nak ade image dan nak ade kaler je tukar je background tu macam bawah ni:

background: code color;
* Perkataan code color tu boleh tukar dengan code color yang korang suke. contoh macam bawah ni:

background: #FF00FF;
Nak cari code color boleh tekan SINI.



Terima Kasih sudi baca,jangan lupa baca lagi ^_^

Thursday, December 9, 2010

Tutorial: Cantikkan Blockquote.

Assalamualaikum..

Kali ni nak kongsi tutorial macam mana nak cantik kan blockquote yang ada. kalau yang asal mesti plain/kosong je kan. meh kite kasi ade kaler dan ade background yang cantik.

Sebelum tu nak kenalkan blockquote tu ape.


Tulisan di highight dan tekan blockquote yang ditunjukkan oleh anak panah. dan hasil nye macam di bawah:
Ok dah paham kan ape tu blockquote. Jom ikot step di bawah.

Step 1: Dashboard ---> Design ---> Edit HTML ---> Tick, Expand Widget Template

Step 2: Cari code ]]></b:skin> (kalau nak senang tekan CTRL+F dan paste kan code tadi.

Step 3: Dah jumpa code tadi copy code di bawah dan paste kan code tu di atas code ]]></b:skin>

.post blockquote {
 background-image:url(URL IMAGE);
 -moz-border-radius-topleft: 10px;
 -moz-border-radius-bottomright: 10px;
 -webkit-border-radius: 10px;
 padding: 5px;
 Border: 2px solid #000000;
 margin:1em 20px;
}
Sila tukar URL IMAGE dengan URL yang anda mahukan. Contoh URL IMAGE di bawah:

('http://content.mycutegraphics.com/backgrounds/pink/pink5.gif')

('http://content.mycutegraphics.com/backgrounds/pink/pink7.gif')

('http://www.mycutegraphics.com/backgrounds/flower/flowerbg21.gif')

*kalau tak nak ade image, bole tukar untuk jadi berwarna saje. contoh code macam di bawah:

.post blockquote {
 background: #pink;
 -moz-border-radius-topleft: 10px;
 -moz-border-radius-bottomright: 10px;
 -webkit-border-radius: 10px;
 padding: 5px;
 Border: 2px solid #000000;
 margin:1em 20px;
}

Step 4: Cuba preview, kalau jadi boleh save.





Terima Kasih sudi baca,jangan lupa baca lagi ^_^