Menganti Bullet List Dengan Icon Dan  Garis

Menganti Bullet List Dengan Icon Dan Garis

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 menimbulkan tampilan lebih menarik. Selain merubah tampilan bullet list, bila Anda sedikit menambahkan dan memodifikasi Anda sanggup membuat 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 aba-aba 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/AVvXsEhUZsm9HfNd66KArmi8l1XlnnpMOaXhotBsM013g5U5VToZey510rTAnlAJq4kGhn70sEBRObwkzr5lqXNQD3FGeMifsfryJ-jfGEGdWBFtsVgPEFcNWdtxWpN7lArru0PONPiUJ1rjai_Q/) 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 menyerupai biasa dengan menekan ikon bullet list pada Entri gres atau Anda sanggup melakukannya secara manual menyerupai 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 aba-aba dibawah ini dan pastekan di atasnya </li>
</ul>

Mudah bukan, Semoga bermanfaat!

Sumber http://www.websiteedukasi.com/
Blogger
Disqus
Pilih Sistem Komentar

No comments

Advertiser