Menganti Bullet List dengan Icon dan Garis

Menganti Bullet List dengan Icon dan Garis - Apakah Anda bosa pada tampilan Bullet List???
Solusinya dengan merubah tampilan bullet list dengan Icon dan garis menjadikan tampilan lebih menarik. Selain merubah tampilan bullet list, jika Anda sedikit menambahkan dan memodifikasi Anda dapat menciptakan tampilan lain seperti bullet liast menjadi check list . Berikut ini Screnshotnya :

Bagaimana Anda tertarik, berikut ini langkah-langkahnya :

1. Login keakun Blogger

2. Pilih Template >> klik Edit HTML

3. Kemudian Anda cari kode ]]></b:skin>

4. Lalu salin kode dibawah ini dan pastekan di atasnya

ul li {
list-style: none;
padding: 9px 5px 9px 14px;
border-bottom: 1px solid #eee;
line-height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRYq-0KxKI1fzXQTAK2ai1J6BcGkNl7RWc53noZUCyC2BWLQ3tADtDtHwrWUHAHqxg0x-VvdSbh1Co2rfwjqw9r4VmO7R5V-HA5r7NoS3S6nJ6goxpbOGOiTtr7VzagZ3bI5XCCPMersSp/) no-repeat 0 14px;
}
user agent stylesheetli {
display: list-item;
text-align: -webkit-match-parent;
}
ul li{
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}

5. Simpan Template

Silahkan Anda membuat bullet list seperti biasa dengan menekan ikon bullet list pada Entri baru atau Anda bisa melakukannya secara manual seperti berikut :

<ul>
<li>1. Login keakun Blogger</li>
<li>2. Pilih Template >> klik Edit HTML</li>
<li>3. Kemudian Anda cari kode ]]></b:skin></li>
<li>4. Lalu salin kode dibawah ini dan pastekan di atasnya </li>

</ul>

Mudah bukan, Semoga bermanfaat!

Subscribe to receive free email updates: