Membuat blockquote

ditaip Zana Mn jam 6:16 PM




Bagi sebahagian blogger blockquote sudah tidak asing lagi didengar namun bagi newbie korang patut mengetahuinya. Blockquote sangat berguna untuk highlight ayat di dalam artikel. Kebiasaannya, dalam blog ini, blockquote digunakan untuk highlight kod html di dalam tutorial.

Contohnya seperti di bawah
Bagi sebahagian blogger blockquote sudah tidak asing lagi didengar namun bagi newbie korang patut mengetahuinya. Blockquote sangat berguna untuk highlight ayat di dalam artikel. Kebiasaannya, dalam blog ini, blockquote digunakan untuk highlight kod html di dalam tutorial.

Cara nak buat mudah je. Sebelum tu, jangan lupa backup dulu template tu ye.
Cara backup template,
masuk ke bahagian
Tengok sebelah kanan atas, klik
Klik
Save File.


Cari kod di bawah
.post blockquote {
Tips untuk memudahkan pencarian,
Lihat keyboard korang, Tekan key Ctrl dan key F serentak.
Untuk pengguna Mozilla Firefox, korang akan nampak imej ni
Masukkan kod di ruang sebelah find, klik Next.

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

dengan kod dibawah ini
.post blockquote {
background: url(http://mykawaiistore.com/blockquote.png);
padding: 3px;
margin: 3px 3px;
border: 2px dotted #fff;
border-left: 5px solid #fbdceb;
border-right: 5px solid #fbdceb;
}

Untuk tambah efek hover bolehlah ditambah kod ini
.post blockquote:hover {
background: url(http://mykawaiistore.com/blockquotehover.png);
padding: 3px;
margin: 3px 3px;
border: 2px dotted #fff;
border-left: 5px solid #e6f6ee;
border-right: 5px solid #e6f6ee;
}

Siap ^^
Boleh ubah direct link yang berwarna merah untuk masukkan imej yang korang suka

Cara nak guna?
Bila nak letak kod atau tulisan atau apa-apa je la dalam blockquote, just highlight kan ia, dan klik simbol blockquote seperti di bawah



Nak tukar animated picture pun boleh









Comments
31 Comments

31 komen:

Viva La zuLL on 6:49 PM said...

TQ.... boleh try nih
http://ohserius.blogspot.com/

Alahai Malaysia on 7:35 PM said...

10q mommy...i give 5 star...thanx

Alahai Malaysia on 8:03 PM said...

tapikan mommy, ada sesetengah kod yang saya letak tak keluar pon pada post terbabit...macam mana nak buat? semua step yg mommy ajar, saya ikut 1 per 1...ada kod yg keluar dan ada yg xkeluar...pliss...nak buat macam mana?

Alahai Malaysia on 8:10 PM said...

satu lagi mommy, macam mana nak pisahkan tutorial daripada post yang lain...macam dalam blog mommy ni(kat sidebar tu)...sory kalau banyak songeh...

Umi Nuha on 8:29 PM said...

tq for sharing :-)

Mommy Pinky on 8:56 PM said...

Viva La zuLL, erk, try ape tu? tak faham la ;p

Mommy Pinky on 8:58 PM said...

Alahai Malaysia, hmm...byk nya persoalan..kena ambil masa gak nak jawab ni..hehe :) nanti kak Zana settle okeyh! :)

Mommy Pinky on 8:58 PM said...

Umi Nuha, no problem :)

nadzirah on 6:56 PM said...

macam mana nak bwt link fb or tweet kat tepi blog tuh?

cermin mata on 1:00 AM said...

wahhh bagus tutorial ini thanks ya

PinQib on 1:24 PM said...

da try.. thanks yerr


Sekian. Eh. Ada update la. Jom singgah!

Sapa nak elaun?

Anonymous said...

I would like to exchange links with your site babybiey.blogspot.com
Is this possible?

nas on 7:05 PM said...

akak,xjmpe la post blockquote tue...
atau blog nas nie bermasalah??? huhu :(
so xleh follow tutorial nie..

noraim on 12:47 PM said...

tq kak. dah jadi dah :)

inilahidupsaia on 4:49 PM said...

kak , sy xjmpe pun .post blockquote { tuh ?

AnAk dEneSor on 11:40 PM said...

knpe dalam saye punye templete xde .post blockquote { la..knpe yea?

Mommy Pinky on 11:45 PM said...

@AnAk dEneSor
kalau guna blogger template mmg tak de code tu.

CIK EITA on 3:43 PM said...

@Mommy Pinky

Mummy x jumpa la code tue.. so x bleh nak buat ke? ade cara lain x?

NanaCinvent on 4:23 PM said...

okay . dah jadi .
thank you mommy

NurSolehah on 9:44 AM said...

salamnk tye... highlight tu mase sebelum post .. or cmne ?

NurSolehah on 9:58 AM said...

@NurSolehah

ok2 dh fhm..hee

4min93~~ on 8:32 AM said...

xde pon kode " .post blockquote { " nie.. tolong !!

Izzatul zauli on 10:07 PM said...

da buley buat :) mekasih mommy pinky !

MAYA on 3:30 PM said...

mommy pinky,, saia da try tapi ta dapat lah ?

Nyna ana ♥ on 7:55 PM said...

akak kalau yg code .post blockquote { tu xde nk kene gune code ape lak?? saye nkkkk sgt buat bende nie..harap akak dpat tolong yer..

♥Princess Delliza♥ on 5:19 PM said...

da jadi.. tq mummy...

♥ Pia-Yaya ♥ on 6:47 PM said...

Mommy, sy tak jumpa la Tick Expand Widget Templates. Camner nie?

uwmaisarah on 4:57 PM said...

thanks for this kak Zana! :D

Cahaya Keadilan on 1:08 PM said...

mommy,x jumpe pun .post blockquote{ tu...help me...

Misa on 7:39 PM said...

Dah jdi~!
tapi camne nak tukar background nye jadi image lak? :D

Mommy Pinky on 9:13 AM said...

erk, try ape tu? tak faham la ;p

:a :b :c :e :f :g :h :i :j :k :m :n

Post a Comment

 

Copyright © 2008-2017 By Zana Mn. All rights reserved | Sign in, MP Design