Membuat kotak blogroll

Tutorial kali ini penulis ingin menunjukkan cara membuat kotak blogroll atau skrol menggunakan kod html.Fungsinya sebagai tempat simpan bagi label/kategori posting anda yang dah terlalu banyak/panjang.Kalau label/kategorinya dah panjang berjela-jela nampak tak sedap mata memandang.Tanpa basa-basi lagi kita terus ke tutorialnya

Blogroll tanpa border

• Tekslink-1
• Tekslink-2
• Tekslink-3
• Tekslink-4
• Tekslink-5

Kodnya

<div style="overflow:auto;width:400px;height:100px;border:0px solid #FFFF00">
<ul>
<li><a href="http://URL-Blog-1">Tekslink-1</a></li>
<li><a href="http://URL-Blog-2">Tekslink-2</a></li>
<li><a href="http://URL-Blog-3">Tekslink-3</a></li>
<li><a href="http://URL-Blog-4">Tekslink-4</a></li>
<li><a href="http://URL-Blog-5">Tekslink-5</a></li>
</ul>
</div>

Jika anda mahu bordernya kelihatan, tukarkan nilai border:0px ke 1px.Lebih tinggi nilai px lebih tebal bordernya

Hasilnya

• Tekslink-1
• Tekslink-2
• Tekslink-3
• Tekslink-4
• Tekslink-5

Jika anda mahu letakkan gambar/warna bagi background blogroll,tambahkan kod background:#EDEDED selepas kod solid #FFFF00;

Hasilnya

• Tekslink-1
• Tekslink-2
• Tekslink-3
• Tekslink-4
• Tekslink-5

<div style="overflow:auto;width:400px;height:100px;border:2px solid #FFFF00;background:#EDEDED">#####</div>

Jika anda mahu Tekslinknya berada ditengah,kiri atau kanan, cukup tambahkan kod text-align: left/center/right

Hasilnya

• Tekslink-1
• Tekslink-2
• Tekslink-3
• Tekslink-4
• Tekslink-5

<div style="overflow:auto;width:400px;height:100px;border:2px solid #FFFF00;background:#EDEDED;text-align:center">####</div>

Keterangan

Anda boleh dan harus mengubah width(lebar), heigh(tinggi), border(nilai px), background(#warna) dan text-align(left,right,center)bergantung dimana anda letakkan blogroll tersebut dan mengikut kesesuaian .

Selesai

Mungkin artikel dibawah yang sedang anda cari