Blockquote Full tutorial

 안녕하세요 친구들✌(✿◠‿◠)....

This tutorial is derived from jombinablog

Blockquote

Apakah "Blockquote"? "Blockquote" digunakan untuk menunjukkan petikan teks/perenggan daripada sumber yang lain atau dari entri post-post anda yang lama."Blockquote" juga digunakan untuk menunjukkan satu petikan atau kata-kata yang hendak di'tekan'kan kepada pengunjung sesebuah blog. Contoh:

Cara nak buat Blockquote:

1) Buka new post

2) Taip entri post macam biasa, kemudian bila ada petikan atau perenggan yang nak dihighlightkan sebagai blockquote, klik ikon quote:

3) Klik preview untuk lihat hasilnya.

Simple Template - Letak Kotak Pada Blockquote

Preview:

Sebelum ini ada ditunjukkan cara macam mana nak letak kotak berwarna pada petikan blockquote. Tutorial kali ini akan menunjukkan pada anda  cara nak letak background bergambar pada petikan blockquote di blog. Ikuti tutorial di bawah step by step.



1) Sign in akaun blogger



2) Dashboard > Design > Edit HTML 



3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod ini

.post blockquote {

4) Kemudian copy dan paste kod ini SELEPAS / DI BAWAH kod.post blockquote { tadi

background-image:url(url gambar background);

url gambar background - letakkan url gambar background yang anda mahu. Gambar-gambar background anda boleh search di siniatau sini. Cara nak dapatkan url gambar pula, rujuk tutorial ini. 



5) Bila dah selesai masukkan url gambar dalam kod tersebut, klik preview dan jika tiada error, klik save template.

Letak Kotak Berwarna Pada Blockquote

Entri sebelum ini ada menerangkan apakah yang dimaksudkan dengan Blockquote.
Kebiasaannya default warna background Blockquote adalah putih. Ok
tutorial kali ini akan menunjukkan pada anda cara nak letak kotak
berwarna pada petikan Blockquote.



* Kepada pengguna simple template, sila rujuk tutorial ini untuk cara letak kotak pada petikan blockquote.



1) Sign in akaun blogger



2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Template"



3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod  

]]></b:skin>

4) Kemudian copy paste kod di bawah sebelum kod ]]></b:skin> tadi

.post blockquote {

background:#FFCCCC;

padding: 5px;

Border: 2px dashed #FF0099;

moz-border-radius: 25px 10px / 10px 25px;

border-radius: 25px 10px / 10px 25px;

colour:#FF0099;

}

Rupa kod korang akan jadi camni:

.post blockquote {

background:#FFCCCC;

padding: 5px;

Border: 2px dashed #FF0099;

moz-border-radius: 25px 10px / 10px 25px;

border-radius: 25px 10px / 10px 25px;

colour:#FF0099;

}

]]></b:skin>

Nota:

FFCCCC - warna background kotak blockquote. Rujuk kod warrna di bawah

2 - ketebalan garisan border kotak

dashed  - style garisan border. Sama ada dashed, solid atau dotted

solid adalah garisan lurus, ___________

dotted adalah garisan titik-titik,  …………………….

dashed adalah garisan putus-putus, _ _ _ _ _ _ _

 FF0099 - warna garisan border. Rujuk kod warna di bawah

Kod warna purple - bentuk kotak border. Anda boleh pilih di sini

Simple Template - Letak Kotak Pada Blockquote

Preview:

Bagi yang tak tahu apa itu Blockquote, rujuk di sini. Tutorial kali ini akan menunjukkan pada anda cara untuk meletakkan kotak pada petikan blockquote dalam blog anda.



Caranya:



1) Sign in akaun blogger



2) Dashboard > Design > Edit HTML



3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod ini

/* Headings

4) Kemudian copy dan paste kod ini SELEPAS / DI BAWAH kod /* Headings tadi

.post blockquote {

background:#FFCCCC;

padding: 5px;

Border: 2px dashed #FF0099;

moz-border-radius: 25px 10px / 10px 25px;

border-radius: 25px 10px / 10px 25px;

colour:#FF0099;

}

Nilai yang anda boleh adjust dalam kod di atas

FFCCCC - warna background kotak blockquote. Rujuk kod warrna di bawah

2 - ketebalan garisan border kotak

dashed  - style garisan border. Sama ada dashed, solid atau dotted

FF0099 - warna garisan border. Rujuk kod warna di bawah

Kod warna purple - bentuk kotak border. Anda boleh pilih di sini

Efek senget apabila cursor menyentuh blockquote

Preview:





Tutorial kali ini akan menunjukkan cara macam mana nak buat efek senget pada Bloquote
apabila di sentuh cursor, seperti dalam preview di atas. Ikuti tutorial
di bawah step by step. Sebelum itu, kepada sesiapa yang tak tahu cara
nak pasang kotak pada petikan blockquote, sila rujuk tutorial ini atau untuk pengguna simple template, rujuk tutorial ini.



1) Sign in akaun blogger



2) Dashboard > Design > Edit HTML



3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

.post blockquote {

atau kod di bawah

blockquote:hover {

4) Copy kod di bawah dan paste SELEPAS / DI BAWAH kod yang korang cari di langkah 3 tadi

blockquote:hover {

-webkit-border-radius: 36px 12px;

-moz-border-radius: 36px 12px;

-webkit-transform: skew(1.deg,1.5deg);

-moz-transform: rotate(3deg);

-webkit-transform: rotate(3deg); }

border:2px dashed #000000;

-moz-border-radius-topleft: 10px;

-moz-border-radius-bottomright: 10px;

}

5) Klik preview, jika tiada error, klik save template.

Efek kotak shadow apabila cursor menyentuh blockquote

Efek kotak bayang-bayang akan muncul apabila cursor menyentuh Blockquote.
Pada bayang-bayang dan garis kotak border,  korang boleh tukar warna
mengikut citarasa sendiri. Menarik kan? jom cuba. Sebelum itu, kepada
sesiapa yang tak tahu cara nak pasang kotak pada petikan blockquote, sila rujuk tutorial ini atau untuk pengguna simple template, rujuk tutorial ini.



1) Sign in akaun blogger



2) Dashboard > Design > Edit HTML



3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

.post blockquote {

atau kod di bawah

blockquote:hover {

4) Copy kod di bawah dan paste SELEPAS / DI BAWAH kod yang korang cari di langkah 3 tadi

border:2px dashed #000000;

-moz-border-radius-topleft: 10px;

-moz-border-radius-bottomright: 10px;

-moz-box-shadow: 0 0 18px #FF3399 ;

-webkit-box-shadow: 0 0 18px #FF3399 ;

}

Nota:

000000  - warna garis border. Tukar kepada warna yang korang suka. Rujuk kod warna di bawah

FF3399 - warna bayang-bayang pada kotak. Tukar kepada warna yang korang suka. Rujuk kod warna di bawah