Monday 7 January 2013

Cara Buat Kotak Blockquote yang Cantik


Assalamualaikum semua. Tadi kita dah belajar macam mana nak buat blockquote. Sekarang kita nak belajar macam mana nak cantikkan blockquote tu. Nak belajar? Jom..

Cara 1 :
1  Pergi ke Template > Edit HTML > Proceed > Tick Expand Widget Template.
2. Cari kod ini (tekan "ctrl + F) : 

.post-body {

 3. Copy dan paste kan kod  ini di atas kod tadi :
.post blockquote { background-image:url(URL GAMBAR BACKGROUND BLOCKQOUTE); -moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px; padding: 6px; Border: 3px solid #FF0080; margin:1em 20px; }

 4. Yang warna merah tu gantikan dengan apa yang patut.(URL Gambar Background, Saiz               Border dan Kod Warna)
5. Preview dulu. Save kan kalau dah jadi.

__________________________________________________________________________________________________________________________________________________________

Cara 2 :
1. Login ke Blogspot, klik design/ layout > Edit HTML 
2. Lepas itu, sila cari code di bawah.. gunakan Ctrl F untuk memudahkan pencarian.

.post blockquote {
3. Kalau dah jumpa, copy dan paste kan pula kod ini di bawah kod tadi :
 background: url(URL image);

border-top: 1px dashed #000000;

border-left: 1px dashed #000000;

border-right: 1px dashed #000000;

border-bottom: 1px dashed #000000;
4. Tukarkan URL image tu kepada URL image yang dipilih.
5. Dah siap? Preview dulu kalau jadi save kan! (1 px , dashed dan #000000 tu boleh tukar         sendiri.)


__________________________________________________________________________________________________________________________________________________________

Cara 3 :
1. Sila Klik Dashboard - Design - Edit HTML.
2. Tick pada kotak Expand Widget Templates.

3. Tekan "ctrl + F" dan cari kod ini :


.post blockquote {
    margin:1em 20px;

    }

 4. Gantikan kod tadi dengan kod ini :

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

 5. Warna merah tu boleh gantikan dengan kod warna lain atau kalau nak letak gambar       background, gantikan kod merah tu dengan kod ini :


 background-image:url(URL GAMBAR BACKGROUND BLOCKQUOTE);

Tutorial ni kredit to Anis Syazwani . Kalau tak faham tolong beritahu saya di kotak comment. Kalau ketiga-tiga cara tu tak menjadi, saya minta maaf sebab saya memang betul-betul dah tak boleh nak tolong. Kod warna boleh dapat di SINI. Background yang cantik boleh dapat di SINI. Sekian, terima kasih.