Tutorial 14 : Cara Membuat Kotak Blockquote

Salam Jumaat. 
Hari ini i nak menulis blog tutorial..i akan cuba tulis yang terbaik agar u all faham..
i pun tak suka kalau someone tulis tutorial tapi i pun tak faham. Contoh kalau dia suruh cari code html tapi dia snap picture untuk code html dalam tutorial dia..kan susah kita terpaksa nak taip satu-satu.. kalau dia tulis code itu senang la nak copy and find kat edit HTML..kalau ada blogger buat macam itu i confirm X je..pada i kalau nak bagi tutorial biar jelas dan faham..namanya pun tutorial so kena la tutor pelajar sampai faham..:)
kalau just nak up traffic dan melepaskan batuk di tangga lebih baik tak payah kan..
jangan marah ye just my opinion je..tak  ada kena mengena yang hidup atau pun meninggal dunia.
Ok la tanpa berlengah masa i ajar cara buat kotak blockquote.
Masih tak tahu blackquate ok..i 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

ini lah blackquate box i..cantikan pink! u all nak? jom belajar ye sayang..i tak kedekut ilmu.


 

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 memakai Template 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);

______________________________________________________________________________

UPDATE!!

Kalau masih tak ada code tu korang cari code ini (cari sampai jumpa):



/* Comments
----------------------------------------------- */
 

 
 
Lepas tu copy code di bawah dan paste sebelum/di atas code yang di cari tadi:

.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..



p/s: Tak boleh jadi jugak tak tahulah..mungkin ada penunggu dalam blog korang muahaha..


 http://content.mycutegraphics.com/backgrounds/winter/winter-hearts-backgrounds.gif
 http://content.mycutegraphics.com/backgrounds/winter/winter-hearts-backgrounds.gif
 http://content.mycutegraphics.com/backgrounds/winter/winter1.gif
 http://content.mycutegraphics.com/backgrounds/winter/winter1.gif
 http://www.mycutegraphics.com/backgrounds/swirly/th-swirlybg10.gif
http://www.mycutegraphics.com/backgrounds/swirly/th-swirlybg10.gif
 http://mycutegraphics.com/backgrounds/stars/th-starbg56.gif
 http://mycutegraphics.com/backgrounds/stars/th-starbg56.gif
 http://www.mycutegraphics.com/backgrounds/dots/dotbg126.gif
 http://www.mycutegraphics.com/backgrounds/dots/dotbg126.gif
http://www.mycutegraphics.com/backgrounds/hearts/hrtbg106.gif
 http://www.mycutegraphics.com/backgrounds/hearts/hrtbg106.gif
 http://content.mycutegraphics.com/backgrounds/color/colorbg25.gif
 http://content.mycutegraphics.com/backgrounds/color/colorbg25.gif
 http://content.mycutegraphics.com/backgrounds/blue/blue-background6.gif
 http://content.mycutegraphics.com/backgrounds/blue/blue-background6.gif


#korang boleh guna background yang aku bagi ni. Tips, better guna background colour soft untuk lebih menarik.

Share this PostPin ThisEmail ThisShare on Google PlusShare on Tumblr
82 Comments for "Tutorial 14 : Cara Membuat Kotak Blockquote"

knp saya xdpt wt ey miss..? dia kuar popup window cmni lak..time klik BLOCKQOUTE tu..huhu..mcm nie


[An attempt to modify formatting failed unexpectedly. A possible solution may be to save your post as a draft and reopen this post and apply formatting again.
TypeError: Cannot convert 'parent.nodeName' to object]
plzz miss

@♥Dhia As-syifaa♥

dah tengok betul2?
letak kod di atas .post-body {
kan ada tanda { lagi kat atas .post-body { pastikan di bawah tanda{

waduh2..g mana ye..nanti chek smula code html

i dah update so test buat ye..xjadi lagi??sila bagitahu

xjadi jugak..kalo jadi pun,wt kt edit html baru jadi..huhu

tak tahu la chek nak tolong sebab hari itu guna code ini boleh jadi

@ummisofea...

Kenapa tak boleh jadi ni?? waduh2 kena buat research dan testing sumula ni...tapi blog miss farah dan test blog kawan boleh jadi..

yezzaa, boleh buat la!
tenkiuuu miss farah..=)

@MiszMaryaNe

tahniah..yang belum berjaya itu maybe templete anda tak sesuai dengan coding ini..nanti ada masa saya update

nape sy punye dua2 cara xleh wat...


xde code post blockquote { dan .post-body {

@cHiEydA

pakai tamplete designer ek? selalunya ada dr templete dsgner x boleh buat coding ini...kalau guna minima atau denin boleh kot..

Salam , kak mcm mne nk buat shoutbox ea ? maaf la , tak de kne mngena ngan tutorial kat ats nie , hehe :D

yeaahh nanie dh cuubeee thanxx.. tp wat mse niee nanie gune url u duluu yeee..

tak jadi lorr..dia kata..


Invalid variable declaration in page skin: Variable is used but not defined. Input: bordercolor

Error 500

thanks ma dear...i try method ke-2 yang u bagi :)

thx kak fara ! mmg mnjd ! comey lak 2 . sy amek yg kupu2 2 ;)

huhu T_T xboleh nak buat la.. biler nak post xjadi... huhu

akak , macam mana nak amek URL kat MY CUTE GRAPHICS.COM tuu erk ? hope akak dapat membantu :)

@SHAHIRAH ADIZAN

contoh bahagian yg perlu di ambil;;

http://www.content.mycutegraphics.com/graphics/animal/duck-holding-flowers-transparent.png

pastikan ada key png/jpg/jpeg/gif dihujung urlnya

kak sarah. boleh tolong buatkn kotak blackquote wrna biru x?

@Mizz Vochelle

boleh? so mcm mana? nak bagi coding ker??

kaq,,nk tnye lh,,,pe functi0n k0tak blackqu0te ni??

@taufiq_aysyah

byk fungsi..mcm nak buat dialog

artikal..

benda yg nak highlight ptg..n mcm2..untuk nampak lg menarik entry kita

tak jadi jugak lah sis.. mcm blog lain jugak..
tolong ajar kan lagi ,.

@.::bErLiaN dAn pErmAta::.

Akak hanya dapat 2 cara ni je nak wat ktak bquote..nnt kalau ada cara len akak update..

Selalunya dia hanya sesuai untuk minima template kalau template designer akak xsure blh atau x..

sis,saya punya ketiga tiga cara x jadi..Buat pengetahuan sis,saya punya kotak blackquote dashed..saya nak tukar side dia pink mcm sis..n saya guna btemplates..bukan designer,denim atau minima..sis boleh carikan tuto untuk nie?

suka ny..akhir ny jd ugok...hee..

Dye kate More than 1 navbar was found!

sys , macammana nak curvedkan blockqoute tu ?

kak farah, ta jdik pon..bile save templates, nnti dyer jdi blank.. knape erhh ?

Assalammualaikun... miss farah nak tanye mcm mane nak buat blackquote tu rounded eh??

xjmpe la code no.2 n 3,,,no 1 plak xjdi pape..

soryy , url gambarr tu nak ltak gmbar ape ? kurang faham (:

akak akak! ade tak tutorial yang ajar cm ne na buat bentuk bulat dekat blockquote tuh. yana punye petak ah.

Hm takdapat carik .post-body { nii :( camne yea

dah pening la tngok...payah ...huhuhu.. Miss Farah!! Tolong!!

xjadik la..Template Designer tp xjadik! waaaaaaa

salam perkenalan Farah,Kak Nurul dah cuba buat kotak blockquote ikut tutorial Farah,jadi tq....
Kak Nurul follow Farah ya.

Macam mane nk guna blockquote nie?

yeeee da jdi...thanx taw.^^
suka sgt.

tq sis..jadi jugak akhirnya....muahhh

hehe . guna tuto yang nie baru jadi . thanx sis ! *clap3~ :)

he3..jadi..thanks sis..selalu wat xjadi pn..kali ne jadi...(^_^)

Jadi ! Mule2 , buat xjadi . Then , bru jadi ! Trima Kaseh ye :)

Terima kasih utk tuto yg lengkap ni ,... =)

Macam mana nak tukar background kotak blockqoute bila cursors lalu??

wassalam cik farah....saya minta izin copy ye tutor nye...saya punya dah menjadi =)

kenape sy tak jumpe pon sy pnye -edit HTML-?

mane dy menyorok ea ?

Alhamdulillah, menjaddddddddddddi. THANKSSSSS sis farah.

TQ la my Cun-Cun, i tertarik u offer sampai tiga kali tu fuh berpeluh i..! jangan sangka yang buruk erk! berpeluh i kerana dah kehabisan A4 nak print.

U memang prihatin: memikirkan bukan semua template orang sama, jadi dengan dengan penerangan A to Z orang akan berjaya buat sebagai yang di inginkan nya makaseh..makaseh..

nak minta tolong buat kan boleh tak??? dah macam macam tutorial saya cuba tapi tak jadi jadi..huhuhu

adik.. x bole la. akk search dlm edit html tuh, x ad pun .post blockquote {
margin:1em 20px;
}

@Nur Sofia

kalau xda akak copy je code tu letak dalam ciding

@♥Cik Nurfarah♥ mcm mne nk buat ye akk? sye try search guna ctrlF still x dpt jmpa..knapa yekk?

yeah! dapat..lama dah cari tutor nie..ehehe..thanks ..:D

@♥Miss Farah♥

akak, kalou yang new template cane? kan edit html skrang dh brubah :3plshh reply

cik macem mana buat newer and older???

terima kasih cik farah untuk tutorial cik farah, membantu sangat untuk saya yang baru mengenal dunia blog. ada yang saya ikut sama seperti tutorial cik farah, saya akan belajar sikit2 dan ubah, terima kasih atas tunjuk ajar yea :)

kak,, tolong saya..tak jumpa pon...nangis dah ni buat

thx ya semua yg you share menjadi!!!! terbaik

saya buat dah dapat tapi dia jadi panjang kebawah so tak boleh baca sebab kebawah panjang

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Related Posts Plugin for WordPress, Blogger...
Back To Top