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.

SHARE:

82 comments

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

    ReplyDelete
  2. @♥Dhia As-syifaa♥

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

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

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

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

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

    ReplyDelete
  7. @ummisofea...

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

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

    ReplyDelete
  9. @MiszMaryaNe

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

    ReplyDelete
  10. nape sy punye dua2 cara xleh wat...


    xde code post blockquote { dan .post-body {

    ReplyDelete
  11. @cHiEydA

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

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

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

    ReplyDelete
  14. tak jadi lorr..dia kata..


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

    Error 500

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

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

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

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

    ReplyDelete
  19. @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

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

    ReplyDelete
  21. @Mizz Vochelle

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

    ReplyDelete
  22. kaq,,nk tnye lh,,,pe functi0n k0tak blackqu0te ni??

    ReplyDelete
  23. @taufiq_aysyah

    byk fungsi..mcm nak buat dialog

    artikal..

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

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

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

    ReplyDelete
  26. 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?

    ReplyDelete
  27. suka ny..akhir ny jd ugok...hee..

    ReplyDelete
  28. Dye kate More than 1 navbar was found!

    ReplyDelete
  29. sys , macammana nak curvedkan blockqoute tu ?

    ReplyDelete
  30. @ALIAALIO

    tambah px -moz-border-radius sahaja..

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

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

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

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

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

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

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

    ReplyDelete
  38. xjadik la..Template Designer tp xjadik! waaaaaaa

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

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

    ReplyDelete
  41. tq sis..jadi jugak akhirnya....muahhh

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

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

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

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

    ReplyDelete
  46. Macam mana nak tukar background kotak blockqoute bila cursors lalu??

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

    ReplyDelete
  48. kenape sy tak jumpe pon sy pnye -edit HTML-?

    mane dy menyorok ea ?

    ReplyDelete
  49. Alhamdulillah, menjaddddddddddddi. THANKSSSSS sis farah.

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

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

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

    ReplyDelete
  53. @Nur Sofia

    kalau xda akak copy je code tu letak dalam ciding

    ReplyDelete
  54. @Nur Sofia

    kak try tutorial y dah saya update tu ye

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

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

    ReplyDelete
  57. @♥Miss Farah♥

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

    ReplyDelete
  58. cik macem mana buat newer and older???

    ReplyDelete
  59. 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 :)

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

    ReplyDelete
  61. thx ya semua yg you share menjadi!!!! terbaik

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

    ReplyDelete

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

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH