Sunday, May 15, 2011

Blogger blockquote tutorial

Halu!.. Hari ni aku akan kongsi 1 tutorial tentang blockquote . Suka tak guna feature blockquote ni??.. bagi aku, aku sangat suka. Jadi, hari ni aku akan ajar kamu apa yang boleh kamu customize. Kalau kurang tolonglah ajarkan.. kita sama-sama belajar. Okay. Tutorial ni ada ada beberapa part;
  1. Border
  2. Background
  3. Text
  4. Margin & Padding
  5. Saiz
Inilah diantara hasil yang bakal kamu buat(tapi lagi cantik dari ni laa.. hee)
Sebelum tu sila download dulu Template kamu :D

pengenalan
dalam customizing blockquote ni, kamu akan mengedit bahagian HTML. Sila check template kamu jika ada blockquote dalam CSS. Kalau ada tu, kamu boleh terus customize dari situ, atau padam dahulu.
contoh blockquote(yang kosong):
blockquote {
}
 letak kod yang akan kamu pelajari sebelum ]]>



Border
dengan tag border kamu dapat buat box untuk blockquote. atau pun hanya buat border yang single mingle.

Kotak Biasa see example 1
tambah kod berikut;
border: 1px solid #B5B5B5;
kamu boleh tukar nilai yang ada mengikut kehendak. Sila lihat dibawah.

Single Border see example 2
tambah kod berikut;
border-left:#000 3px solid;
left boleh diubah ikut kesukaan; righttopbottom.
#000 boleh diubah kepada warna yag dikehendaki
3px ialah ketebalan border
nilai solid boleh di tukar kepada nilai yang lain, antaranya;
Border juga boleh di display lebih dari satu; contoh kod;
border-left:#000 3px solid;
border-bottom:#000 3px solid;

Kotak hujung Bulat (Rounded rectangle) see example 3
tambah kod biru berikut;
border: 1px solid #B5B5B5;
-webkit-border-radius: value;
-khtml-border-radius: value;
-moz-border-radius: value; 
nilai value ialah radius yang dikehendaki. Contohnya; 10px. Semakin tinggi nilai, semakin bulat bucu kotak. (hipotesis ka ni?)

Kotak Aneka bucu... Weeeeeeeeeeeeeee, see example 4.
border: 1px solid #B5B5B5;
-webkit-border-radius: a b c d;
-khtml-border-radius: a b c d;
-moz-border-radius: a b c d;
info; nilai: !important!
a - bucu di bahagian atas Kiri
b - bucu di bahagian atas Kanan
c - bucu di bahagian bawah Kanan
d - bucu di bahagian bawah Kiri
contoh;
border: 1px solid #B5B5B5;
-webkit-border-radius: 15px 0 15px 0;
-khtml-border-radius: 15px 0 15px 0;
-moz-border-radius: 15px 0 15px 0;


Background
background blockquote boleh di isi dengan warna serta gambar.

warna background see example 5
letak kod berikut
background:#000000;
Ubah kod# dengan warna yang dikehendaki.

Gambar background see example 7
tambah kod berikut;
background:#000000 url('URL GAMBAR KAMU') no-repeat bottom right;
bottom right ialah posisi gambar. apply no-repeat kalau kamu tidak mahu gambar itu berulang; examples;

no-repeat
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum ornare gravida. Curabitur condimentum, dolor in tincidunt tincidunt, enim magna facilisis odio, sed luctus risus sapien sit amet dui.
repeat
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum ornare gravida. Curabitur condimentum, dolor in tincidunt tincidunt, enim magna facilisis odio, sed luctus risus sapien sit amet dui.
repeat-y
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum ornare gravida. Curabitur condimentum, dolor in tincidunt tincidunt, enim magna facilisis odio, sed luctus risus sapien sit amet dui.
repeat-x
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum ornare gravida. Curabitur condimentum, dolor in tincidunt tincidunt, enim magna facilisis odio, sed luctus risus sapien sit amet dui.


Text

kalau tak suka dengan fon default, kamu boleh tukar fon untuk blockquate dengan menambah kod berikut;
font:normal normal 20px Century Gothic;
tukarkan Tahoma kepada fon yang kamu kehendaki.
value normal ialah style fon: boleh ditukar dengan; normal, italic, oblique
value normal pula weight fon: boleh di tukar dengan; bold, bolder, lighter, klik for more

kamu juga boleh menukar warna fon dengan kod;
color: #AAAAAA; 
tukarkan #aaaaaa kepada warna yang kamu inginkan.


Margin & Padding
untuk mencantikkan lagi blockquote kamu, mestilah ada margin dan padding ni.. dulu aku mula-mula pandai mencincai, pening juga memahamkan diri tentang margin dan padding ni, tapi sekarang okay sikit.. boleh laa. Kira macamni la;

Margin : jarak di luar kotak: diantara border dan elemen lain.
Padding : Jarak dalam kotak: diantara border dan isi didalam kotak.

kalau tiada Margin dan Padding.. blockquote kamu akan jadi macamni;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

contoh kod;
margin: 15px 0px 15px 0px;
padding: 10px 10px 10px 10px;
turutan nilai Margin dan Padding: Top Right Bottom Left
info: jika nilai hanya satu, contohnya margin:15px; @ padding:10px; nilai margin & padding akan di apply kepada semua sisi.
more margin
more padding


Extra: Image sebelum Text;
kombinasi dengan background dan padding serta margin
Contoh;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget nulla ligula, vitae viverra purus. Nullam facilisis, ante sit amet rhoncus pretium, ipsum diam volutpat nibh, id ornare neque arcu ut odio.
Kod;
background: #FFFFFF url('URL GAMBAR') no-repeat top left;
border: 0px;
margin: 10px 0px 10px 0px; 
padding: 0px 10px 10px 25px;
sila beri perhatian kepada nilai padding terakhir, nilai perlu lebih dari saiz image. Atau mengikut kehendak kamu.



Saiz (width)
Saiz juga boleh diubah. hanya perlu tambah kod berikut;
width:value;
value boleh diisi dalam pixels, pt, em, etc. serta %; peratus dalam elemen.
Contoh;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. width:50%;


Edit: Extra: Blockquote dengan styling yang berbeza;
Post blockquote yang berbeza dari default, seperti di dalam CSS.
Contoh;
ini style blockquote aku yang ada dalam CSS
ini yang telah diubah style nya terus dari post
Dalam post selalunya tag blockquote hanya meletakkan tag <blockquote> sahaja, tag style= mesti di tambah selepas tag blockquote di dalam post. Contoh kod bagi blockquote diatas;
<blockquote style="background:#CCFF99; border-left:#7A7A7A 3px solid; border-bottom:#7A7A7A 3px solid; border-top:0px; border-right:0px; font-family:Century Gothic; -webkit-border-radius: 0 0 0px 15px; -khtml-border-radius: 0 0 0px 15px; -moz-border-radius: 0 0 0px 15px; border-radius: 0 0 0px 15px;margin-left:30px;"> ini yang telah diubah style nya terus dari post</blockquote>
lihat border-top:0px; border-right:0px; aku terpaksa restyle 2 border ni sebab dua-dua tag ni ada dalam CSS aku. Samalah juga dengan tag yang lain.


Okey. Sampai situ saja laa. Kamu tolak tambah la apa yang aku ajar tadi, ikut suka kamu. kalau tak mahu border, jangan bagi. Kalau tak mahu background jangan letak.. hehe. Creativity ditangan kamu(dan minda).:D


ini adalah tag blockquote aku dalam CSS/template.
blockquote {
border: 1px solid #B5B5B5;
font-family: Tahoma, Arial;
color: #333;
margin: 15px 0 15px 0;
padding: 10px;
background: #e0e9f0;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Happy Blogging!! 
blockquote ni mempunyai tag float:right;

No comments:

Post a Comment

You can leave your backlinks: <a href="URL">Title</a>

W3Counter