Tutorial Buat Blockquote Cantik dan Berwarna

Kali ni request dari arekyn. Cik tom akan ajar tutorial cara buat blockquote yang ada warna bagi cantikkan lagi entry blog korang. Tapi maybe ramai tak tahu. Blockquote tue macam mana rupanya ye? Haa ni la rupanye;

Contoh blockquote
Terdapat 3 kemungkinan soalan yang akan korang tanya. So, cik tom dah siapkan 3 incase kalau 1st tutorial takde. Korang boleh follow up next incase. Tapi kalau dah boleh buat just ignore other incase ye. Jom follow up tutorial ni.

STEP 1

DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>DOWNLOAD FULL TEMPLATE

*Apa-apa pun sebelum edit html, korang mestilah buat backup sebagai langkah berjaga-jaga.

STEP 2

Tekan keyboard, CTRL+F secara serentak.Cari code;

blockquote

 

STEP 3

Ini contoh coding blog cik tom. Berkemungkinan coding setiap blog berlainan.


blockquote {


margin: 10px 10px 10px 20px;


padding: 10px 15px 10px 15px;


line-height: 1.6em;


color: #000000;



background: #F535AA;



border: 3px solid #000000;


border-left: 3px solid #000000


}

Pada coding di atas ni korang boleh tukar code warna tue ye;

1) color= code warna teks dalam blockquote
2) background= warna background kotak blockquote
3) border=untuk adjust ketebalan, jenis dan warna border

**Untuk pilihan warna boleh lihat kat SINI atau google code warna yang korang suka.

STEP 4

Klik SAVE TEMPLATE.
*************************************************
~~~Incase 2, blog korang ada code blockquote tapi takde code warna, background or border.~~~

Contoh;


blockquote {


margin: 10px 10px 10px 20px;


padding: 10px 15px 10px 15px;


line-height: 1.6em;



border: 3px solid #000000;


border-left: 3px solid #000000


}

Korang just boleh tambah je code tue seperti dibawah;


blockquote {


margin: 10px 10px 10px 20px;


padding: 10px 15px 10px 15px;


line-height: 1.6em;


color: #000000;



background: #F535AA;



border: 3px solid #000000;


border-left: 3px solid #000000


}

 

*************************************************
~~~~Incase 3, blog korang memang takde coding blockquote. ~~~

STEP 1

Tekan keyboard, CTRL+F secara serentak.Cari code;

]]></b:skin>

STEP 2

Copy dan paste code di bawah, sebelum code ]]></b:skin>


blockquote {


margin: 10px 10px 10px 20px;


padding: 10px 15px 10px 15px;


line-height: 1.6em;


color: #000000;



background: #F535AA;



border: 3px solid #000000;


border-left: 3px solid #000000


}

**Untuk pilihan warna boleh lihat kat SINI atau google code warna yang korang suka.

STEP 3

Klik SAVE TEMPLATE dan cuba buat post entry guna blockquote. Menjadi tak??

*************************************************
~~~Incase 4, bagi yang tak tahu macam mana nak buat blockquote ialah pada new posts/edit post(tak kira la yang old or new editor)~~

Korang taip dulu entry korang tue.. Pastu bold/highlight kan perkataan/perenggan yang ingin di blockquote dan klik icon “blockquote” seperti dibawah;

p/s: sila baca dan follow up betul2 step yang cik tom bagi ni ye. cuba buat dulu. kalau tak dapat baru tanya. erk bukan bermaksud tak nak jawab soalan korang/tak bagi tanya ye tapi kadang2 ada soalan yang di tanya tanpa mencuba dulu.

Sharing is caring

ciktom

Cik tom seorang part time blogger yang sangat sukakan dunia blogging dan buah tomato. Mula menulis blog 15 Julai 2010. Menaip segala ilham dari akal fikiran dan hati ke dunia alam cyber. Sebarang persoalan atau pengiklanan/advertorial/review sila hubungi ciktom; tomatogurl86[at]gmail.com...gantikan [at] dengan @

47 thoughts on “Tutorial Buat Blockquote Cantik dan Berwarna

  • December 16, 2010 at 4:13 am
    Permalink

    hehe wah cik tom makasih tuto ni hehe
    dok mencri gak sbb nak tukar border fatin tu hehe
    nipis sgt hehe
    masih ๐Ÿ˜€

    Reply
  • December 16, 2010 at 4:19 am
    Permalink

    cantek lah ciktom!
    belalang dah lupa yg ciktom ajar belalang dulu…leh la rujuk sini…

    hee

    Reply
  • December 16, 2010 at 4:25 am
    Permalink

    fuh, cik tom mmg terbaik la.
    tabik sifu!!

    Reply
  • December 16, 2010 at 4:33 am
    Permalink

    bagusnya ada sumber rujukan baru…
    chaiyok2

    Reply
  • December 16, 2010 at 4:47 am
    Permalink

    yea! cik tom dah kembali to d real cik tom!! hihi

    bes la tuto nih..nk try la nti..hihi

    Reply
  • December 16, 2010 at 5:05 am
    Permalink

    nak tanya jugak ! hahaha. cik tomato, kalau background yang liplap liplap tu macam mane n dri mane dpt background tuh? ๐Ÿ™‚

    Reply
  • December 16, 2010 at 5:44 am
    Permalink

    dh ikut step. tp x blh pn. ikut incase3..

    Reply
  • December 16, 2010 at 6:09 am
    Permalink

    As'salam…

    Thanks cik tom..

    Reply
  • December 16, 2010 at 6:35 am
    Permalink

    nak try la nnt

    Reply
  • December 16, 2010 at 6:38 am
    Permalink

    dulu penah try tp x jd pon. nnt yaty nak try buat lagi lah. tq cik tom ๐Ÿ™‚

    Reply
  • December 16, 2010 at 7:04 am
    Permalink

    akak akan cuba..
    nak buat la untuk next entry ni..
    kalau tak jadi tak pe la..
    sekurang2 nye dah cuba.

    Reply
  • December 16, 2010 at 7:15 am
    Permalink

    SERONOK DPT BYK MASA BELJAR MCM2 ๐Ÿ™‚

    Reply
  • December 16, 2010 at 7:47 am
    Permalink

    nice sharing, cik tom

    Reply
  • December 16, 2010 at 8:15 am
    Permalink

    thanks banyak2 cik tom. nak jinak2 guna ni la lps ni. heee. ^_^

    Reply
  • December 16, 2010 at 10:10 am
    Permalink

    br jd bt.. tersalah letak kot.. =p

    Reply
  • December 16, 2010 at 10:48 am
    Permalink

    tak faham..(belum try)

    ok tom..thanks bg info ni..akan datang nanti nak buat jugak blockquote ni

    Reply
  • December 16, 2010 at 11:08 am
    Permalink

    suspek la cik tom ni, mcm2 taw patutla blog cik tom comey jer..dla xdan nak blaja, kene cr ms..rasa nk amik tuisyen jer ngan cik tom..bukak kelas la cik tom, dla jd anak murid yg tua..hawhaw..wat kelas kat batu buruk..heheh

    Reply
  • December 16, 2010 at 3:50 pm
    Permalink

    trima kasih cik tom.. sblum ni pon sy tertanya2 jugak camne cik tom wat blockquotes tu.. dan skrg ni jugak baru taw yg tu namanya blockquotes.. hehe.. jakun kan?

    Reply
  • December 17, 2010 at 5:29 am
    Permalink

    yeah!! finally…
    cik tom buat gak tutor yang akyn request tuh…
    akyn dah try.. trimass yerp…
    jasamu d kenang ๐Ÿ™‚

    Reply
  • December 17, 2010 at 10:16 am
    Permalink

    mcm kenal je coding n step tu. hehe. nice sharing ciktom.

    Reply
  • December 19, 2010 at 3:30 pm
    Permalink

    xjadilah cik tom..kita nye yg step2 tuh…kat sidebar blog kita, 'contest' je yg ada blockquote tuh.. adeii pening udah ..

    Reply
  • December 20, 2010 at 8:56 am
    Permalink

    wah…best2..leh try…

    satu lg..leh x cik tom ajar cmne cra nak letak icon kt tajuk/url bloglist tu?yg cik tom punye icon tomato comel tu…sukela…tingin gak nk mcm tu…hehe

    Reply
  • December 31, 2010 at 9:28 pm
    Permalink

    I think one of your advertisements caused my internet browser to resize, you might want to put that on your blacklist.

    Reply
  • January 9, 2011 at 10:12 am
    Permalink

    sye dh try smua tp x jadi, coding plak yg kuar kt blog atas, camne?

    Reply
  • January 15, 2011 at 3:59 pm
    Permalink

    @Ayuni: sori br terjah..cik tom tgk menjadi je blockquote blog ayuni..

    Reply
  • January 16, 2011 at 10:22 am
    Permalink

    Salam Cik Tom, templetes sy langsung tak ade blockquotnie…hehehe.sy dah cube jaya letak…time kasih yer

    My recent post โ–บFesyen : Fesyen Lenyap, Style Sama

    Reply
  • October 6, 2011 at 9:29 am
    Permalink

    tak jdik lah D:
    cmne ek?
    code yg nk di blockquote tu jdi center ketengah je
    takde cm kotak kotak nye pun :’c

    Reply
    • October 7, 2011 at 3:35 pm
      Permalink

      macam mana tue ye??ada tersilap copy code kot..ciktom nak tlg pun xdpt tgk blog misa sbb private…so cik tom edit balik entry kat bahagian code…cuba misa copy balik code tue..menjadi x?

      Reply
  • December 1, 2011 at 11:46 am
    Permalink

    x jadi pun… bila buat blockquote dia x kluar..

    Reply
    • December 26, 2011 at 6:24 pm
      Permalink

      cuba follow satu persatu step..maybe ada tertinggal apa2 code..

      Reply
      • January 14, 2012 at 8:06 pm
        Permalink

        ciktom tolong buatkan blockquote utk blog sya ๐Ÿ™‚

        Reply
        • January 15, 2012 at 3:01 pm
          Permalink

          sori yunk..ciktom busy dengan kerja skang..xdpt nak tolong…cuba aien buat sendiri dulu ye…

    • January 15, 2012 at 3:49 pm
      Permalink

      sori yunk..ciktom busy..cuba follow dulu step dalam tutorial ni..kalau xdapat buat/ sangkut mana2 inform or boleh tanya dengan cik tom..

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Optimization WordPress Plugins & Solutions by W3 EDGE