Tutorial Cara Buat List Style Image

Hai all..koz ade ilmu baru nak di kongsi dengan korang...
kebanyakkan korang mesti dah ada Tool List kat blog masing-masingkan...
sebagai contoh:-

1. Budak nakal
2. Budak comel
3. Budak manja

Atau yang ini

• Budak nakal
• Budak comel
• Budak manja

Jadi hari ini koz akan bagi tutorial nak gunakan icon sebagai pembahagi list korang seperti ini:-

• Budak nakal
• Budak comel
• Budak manja

Cara-cara nak buat seperti biasa mudah sahaja...korang cuma gunakan code di bawah:-

<ul style="list-style-image:url(http://img99.imageshack.us/img99/7790/bigeyescreature16x16.png);">
<li>List Pertama</li>
<li>List Kedua</li>
<li>List Ketiga</li>
</ul>

Pada code tertulis List pertama,kedua dan ketiga tu korang boleh ganti dengan ayat yang korang nak...

Dan cara nak tambah list mudah sahaja korang cuma tambah code ini

<li>List Tambah</li>

sebelum atau di atas code ini

</ul>

Icon pulak korang boleh tukar dengan icon ke sukaan korang...Saiz icon tersebut jangan terlalu besar ,saiz terbaik adalah bawah 25X25...

Di sini koz Kongsikan sekali icon2 comel...lau berkenan ambil lah...

http://img692.imageshack.us/img692/7130/tentaclescreature16x16.png

http://img690.imageshack.us/img690/8579/whitecreature16x16.png

http://img17.imageshack.us/img17/5663/blackcreature16x16.png

http://img340.imageshack.us/img340/755/pinkcreature16x16.png

http://img69.imageshack.us/img69/7790/bigeyescreature16x16.png

http://img413.imageshack.us/img413/8315/greencreature16x16.png

Camat Mencuba...

Tutorial Cara Letak Bingkai / Kotak Pada Post

Hai all...hari ni tak ada tutorial yang nak di kongsikan...koz sesaje jek nak beri ucapan selamat pagi dekat korang...hahah gurau je...^_^okey...next tutorial hari ini koz akan ajar korang cara nak taruk bingkai/kotak pada perkataan/ayat yang korang post di blog korang...cara-cara nak buat mudah sahaja...Sila lihat contoh dan code yang ada di bawah...

Tutorial Budak Nakal Kotak'solid'.

<p style="border:4px solid black;">Tutorial Budak Nakal Kotak'solid'.</p>

Tutorial Budak Nakal Kotak'dotted'.

<p style="border:4px dotted black;">Tutorial Budak Nakal Kotak'dotted'.</p>

Tutorial Budak Nakal Kotak'dashed'.

<p style="border:4px dashed black;">Tutorial Budak Nakal Kotak'dashed'.</p>

Tutorial Budak Nakal Kotak'double'.

<p style="border:4px double black;">Tutorial Budak Nakal Kotak'double'.</p>

Tutorial Budak Nakal Kotak'groove'.

<p style="border:4px groove black;">Tutorial Budak Nakal Kotak'groove'.</p>

Tutorial Budak Nakal Kotak'ridge'.

<p style="border:4px ridge black;">Tutorial Budak Nakal Kotak'ridge'.</p>

Tutorial Budak Nakal Kotak'inset'.

<p style="border:4px inset black;">Tutorial Budak Nakal Kotak'inset'.</p>

Tutorial Budak Nakal Kotak'outset'.

<p style="border:4px outset black;">Tutorial Budak Nakal Kotak'outset'.</p>

Tutorial Budak Nakal Kotak'hidden'.

<p style="border:4px hidden black;">Tutorial Budak Nakal Kotak'hidden'.</p>

Kemudain korang boleh taruk ayat yang korang nak dan juga boleh ubah warna bingkai kesukaan korang pada code warna merah...
Camat mencuba...

Tutorial Cara Nak Letak Line Pada Perkataan Di Blog

Hai all..ahak untuk hari ni koz bukan kasi 1 atau 2...tapi tiga tutorial untuk korang hihi...semangat untuk sumbangkan ilmu ini makin berkobar2 lak...hiihi..
okey,next tutorial pada hari ini,koz nak ajar korang cara nak letak line pada ayat/perkataan...senang sahaja tutorial ini...dekat bawah ini koz ade sediakan contoh dan code dier...

1)Line Dekat Atas

Tutorial DariBudak Nakal...

<p style="text-decoration:overline;">Tutorial DariBudak Nakal...</p>

2)Line Dekat Tengah

TTutorial DariBudak Nakal...

<p style="text-decoration:line-through;">TTutorial DariBudak Nakal...</p>

3)Line Dekat Bawah

Tutorial DariBudak Nakal...

<p style="text-decoration:underline;">Tutorial DariBudak Nakal...</p>

Pilih mana yang berkenan...

Camat mencuba...