Cara Membuat Icon dan Garis Linklist Sidebar di Blog

List Link Sidebar merupakan tampilan yang ada di sidebar (widget) yang mana berupa list link, seperti archive atau label/kategori. Contohnya seperti gambar di samping.

Pada sebagian template ada yang sudah dibuatkan list-link nya dan ada pula yang tidak ada, atau mungkin ada yang berbentuk bullet dan Anda ingin mengubahnya dengan Gambar yang Anda suka. Pada standar-default untuk script CSS pengaturan sidebar/widget yaitu seperti di bawah ini (template bawaan blogger).

.widget ul, .widget #ArchiveList ul.flat {
padding: 0;
list-style: none;/* pengaturan bullet di sidebar */
}
.widget ul li, .widget #ArchiveList ul.flat li {
border-top: dashed 1px #ccc; /* pengaturan garis bawah di sidebar */
border-top: dashed 1px rgba(128, 128, 128, .5); /* pengaturan garis bawah di sidebar */
}
.widget ul li:first-child, .widget #ArchiveList ul.flat li:first-child {
border-top: none;
}
.widget .post-body ul {
list-style: disc; /* pengaturan bullet di posting */
}
.widget .post-body ul li {
border: none;
}

Namun ada pula yang seperti ini (ini script sidebar/widget yang saya punya)

.main-inner .column-left-inner {
padding: 0px 0 0 20px;
}
.main-inner .column-left-inner .section {
margin-right: 0px;
}
.main-inner .column-right-inner {
padding: 0 20px 0 0;
}
.main-inner .column-right-inner .section {
margin-left: 0px;
}
.main-inner .section {
padding: 0px;
}
.main-inner .widget {
padding: 0 0 15px;
margin: 3px 0;
border-bottom: 1px solid $(widget.border.bevel.color);
}
.main-inner .widget h2 {
margin: 0;
padding: .6em 0 .5em;
}
.footer-inner .widget h2 {
padding: 0 0 .4em;
}
.main-inner .widget h2 + div, .footer-inner
.widget h2 + div {
padding-top: $(widget.padding.top);
}
.main-inner .widget .widget-content {
margin: 0px 0 0;
padding: 15px 0 0;
}
.main-inner .widget ul, .main-inner
.widget #ArchiveList ul.flat {
margin: -$(widget.padding.top) 0px 0px;
padding: -25px;
list-style-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0v66xOklzqcdzJoDqaIUAvTG0rSkvjEraOTGVY8bv7X_vgJqQTdPLgwsN96b_HgkJ__Z_3hoJ6hC0GP1HDFMmUXwJ4dFPGY9dUJwItuT9_q7Ex2WrSJ4dPaPAuo0oSg3aURGIkp1vfRs/");
} /* alamat gambar yang akan kita tambahkan */
.main-inner .sidebar .widget h2 {
border-bottom: 1px solid $(widget.title.border.bevel.color);
}
.main-inner .widget #ArchiveList {
margin: -$(widget.padding.top) 0px 0px;
}
.main-inner .widget ul li, .main-inner
.widget #ArchiveList ul.flat li {
padding: .25em 2px;
text-indent: 0;
border-top: dashed 1px #ccc;
border-top: dashed 1px rgba(128, 128, 128, .5);
}
.main-inner .widget #ArchiveList ul li {
padding-top: .25em;
padding-bottom: .25em;
}
.main-inner .widget ul li:first-child, .main-inner
.widget #ArchiveList ul.flat li:first-child {
border-top: none;
}
.main-inner .widget ul li:last-child, .main-inner .widget #ArchiveList ul.flat li:last-child {
border-bottom: none;
}
.main-inner .widget .post-body ul {
padding: 0 2.5em;
margin: .5em 0;
list-style: square;
}
.main-inner .widget .post-body ul li {
padding: 0.25em 0;
margin-bottom: .25em;
color: $(body.text.color);
border: none;
}
.footer-inner .widget ul {
padding: 0;
list-style: none;
}
.widget .zippy {
color: $(widget.alternate.text.color);
}

Dan masih banyak lagi bentuk CSS untuk pengaturan sidebar. Adapun sebagaimana yang saya tuliskan untuk menambah icon atau hanya untuk merapihkan seperti menambahkan garis atau bullet dan icon hanya ada beberapa pengaturan sederhana yang mungkin kita perlu memahami template kita. Akan tetapi yang akan saya bahas adalah bentuk kesimpulan sekaligus pengalaman saya.

Pada dasarnya untuk membuat bullet dan merapikan link-list di sidebar yaitu dengan mengubah pengaturan "list-style" dan penambahan background (jika ingin menambahkan icon lain). Baiklah, dibawah saya tuturkan beberapa pengaturan Cara Membuat Icon Linklist Sidebar di Blog atau hanya sekedar mempercantik.
1. Membuat garis bawah
Untuk menambahkan garis bawah yaitu dengan mengubah atau menambahkan tag "border".
Ubah border dengan:
1px solid (garis bawah penuh)
1px dotted (garis bawah dengan titik)
1px dashed (garis bawah putus)
2. Membuat icon di awal list
Untuk menambahkan icon yaitu dengan mengubah tag "list-style" atau menambahkan "backgrond"
Ubah atau tambahkan list-style pada
**list-style-type dengan:
circle ( bullet persegi);
disc ( bullet bulat);none;
square 
( bullet berlobang)
list-style-position dengan:
inside;
outside;
list-style-image dengan:
Alamat url gambar (seperti yang saya cetak tebal di atas)

Selamat berkreasi..........