Friday, November 19, 2010

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.


Kalau suka LIKE sahaja, Jangan lupa komen. TQ.

77 88 Orang doakan Farah dapat 4 flat:

♥Dhia As-syifaa♥ said...

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

♥Miss Farah♥ said...

@♥Dhia As-syifaa♥

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

Fieda said...

dh try x boleh lah...

♥Miss Farah♥ said...

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

♥Miss Farah♥ said...

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

♥●Dhia As-syifaa♥● said...

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

♥Miss Farah♥ said...

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

ummisofea... said...

xjadi jugak..huhuhu

♥Miss Farah♥ said...

@ummisofea...

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

MiszMaryaNe said...

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

♥Miss Farah♥ said...

@MiszMaryaNe

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

cHiEydA said...

nape sy punye dua2 cara xleh wat...


xde code post blockquote { dan .post-body {

♥Miss Farah♥ said...

@cHiEydA

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

SiMpLe LIvE 0f Me ! said...

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

Haura Malina said...

tenkiu2 (:

♡ Sutera Kasih ♡ said...

thanks for sharing..berjaya!!!hehe

slumberznanie said...

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

♥Adinda Nurul♥ said...

tak jadi lorr..dia kata..


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

Error 500

elfa said...

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

cik mieza said...

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

Pr!ncEsz CadBurrY said...

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

SHAHIRAH ADIZAN said...

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

♥Miss Farah♥ said...

@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

Mizz Vochelle said...

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

♥Miss Farah♥ said...

@Mizz Vochelle

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

hanumi ezzaty said...

tq kak farah..cantek sgt..
^^,

ikha said...

tengkiu farah.. :)

♥ Jieha Sabri ♥ said...

tengkiu fara..:)

taufiq_aysyah said...

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

♥Miss Farah♥ said...

@taufiq_aysyah

byk fungsi..mcm nak buat dialog

artikal..

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

.::bErLiaN dAn pErmAta::. said...

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

♥Miss Farah♥ said...

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

mayasufi said...

thanks kak farah

Miss Cupcake said...

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?

Elinaaa gilaaa !!! said...

Jadi laa . Thanks <3

cik ena said...

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

I-Nur Athirah said...

da jadi. thanks.

budax gilax said...

terima kasih akak farah :D

Ridzwan Syah II said...

Dye kate More than 1 navbar was found!

ALIAALIO said...

sys , macammana nak curvedkan blockqoute tu ?

♥Cik Nurfarah♥ said...

@ALIAALIO

tambah px -moz-border-radius sahaja..

farah hanim said...

da jadi
tenkiu ^^

Amalia said...

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

♥Cik Nurfarah♥ said...

@Amalia

try guna cara 2 or 3?

Norashikin Bt Dorani said...

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

Nureen said...

dh bole thx kak farah..

cyew arina! said...

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

smilenajah93 said...

@♥Dhia As-syifaa♥


dah try ! weee ! berjaya !

miya maiera said...

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

yana said...

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

Aliaa syahindah said...

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

Nurhazirah said...

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

♥Cik Nurfarah♥ said...

@Nurhazirah

Buat slow2 dear.
Good luck!

miSpYeja said...

xjadik la..Template Designer tp xjadik! waaaaaaa

Nazayiena said...

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

farahin izzati said...

hyep kak.. jadi pon mekasih :)

Sania Damia said...

Macam mane nk guna blockquote nie?

sAiAa aIEn said...

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

cheq' omei said...

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

syaMomoiro said...

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

Anasyaurah said...

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

Nur Khaliesah said...

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

Nur Syaqinah said...

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

Just Be Yourself said...

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

anis syazwani said...

thanks kak!love akak!:)

Norashiqin Kamaruzaman said...

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

menanti kehadiranmu said...

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

mane dy menyorok ea ?

Husna Humairah said...

Alhamdulillah, menjaddddddddddddi. THANKSSSSS sis farah.

kembalakenterprise said...

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

Nur Afridayati said...

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

Nur Sofia said...

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

♥Cik Nurfarah♥ said...

@Nur Sofia

kalau xda akak copy je code tu letak dalam ciding

♥Cik Nurfarah♥ said...

@Nur Sofia

kak try tutorial y dah saya update tu ye

Hanis Muniwwah said...

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

♥ iqwa-niera ♥ said...

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

Ird Irdina said...

@♥Miss Farah♥

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

Zilvia Mawaddah said...

cik macem mana buat newer and older???

 
This Blog is Protected. Copyright 2011 © Design By Cik Nurfarah