List Bergambar Dengan CSS

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

CARA MEMBUAT LIST BERGAMBAR DENGAN CSS

Langkah 1

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/AVvXsEgGTPDUAqTXGF6ObKBWFYQ5eONeg4rfW8f8fgK3yFE6JcVGufUAD5vHtCdKCR2H3CM4qKgiaGy1PbWbxkWH7s2sQQqShW8pWw9zhG1DdUUQHblN6JqR90gtqrhNmoATDR4je4-wu7WMfeKO/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/AVvXsEiz_wIW5I0dPsespJq0JP4EzwOW2UY5BJstWdSgFgFnHKxyjGvSOu56ZCJnT4Q27CMgV-n8gz249Da6YgqH9sBAPo37yLRygKWL0MgDaQ3l4mYFFaRS01F4rlcCxoRavrMdPiHikj0YeN4Z/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/AVvXsEh4Ue6Jqe_89x5s4N7u6VNSa06nG6BUsVCMgNz2FizFYKB7j34dynhlyz4UIXkocZ6fsukzwRaU6NBPblcgNtRdJfvyM0-MZBSTRO2SOiz2CR4c_f9Q8QvoMGh8y777O9q3AGHGh3AmlKSg/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/AVvXsEif-Fy827r1tfvn6OTsI4ViFL17zfGTvuoXQe6iI0lAOV_UQhyyG7SA_lvi7o9Q4_ygAi1P1tBRF0RyzjGaLlEJdDRjvCK3tW2Hwm_Cvfellb75bXKS9LjhHDz1Anb1j6o88vb4OFmV33hC/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/AVvXsEjmGe4y-4iEOe-91kwD0wHltFKFXH8fBeIKTx-Veji7Mr96hNYs_BQej1U6ylwJ5UIYAyUdVsV1r5gP09lFIRmvbbm4D9h-Kxmu5mvuzQ5s8qhUCki6chU7iHeaUkEkW8VB7_VB7Sjpbi6t/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/AVvXsEiz_wIW5I0dPsespJq0JP4EzwOW2UY5BJstWdSgFgFnHKxyjGvSOu56ZCJnT4Q27CMgV-n8gz249Da6YgqH9sBAPo37yLRygKWL0MgDaQ3l4mYFFaRS01F4rlcCxoRavrMdPiHikj0YeN4Z/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/AVvXsEjYZgq9xYliJWIlqHwVAsc29MBAkG80BQxtf6rVyg6XAvVrCChbzFdlSmywiq8GCO_C8b8Jm5Zn6S4PvxRTkm7MXQZMMLJLkZqQ_fU8HwgyVL2rOsaL9d4E-rI0ohuI1vYUMt36uzW9SXaq/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/AVvXsEjSIBmTWYO8E54UNtWF9cnOqZ8bexQhG1vl6Cslybl4iWkil7fVjw8zTwwAwLYoNN584yzkNHSKTdBc6G_mdqs5HdUR6p5GWLz_-SUvT10Qz0S5xicwXPZlEskz8VcIrqAFz9edHfPve17_/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/AVvXsEh412USQKm1h_BNRP4XChkk-wdOYVwQ3wz_GY1d8SCWpXMIEglPKhHIjoa8V0Uu9o9w4BQkf9OG3E5K8ObuJnE20r13-t2bf_fgFZ3TJCQuhpuqYthcUYdWO8ISPo7ihonw50vFSTNWwdM5/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/AVvXsEgfIkkW_-sWGEG6iQTA-Wajto9TtEuLD-ox3t34DlPVH66v_B5rifgcCaiGE2hyphenhyphenM2YouHeghzNsR0O1_KSyxE0-W1HIoE34D8QRXX7R2t5Ut2JCYrjAHUFiqJe3RhEw-9HmINIAEAxfeoMj/s1600/circle-bullet-point-image.png');<br  /> }

Langkah 6