Tutorial Blockquote Bergambar Bagi Menarik

Sebelum ini cik tom ada buat Tutorial Buat Blockquote Cantik dan Berwarna.Pada yang tidak tahu apa itu blockquote, boleh rujuk pada tutorial tue. Tutorial tue hanya ajar cara buat blockquote pada background berwarna. So, sekarang cik tom nak kongsikan tutorial cara buat blockquote bergambar yang menarik. Korang boleh buat blockquote dengan background menggunakan image yang disukai.

Contoh gambar blockquote gunakan berwarna:
contoh gambar blockquote

Contoh gambar blockquote gunakan gambar:

gambar blockquote bergambar guna gambar menarik
STEP 1

Sebelum edit html, korang mestilah buat backup sebagai langkah berjaga-jaga.

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

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;
}

STEP 4

Sila copy dan paste code di bawah dan gantikan pada code yang di bold (background) dalam step 3.

background-image:url(URL GAMBAR) no-repeat;


Contoh url image: http://farm4.static.flickr.com/3391/4602462381_c04705bf3f_b.jpg

Hasilnya:

blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background-image:url(URL GAMBAR) no-repeat;
}

***URL GAMBAR tue boleh upload gambar ke blogspot dan pastu ambil url gambar/upload ke mana2 storage gambar dan copy url gambar di beri/ambil url gambar di mana-mana website yang disukai
***Bagi yang tak jumpa code blockquote atau tak reti cara nak gunakan blockquote, boleh rujuk pada entry Tutorial Buat Blockquote Cantik dan Berwarna. Sebab kat entry ni cik tom ada ajar beberapa step incase takde code blockquote dan cara guna blockquote dalam entry.

STEP 5

Klik SAVE dan try buat blockquote dalam entry dan publish. Tengok menjadi tak?

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 @

31 thoughts on “Tutorial Blockquote Bergambar Bagi Menarik

  • March 11, 2011 at 4:34 am
    Permalink

    Tutorial yang ellen suka dan pasti akan di cuba..thanks Tom..Muahhh!!

    Reply
  • March 11, 2011 at 4:46 am
    Permalink

    tak boleh nk cuba wawawa

    Reply
  • March 11, 2011 at 4:51 am
    Permalink

    sdih coding sy selalu tak leh pakai..tloglah ciktom.heheee boleh tak crikn templte mesra coding gitu2 lorr..

    Reply
  • March 11, 2011 at 5:19 am
    Permalink

    salam

    menarik,tp kalau ada gambar lambat la nak loading..hehee,,better taruk warna je..

    Reply
  • March 11, 2011 at 5:32 am
    Permalink

    nak buat …
    nak bubuh gambo katon2 boleh kan???

    Reply
  • March 11, 2011 at 6:10 am
    Permalink

    akak diana tuh nak kartun je.huhhh.akak!letak la gmber bintatang yg maisara lukis.huhhu

    Reply
  • March 11, 2011 at 7:37 am
    Permalink

    sis mmg teringin punyai blog yg cantik..tp..huk3

    Reply
  • March 11, 2011 at 10:35 am
    Permalink

    nampak macam mudah jer kan…hihi

    Reply
  • March 11, 2011 at 1:56 pm
    Permalink

    Wahh~ Nak cuba lah nanti! ;D

    terima Kasih sayam!

    Reply
  • March 11, 2011 at 2:27 pm
    Permalink

    trimas cik tom!! mesti best cuti kat redang..ehehehehe

    Reply
  • March 11, 2011 at 2:28 pm
    Permalink

    nak tanye cik tom, camne nak buat pic yang cik tom letak kat bawah skali tu?

    yang tomato girl's life..redesign by cik tom tu..hehehe

    Reply
  • March 12, 2011 at 12:14 am
    Permalink

    nice entry..sy ska entry ni!

    Reply
  • March 21, 2011 at 9:22 am
    Permalink

    @Woofer Storm: banyak website template yang ada…insyaAllah nanti cik tom cuba cari yang ok ye..

    Reply
  • March 21, 2011 at 9:24 am
    Permalink

    @bee: memanglah ni coding untuk blogspot…wordpress punya tak tahu..huk3..

    Reply
  • March 21, 2011 at 9:24 am
    Permalink

    @sissyira: yup lagi better warna sbb nak load bergambar ni makan masa..

    Reply
  • March 21, 2011 at 9:26 am
    Permalink

    @diana: boleh je akak..mana2 pic pun boleh..huhu

    Reply
  • March 21, 2011 at 9:26 am
    Permalink

    @echah mashuri: ok jgk cadangan tue…tp nanti xnmpk pulak tulisan utk blockquote..huhu

    Reply
  • March 21, 2011 at 9:29 am
    Permalink

    @Taufiq Tiramisu: yang bawah tue footer…erm nanti cik tom akan cuba share dlm tutorial akan datang ye..insyaAllah πŸ™‚

    Reply
  • May 21, 2011 at 1:38 am
    Permalink

    ijah try buat part nk letak url gmbr mcm tak menjadi sgt. heheh. kenapa eh?

    Reply
    • January 13, 2012 at 12:33 pm
      Permalink

      dah follow semua step tp xmenjadi ke??
      cb tgk balik ade tersilap mana2 x ms copy code..

      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