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..........

10 komentar:

  1. caranya sepertinya sulit diterapkan ketka pertama baca. setelah praktek ternyata tidak serimit yang aku bayangkan. mudah dan sukses. terimakasih :)

    BalasHapus
  2. berhasil siih tapi kalo di postingan didalam arsip blog gimana caranya yaa?? mohon bantuannya saya pemula hehehe

    BalasHapus
  3. Caranya sebenarnya cukup sederhana, hanya saja kode template yang berbeda-beda yang sering bikin bingung.. Saya sudah terapkan, tapi malah muncul di menu navigation bukan di sidebar..hehe :D

    BalasHapus
    Balasan
    1. Baca dulu dengan seksama setiap fungsi dari HTML/CSS template.... OK "Memang gampang",,, he he he

      Hapus
  4. border-top: dashed 1px #ccc;
    ane tambahin mau bergaris tapi, di listnya paling atas juga ngikut isi garis , doble malahan , padahal kan gak perlu, gmna cara ngakalinnya ya ?

    kalau pakek border-bottom = yang paling bawah yang doble,

    BalasHapus
  5. sippp teimakasih tutorialnya mas ^_^

    Salam kenal

    BalasHapus
  6. mas , ternyata pada tempalte saya susah dan beda beda kodenya

    BalasHapus

Cara menulis komentar
1. Ketik komentar Anda pada Kolom dibawah
2. Pilih account login Anda (Email)
3. Klik 'Poskan Komentar'
Saya harap Anda jangan berkomentar dengan bentuk SPAM, karena tidak akan dipublikasina. Jika Anda ingin menautkan link Blog, silakan be Follower (Baca:Cara menjadi followers blog)

Lebih diutamakan pada komentar yang bersifat ingin tahu (bertanya).