Wednesday, August 17, 2011
Tutorial 14 : Cara Membuat Kotak Blockquote
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 blackquote.
Masih tak tahu blackquate ok..i review..seperti gambar di bawah.
 |
| yang kotak merah itu adalah blackquote |
CARA 1 : Kalau tak boleh jadi kotak blackquote sila guna cara 2 di bawah. ( templete berbeza, so coding pun berbeza..harap maklum )
ini lah blackquate box i..cantikan pink! u all nak? jom belajar ye sayang..i tak kedekut ilmu.
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
Ini adalah contoh-contoh corak yang i ada..u all boleh buat akaun photobucket dan ambil direct link sebagai URL..ok..tapi sebelum itu upload la gambar yang u all suka. Contoh yang i ada adalah seperti di bawah :
http://i1205.photobucket.com/albums/bb432/fara_idola/Pink-love.jpg
http://i1205.photobucket.com/albums/bb432/fara_idola/Untitled-1.png
http://i1205.photobucket.com/albums/bb432/fara_idola/wall.jpg
http://i1205.photobucket.com/albums/bb432/fara_idola/cats.jpg
http://i1205.photobucket.com/albums/bb432/fara_idola/body.jpg
6. Then SAVE..tengok hasil menjadi or tak..kalau tak jadi..tinggalkan komen anda..selamat mencantikkan BLOG!
Boleh juga cari di SINI
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
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 :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
@ #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);
Boleh juga cari di SINI
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 {
4. Sila letakkan URL anda di URL imagebackground: url(URL image);border-top: 1px dashed #000000;border-left: 1px dashed #000000;border-right: 1px dashed #000000;border-bottom: 1px dashed #000000;
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 :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 {5. Gantikan code yang dicari di atas dengan code ini
margin:1em 20px;
}
.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..
Subscribe to:
Post Comments (Atom)
0 Meh Komen Disini !:
Post a Comment