22/11/11

Tutorial cara buat kotak untuk widget / tulisan #1



Cara buat kotak untuk widget atau tulisan ni senang saja..coding dia simple tapi penggunaan coding ni sangat meluas antara coding yang paling perlu difahami.. ok.. cukup...

Dalam tutorial ni aku sertakan 4 jenis kotak..beserta penerangan ringkas pingkas mingkas kasut..hahhaha



<center><div style="text-align:left;-moz-border-radius:31px 31px;border-radius:13px 13px; padding:5px;height:100px;background:#3D3D3D;color:#bababa;border:2px solid #000fff;overflow:auto;">

masukkan code widget atau tulis apa2 saja sini

</div></center>


kotak bucu semi-bulat




<center><div style="text-align:left; padding:5px;height:100px;background:#3D3D3D;color:#bababa;overflow:auto;">

masukkan code widget atau tulis apa2 saja sini

</div></center>


kotak simple



<center><div style="text-align:left; padding:5px;height:100px;background:#3D3D3D;color:#bababa;border:2px solid #000fff;overflow:auto;">

masukkan code widget atau tulis apa2 saja sini

</div></center>


kotak ber'border'



<center><div style="text-align:left; padding:5px;height:100px;width:300px;background:#3D3D3D;color:#bababa;border:2px solid #000fff;overflow:auto;">

masukkan code widget atau tulis apa2 saja sini

</div></center>

kotak ber'ber'border' dengan kawalan lebar

Penerangan ringkas ;

background:#3D3D3D; -- ini adalah warna background kotak tu..#3D3D3D ialah code warna..tukar ikut warna yang anda mahhuukkaannnn...

color:#ababab; --- ini adalah warna tulisan dalam kotak tu...#ababab adalah code warna tukaq ikut suka hati hang...

border:2px solid #000fff; --- ini code utk border...2px tu tebal border.,cuba tukar 2px ke pada 3000px..mesti pc / lapy anda akan meletup..hahaha... #fff000 adalah code warna untuk border tu...

height:100px; tinggi kotak..tukar angka 100px ikut ketinggian yang anda suka...

width:300px..lebar untuk kotak...jika kotak tu diletakkan pada sidebar..tidak perlu setkan lebar..sebab kotak tu akan ikut lebar sidebar..kalo mau setkan lebar pun blh juga...

overflow:auto; ---jika widget atau tulisan anda lebih panjang atau lebar dari kotak.. akan wujudnya scroll bar..jadi jika kalau malau palau walau tidak mahu scroll bar..pastikan kotak tu lebih tinggi dari widget atau tulisan...

text-align:left; ---code yang akan membuatkan tulisan atau widget anda lepak di sebelah kiri... jika anda tukar code tu kepada --- text-align:center; --- tulisan atau widget akan lepak di tengah2 kotakkkk ... text-align:right untuk tulisan jawi sahaja..('',)

Untuk meletakkan kotak ni pada blog..cara sama macam pasang widget lain...
desaign --- ada gadget---html / javascript..paste kan code dan isi kandungan code sekali kemudian klik



saFe selesai...



code warna rujukSinI



Nota penting : jika anda edit code tu jangan lupa atau silap letak simbol berikut




; : # '



jika anda silap blog anda akan meletup..kebaboom pumpumpum...hahaha

sekian

entri ja

Related Posts Plugin for WordPress, Blogger...