Tutorial : Cara Membuat & Menghias Blockquote

Assalamualaikum!
Hai korang.

Korang tengah buat apa tu? Aku tengah design blog.
So, berdasarkan blog aku yg lepas, aku nak ajar korang cara untuk mencantikkan blockquote.

Tapi, first of all,
Korang mestilah kena tahu apa benda blockquote tu.
Kalau korang dah tahu, dipersilakan untuk skip.

Blockquote.
Block? Kotak.
Quote? Alaa yg tanda "..." tuu!

So, katakanlah korang nak post sesuatu entri.
Then, misalnya korang mengarang cerpen ke. Or korang tengah bercerita ke.
Mesti korang ada masukkan dialog seseorang kan?

So bila korang nak tulis dialog/apa2 jelah dalam blockquote, korang enter dulu untuk selang sebaris.
Pastu korang tulislah apa2 yg korang nak tulis.

And lastly, highlightkan dan klik pada lambang quote tu.
Pastu jangan lupa untuk enter once again sebelum korang sambung tulis benda yg korang tak nak quote kan.

Faham dah? Alhamdulillah.

Next, aku nak share cara untuk mencantikkan/mencomelkan/melawakan kotak a.k.a blockquote tu.
This style we called it as flash blockquote.
Lepas korang dah buat nanti baru korang faham kenapa aku namakan macam tu.

HAHA.

Okay, let's do it now.

1. Dashboard - Theme - Edit HTML - ctrl + F

2. Search :

.post-body {

3. Bila dah jumpa, korang copy yg bawah ni.

.post blockquote {
background: #000000;;
    -moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
    padding: 6px;
    Border: 2px dashed #000000;
    margin:1em 20px;
    }
.post blockquote:hover {
background: #000000;
-moz-box-shadow: 0 0 2px 2px #000000;
-webkit-box-shadow: 0 0 2px 2px #000000;
box-shadow: 0 0 8px 5px #000000;
    -webkit-transition-duration: 2.0s;
 }

4. Lepas copy, korang paste dekat atas perkataan di Step 2.

5. Belum habis lagi!!! Korang kena tukar dulu warna :

MERAH : warna background sebelum kena cursor
UNGU : warna border
BOLD : jenis garisan border
BIRU : warna background bila kena cursor
PINK : warna shadow di sekeliling border bila kena cursor

***Cari kod warna di SINI
***Jenis garisan : solid | dashed | dotted

6. Dah siap ubah? Korang boleh PREVIEW dulu.

7. Takde error? SAVE !!

Alhamdulillah. Tahniah kepada yg berjaya.
Kepada yg tak berjaya pula, maaf.
Mungkin codes ni tak sesuai untuk template korang.

____________________________________________________________

PERHATIAN :

Saya tidak bertanggungjawab atas sebarang kerosakan pada laman web anda.
Terima kasih.