Translate This Page

Cara Buat Blockquote Comel..

Sunday, June 10, 2012

Assalamualaikum...hehe, hari ni nak buat tutorial on request....siapa yang tak tahu blockquote tu apa meyhh tengok sini...yang comel macam kat blog saya, macam ni haaa...tadaaa!!

Cara nak buat blockquote, mula2 korang kena highlight kan words, time edit post tu, pastu tekan " kat bahagian atas macam ni:


Awak sangat comel

Then tekan

hehe, credits to cik farah untuk pic ni... =)

Jadilah macam ni!!

Awak sangat comel

OK, penerangan atas untuk newbies...hehe jom teruskan cara nak cantikkan dia....SILA BACKUP DULU!

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

1.Login ke Blogspot, klik 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 korang 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 BL warnakan MERAH, boleh la ditukar mengikut citarasa.

5. URL GAMBAR BACKGROUND BLOCKQOUTE boleh la direplace dengan URL korang nak

6. Preview, No Error, Save! =D

----------------------------------------------------------------------------------------

CARA 2 :Memandangkan ramai yang tak boleh test cara di atas..so BL akan ajar coding ini pula...

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.Sila Copy code di bawah dan paste kan di BAWAH code .post blockquote { seperti yang korang cari 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. Sila letakkan URL anda di URL image
5. 1px adalah ketebalan : lagi banyak nombor lagi tebal, dashed boleh diubah kepada solid atau dotted.
6. Preview, No Error, Save! =D

-----------------------------------------------------------------------------------------

CARA 3 ( Template Designer ) : Bagi Pengguna Template Designer

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 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..
Freebies From The Photobucket...hehhe, Korang pilih la yang warna dia light2 je...kalau tak susah nak nampak tulisan....nahh amik SINI


SUMBER: Cik Farah Yang Baik Hati.. =)

p/s: sebenarnya, BL suka cara cik farah ni buat tutor...sebab nya dia suka buat experiment...BL rasa serba salah nak copy tutorial ini, tapi BL dah cek blog dia...dan Beliau pon sudah mengizinkan...=) korang terjah la blog dia nanti...heheh...cute ~.~ OK, Diya, tutor ni untuk awak...next Tutor BL akan ajar cara cute icon muncul bila hover blockquote...=D

Jangan lupa komen OK (^^,)V sELaMaT mEnCuBA!!

21 172 Love this entry

  1. banyaknya cara boleh try..nak cuba juga lah =D

    ReplyDelete
  2. macam best. eh meyh la follow!

    baru nak activ balik blogging :) thanks hehe

    http://hyethenbye.blogspot.com/

    ReplyDelete
  3. Terima kasih untuk tutorial ni...sangat membantu...

    ReplyDelete
  4. dah jadi ..thanks...
    please follo my blog back..ruzanaredrose.blogspot

    :))

    ReplyDelete
  5. Haii , nak mintak tolong bole tak ? arina delete blockqoute yg lama , then arina bukak blog , background jadi separh :/ why jadi mcm nie ? nk tlng suruh awk btl kan :) kalau bole .

    ReplyDelete
  6. saya x berapa fahamla..pening pnjang sgt tutorial' nya..ermm,,but the way, blog awk mmg comel and cntik cangat2..hihihi

    ReplyDelete
  7. saya x berapa faham sgt tutorial ni..but the way, blog awk mmmg cute and cntik cangat2..hihihi

    ReplyDelete
  8. ThankYou! Tadi saya cari tuto2 lain semua takde macam awak. Seriously dah nak nangis sebab pening dok cari2. ThankYou! You are my heroin!

    ReplyDelete
  9. wahhhhh........jadi!Cute le...Do follow my blog sumua!

    ReplyDelete
  10. menjadi lah .. ty for tutorial
    ~kisses

    ReplyDelete
  11. wanie dah try tapie nape tak jadi mcm bentuk nie???

    ReplyDelete
  12. Thank you! Its work!!! XOXO

    ReplyDelete
  13. thanks . menjadi laa cara 1st :)

    ReplyDelete
  14. terima kasih kak!!
    Ya Allah dah lame dah saye carik tutorial ni.kalau saye buat mesti tak jadi tak tau kenape... tapi bile pakai tuto ni baru jadi. thanks a lot

    ReplyDelete
  15. Akak Credit Pic Blockquote AKak Ya...

    ReplyDelete
  16. Kalau yang guna blogskin macam mana ya?

    ReplyDelete
  17. Terimakasih, saya banyak dpt pelajaran dan masukan dari membaca postingan ini, salam kenal dari saya admin blog RPP, thanks

    ReplyDelete

Komen yang baik-baik ye ^^, kalau perlukan urgent respond, sila tinggalkan email anda

Related Posts Plugin for WordPress, Blogger...

•❤•MY PROFILE•❤•

My photo

Norashiqin Kamaruzaman LinkedIn | Personal Blog | Business |Tips & Tutorials | Travel | Food | Review | Environmental Health & Safety | UiTM Puncak Alam | knorashiqin@gmail.com