Masih bernuansa Design Blog, dan yang satu ini adalah untuk merapikan link-link atau link artikel sobat yang entah berada di posting ataupun di sidebar blog sobat, jenisnyapun bermacam-macam dan list yang ini bukan menggunakan gambar manual, maksudnya kita harus mencantumkan link gambar setiap list, berikut preview sebagian macam-macamnya

---

---

Langkah 1
Login ke Blogger
Langkah 2

Langkah 3

Langkah 4
Kode normalnya seperti ini, maka sobat harus mencari url image untuk diletakkan di IMAGE-URL pada kolom kode dibawah ini
ul.imglist {<br /> margin: 0;<br /> padding: 0;<br /> }<br /> ul.imglist li {<br /> margin: 0;<br /> list-style-image:url('IMAGE-URL');<br /> }
Langkah 5
Namun saya sudah sediakan kode yang siap pakai plus images, pilih salah satu kesukaan sobat dan paste-kan kode dibawah ini pada kolom langkah 3

ul.imglist {<br /> margin: 0;<br /> padding: 0;<br /> }<br /> ul.imglist li {<br /> margin: 0;<br /> list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsAo4eSsfNaweNQVEDgVCQUKYvnftE8F9QchwquldU_2e4tGe3Kv5SGNzhmkmrvgpHKC-DqltVBpm3v-TBTAhRl0B8JztoImy5m3rm9rtSBYcGRFaRFkpT61ZVy0oOVQ2IHGFOq2sDYw-R/s1600/bullet-point-green-tick.png');<br /> }

---

ul.imglist {<br /> margin: 0;<br /> padding: 0;<br /> }<br /> ul.imglist li {<br /> margin: 0;<br /> list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibuxjCMdWSSxTvMyoixbW5p5AogU7T7CcHuJDI_kOEJ3VvK_OU_yc22LiDohdg9dms0LwiyeiKH3BMqQqFrLfrMClUh5W-sDXiMygzEI7i5RTcJDp9DcR1V26oupIxOSNXRK0VLM-_pIE5/s1600/bullet-point-image-6.gif');<br /> }

---

ul.imglist {<br /> margin: 0;<br /> padding: 0;<br /> }<br /> ul.imglist li {<br /> margin: 0;<br /> list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK39vdLqRIwYWTJNG7SQVsu6WjXg465ZNshtvSh66WcJIJu0EtifTptL7U_QGkukEtJnYmycZFLVcgmvF6M_jU5YzEhxJzyEoZrw_G7O9GmiOdLaXLRDCUVM3s4AjoVAIvLKZ8ahxgDEvx/s1600/bullet-point-image-1.png');<br /> }

---

ul.imglist {<br /> margin: 0;<br /> padding: 0;<br /> }<br /> ul.imglist li {<br /> margin: 0;<br /> list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV2LdW20THMVdcz1xft83_o72ztuHIoah9ZqzTCrWvyXwxsFnifH5ZzqngCqp1VLb-IHi3yOix0FC4lD__djyAu_wkuz7aXNUJbfpANwOgmZcumJ0qwwflFW8ETDGA1COg_XfOD0SKEAM-/s1600/bullet-point-image-4.jpg');<br /> }

---

ul.imglist {<br /> margin: 0;<br /> padding: 0;<br /> }<br /> ul.imglist li {<br /> margin: 0;<br /> list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn-wDihu-8-L1nOH4_pRmW-Blkogrn_A84_0pNXamgCn4rSRYPx9KJ57ZgFbQje7OpkV-vx1D_OHprgyXJwox2jqwz2Aayrw_s8_l21hy5hyvkW-SY9h0g39OSOcEU0gxyWJ7F88d5lAwn/s1600/bullet-point-image-5.gif');<br /> }

---

ul.imglist {<br /> margin: 0;<br /> padding: 0;<br /> }<br /> ul.imglist li {<br /> margin: 0;<br /> list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibuxjCMdWSSxTvMyoixbW5p5AogU7T7CcHuJDI_kOEJ3VvK_OU_yc22LiDohdg9dms0LwiyeiKH3BMqQqFrLfrMClUh5W-sDXiMygzEI7i5RTcJDp9DcR1V26oupIxOSNXRK0VLM-_pIE5/s1600/bullet-point-image-6.gif');<br /> }

---

ul.imglist {<br /> margin: 0;<br /> padding: 0;<br /> }<br /> ul.imglist li {<br /> margin: 0;<br /> list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKj-wyhsjJVCoOnWqMDewdKJLThcsrDX36EVfUz3u4LFX5mDqKoFXVTpTEb-2UeykxLStHxrZgsFbCXyxOS1RzVxUSwc8ibFaPU0yBrN8iGXYDaVPpkpt12dd3xmgjs4Zpe9P7eG3jtD_A/s1600/bullet-point-image-8.png');<br /> }

---

ul.imglist {<br /> margin: 0;<br /> padding: 0;<br /> }<br /> ul.imglist li {<br /> margin: 0;<br /> list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt_nAJRVM_I3k7kgHvTMxwIYZaPuetWFf3esqvLWUJu_XNkeOF1Hu0BERRLMf8_58XjLNMzXhyICjKUiTsyurEiVCrczWEIH50K-kfqRI-j2JkNJlKx6dSVRzp8Eh31hD4xkXFPUtioGlO/s1600/bullet-point-image-9.gif');<br /> }

---

ul.imglist {<br /> margin: 0;<br /> padding: 0;<br /> }<br /> ul.imglist li {<br /> margin: 0;<br /> list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb-07-C77VuDCKQCOCMm0CtrDwb3lsE2ME8EmJoDStbHDzOD1ArUSVUqDIy1eB1x6fan9gvtXNZMu75uNU0hLF5z43tkYawezx-XcZ2l3SF9n1SCvNUn3A9LYvdZqacw-fBlEiVObJBlr5/s1600/bullet-point-image-10.gif');<br /> }

---

ul.imglist {<br /> margin: 0;<br /> padding: 0;<br /> }<br /> ul.imglist li {<br /> margin: 0;<br /> list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqRL8yxtVmwv_tghqlv_H0wCjIqsgPtRQBFskl7cEXCo1oIpO5o7CtqbELCGwnFoNkb0mSlGBHQ3hvjp1PgQSDS_m2-KBtKZl5nR4cuUJfcnR_Yo7cDvQqMxgbRWFcWcvdbJ602sxGpfcz/s1600/circle-bullet-point-image.png');<br /> }

---

Langkah 6
Gunakan kode ini untuk memanggil gambar tersebut
<ul class="imglist"><li>List Satu</li> <li>List Dua</li> </ul>
Selamat mencoba.. Semoga berhasil, Heppy Blogging :)

Labels: Blog Design