Tutorial 1 : Cara Membuat Kotak Blockquote

Tutorial 1 : Cara Membuat Kotak Blockquote

Salam Jumaat. 

Hari ini i nak share tuto utk blog..ouh dza akan cuba share yang terbaik yaaa hope u all faham..

Ok la tanpa berlengah lagi.dza akan ajar cara buat kotak blockquote.

Masih tak tahu blackquate ok..dza review..seperti gambar di bawah.

*info - kalau nak buat blockquote cuma highlightkan tulisan yang nak di blockquote dan tekan tanda seperti di bawah

yang kotak merah itu adalah blackquote

ni lah blackquate box...so meh sini dza ajarkan yang mana dza tahu je yeee 

---

  

CARA 1 : ( templete berbeza, so coding pun berbeza..harap maklum )

1.Login ke Blogspot, clik design/ layout > Edit HTML

2. Lepas itu, sila cari code di bawah.. gunakan Ctrl F untuk memudahkan pencarian

.post-body {

3. Sila Copy code di bawah dan paste kan di ATAS code .post-body { seperti yang u all cari 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. Code yang i warnakan MERAH, boleh la ditukar mengikut citarasa.

5. URL GAMBAR BACKGROUND BLOCKQOUTE boleh la direplace dengan URL u all

6. Save

---

CARA 2 :Memandangkan ramai yang tak boleh test cara di atas..so I akan ajar coding ini pula..sila ambil perhatian ye.. 

1.Login ke Blogspot, clik design/ layout > Edit HTML

2. Lepas itu, sila cari code di bawah.. gunakan Ctrl F untuk memudahkan pencarian

.post blockquote {

3.Copy dan pastekan code di bawah, di bawah  .post blockquote {

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. Sila letakkan URL anda di URL image 
5. 1px adalah ketebalan : lagi banyak nombor lagi tebal, dashed boleh diubah kepada solid atau dotted.
6. Save.. Sila tinggal komen selepas mencuba!!

---

CARA 3 ( Template Designer ) :Tak jadi ye??memandangkan  ramai yang memakaiTemplate Designer dan cara di atas mungkin sesuai untuk Minima Template.. Aku ajarkan cara ini pula.. Haaa ambikk sampai 3 sekali tutorial Kotak Blockquote. Semua ini sebab sayangkan reader la...Nanti LIKE2 la Fage aku tau..@___@


1. Sila Klik Dashboard - Design - Edit HTML
2. Klik Download Full Template (kalau takut template korang hancuzz)
3. Tick pada kotak Expand Widget Templates
4. Cari kod di bawah ini di dalam kotak HTML, kalau nak mudah mencari tanpa sakit mata sila tekan Ctrl F sahaja

  .post blockquote {
    margin:1em 20px;
    }

5. Gantikan code yang dicari di atas dengan code ini

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

@ #F430C0 untuk warna background nya.. Kalau nak gantikan dengan gambar sila replace code background: #F430C0; dengan code ini background-image:url(URL GAMBAR BACKGROUND BLOCKQOUTE);

6. Dan SAVE.. tengoklah hasilnya..

---

Dah Terjah Diaries Ni?? Suka Sila Tinggalkan Tapak Anda

---