Cara Memvariasikan Bullet di Blogspot

Halo kawan... kali ini mau posting tentang blogspot dulu, hehe... yaitu tentang cara memvariasikan bullet, teman blogger pasti sudah tahu bahwa type bullet itu ada berbentuk: bulat, persegi, atau berbentuk wajik. Informasi dari Kang Rohman, eh ternyata kita bisa membuat bullet itu dengan gambar yang kita sukai, misalnya photo kita jadi bullet, atau sesuatu simbol yang kita sukai menjadi bullet, nah bagaimana caranya....

Nih... biar sahabat repost ilmu dari Kang Rohman:

Caranya adalah buatlah kode di bawah ini:

==================================================================================
ul.imglist, ul.imglist2 {
margin: 0;
padding: 0;
}
ul.imglist li, ul.imglist2 li {
margin: 0;
}
ul.imglist li {
list-style-image:url('URL-GAMBAR');
}
ul.imglist2 li {
list-style-image:url('URL-GAMBAR2');
}
==================================================================================

Dan di mana kode tersebut harus diletakkan...? Sahabat coba-coba sisipkan kodenya di bawah kode:

#outer-wrapper { ....
....
....
}

Alhamdulillah kodenya berfungsi, dan untuk memanggilnya adalah dengan cara:

<ul class="imglist">
<li>Tes bullet mode 1</li>
<li>Tes bullet mode 1</li>
</ul>

<ul class="imglist2">
<li>Tes bullet mode 2</li>
<li>Tes bullet mode 2</li>
</ul>

sebelumnya, ada baiknya kita mengetahui ciri-ciri orang yang bertaqwa menurut surat Al Baqarah ayat 3 dan 4, yaitu:

1. Percaya kepada yang ghaib
2. Mendirikan shalat
3. Menafkahkan sebagian rizki yang diberikan Allah
4. Percaya kepada Al Qur-an dan kitab-kitab yang diturunkan kepada rasul sebelum Muhammad
5. Percaya adanya kehidupan akhirat

Dengan menggunakan url gambar icon bullet:
http://www.websitebullets.com/bullet/850/1.gif:
,
dan
http://www.websitebullets.com/bullet/215/3.gif:

didapat hasilnya sebagai berikut:

• Tes bullet mode 1
• Tes bullet mode 1

• Tes bullet mode 2
• Tes bullet mode 2

Tapi hasilnya masih kurang maksimal, karena gambarnya yang tampil terpotong, kita akan mengakalinya agar tampil sempurna dengan menggunakan tabel, sehingga kodenya menjadi:

<table border="1" cellspacing="0">
<tr><td>shb</td> <td><ul class="imglist">
<li>Tes bullet mode 1</li>
<li>Tes bullet mode 1</li>
</ul></td> </tr>
</table>
dan hasilnya adalah sebagai berikut:

shb	Tes bullet mode 1 Tes bullet mode 1

Kita bisa lebih menyempurnakan lagi dengan membuat garis tabel berwarna putih dan tulisan shb berwarna putih, sehingga kodenya menjadi:

<table border="1" bordercolor="white" cellspacing="0">
<tr><td><font color='white'>shb</td> <td><ul class="imglist">
<li>Tes bullet mode 1</li>
<li>Tes bullet mode 1</li>
</ul></td> </tr>
</table>

dan hasilnya adalah sebagai berikut:

shb	Tes bullet mode 1 Tes bullet mode 1

Dan untuk bullet mode 2, kodenya menjadi:
<table border="1" bordercolor="white" cellspacing="0">
<tr><td><font color='white'>si</td> <td><ul class="imglist2">
<li>Tes bullet mode 2</li>
<li>Tes bullet mode 2</li>
</ul></td> </tr>
</table>

dan hasilnya adalah sebagai berikut:

si	Tes bullet mode 2 Tes bullet mode 2

Kalau ada yang mengalami kesulitan, jangan sungkan-sungkan untuk menghubungi sahabat ya... : )
Demikian, semoga bermanfaat... :D

Posted in: