Cara Mudah Membuat Bullet Item (Unordered List) dengan Gambar

Untuk mengurutkan daftar atau list pada sebuah website kita menggunakan OL (Ordered List) dan UL (Unordered List). Penggunaan OL biasanya digunakan untuk mengurutkan dengan Angka atau Huruf sesuai dengan type yang kita kehendaki. Lain halnya dengan UL , kita dapat menggunakannya untuk bullet list. Berikut contoh penggunaan list dengan Unordered List 

• List 1
• List 2
• List 3
• dan seterusnya

Scriptnya adalah sebagai berikut:

<ul>

<li>List 1</li>

<li>List 2</li>

<li>List 3</li>

<li>dan seterusnya</li>

</ul>

Disini kita akan mengganti bullet list menggunakan gambar dengan manfaatkan gambar atau image yang kita tentukan. Dalam CSS kita akan menggunakan property list-style-image dan property list-style-position untuk menentukan letak gambar. 

Untuk contohnya dapat dilihat pada coding berikut ini:

<style type='text/css'>
.gambar_luar
{
  list-style-image: url(&#39;https://googledrive.com/host/0BygVMD_Cmt2KejNTLUx5VzNfMUk&#39;);
  list-style-position: outside;
}
.gambar_dalam
{
  list-style-image: url(&#39;https://googledrive.com/host/0BygVMD_Cmt2KX2dZTktBcnpVRzQ&#39;);
  list-style-position: inside;
}
.ul
{
  margin-top: 1px;
}
</style>

Untuk script tersebut disisipkan setelah b:skin pada blog, seperti ini contohnya:

Pada bullet list ul, tambahkan class="gambar_luar" seperti gambar dibawah ini:

<ul class="gambar_luar">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>dan seterusnya</li>
</ul>

Berikut ini adalah hasilnya membuat Bullet Item dengan Gambar:

• List 1
• List 2
• List 3
• dan seterusnya

Selamat mencoba!