How To Vary Bullet On Blogspot

Hello friends... this time will post about blogspot, hehe... it is about how to vary bullet, if blogger friends certain have known that bullet has type: circle, square, or may be others, Information from Kang Rohman, in fact we can make the bullet with image we like, for example our photo be bullet, or symbol of something we can make it be bullet, hm... how the way...?

Oke... let sahabat repost knowledge from Kang Rohman:

The way is make code below:

==================================================================================
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');
}
==================================================================================

And where the code will be placed...? Sahabat try to insert the code below of code:

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

Alhamdulillah its code worked, and way to call it is:

<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>

before, will be better we know characteristic of pious based on surah Al Baqarah verse 3 and 4, are:

1. Believe in the unseen
2. Establish prayer
3. Spend out of what Allah have provided for them
4. Believe in Qur-an and and holy book was revealed before Muhammad
5. Believe in hereafter

With using bullet icon image url:
http://www.websitebullets.com/bullet/850/1.gif :

and
http://www.websitebullets.com/bullet/215/3.gif :

got the result as follows:

• Tes bullet mode 1
• Tes bullet mode 1

• Tes bullet mode 2
• Tes bullet mode 2

But its result is not still maximal, because image shown be truncated, we will to seek away so that image show perfect with using table, so that its code be:

<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>
and its result is as follows:

shb	Tes bullet mode 1 Tes bullet mode 1

We can more perfect it with make border table colored white and "shb" lettering colored white also, so that its code be:

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

and its result is as follows:

shb	Tes bullet mode 1 Tes bullet mode 1

And for bullet mode 2, its code be:
<table border="1" bordercolor="white" cellspacing="0">
<tr><td><font color='white'>si</font></td> <td><ul class="imglist2">
<li>Tes bullet mode 2</li>
<li>Tes bullet mode 2</li>
</ul></td> </tr>
</table>

and its result is as follows:

si	Tes bullet mode 2 Tes bullet mode 2

If there is constraint, don't hesitate to call sahabat ya... : )
So, hopefully useful... :D

Posted in: