Membuat Tampilan Unordered List Pada Postingan

Home » Tutorial » Membuat Tampilan Unordered List Pada Postingan KomentarHot! » Arsip Arsip New!» Back to top

Rabu, 22 Februari 2012

Biasanya pada template yang sudah ada, pada format Unordered List mereka menggunakan simbol atau Unordered List yang default, seperti contohnya di bawah ini :

• Panduan Blogger Pemula,

• Belajar Seo Blogspot,

• Kumpulan Template Blogspot.

Contoh tersebut menggunakan Unordered List default atau umum dan banyak yang menggunakannya, nah tujuan saya membuat panduan yang satu ini adalah merubah tampilan Unordered List default tersebut menjadi lebih menarik, unik, memikat pengunjung, juga agar terlihat rapi.

Pada panduan merubah Unordered List ini saya memberikan dua style atau tampilan yang berbeda dan Anda dapat memilih salah satu dari 2 style yang akan saya berikan.

Sebelumnya, silahkan lihat style atau tampilan dari Unordered List di bawah ini,

Tampilan Unordered List seperti di bawah ini,

Blogger templates,
Templates,
Tool,
Tutorial,
Photoshop,
Javascript,
[./Eggi-Imcyber].

Langsung saja kita awali dengan cara yang paling utama dahulu,

Silahkan kalian login dengan email dan password Anda ke blogger,

Selanjutnya, pada dasboard blog Anda silahkan pilih Template,

Selanjutnya, anda pilih Edit Html dan jangan lupa ceklist Expand Template Widget,

Kode Unordered List

.post-body ul,
.post-body ol{
margin: 1em;
padding-left: 1em;
}
.post-footer ul{
margin: 1em;
margin-top: -0.5em;
padding-left: 1em;
}
.post-body ul li,
.post-footer ul li {
list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZAlOhV4qGmuhOO9_SZGm_2HsB8XZc8i5O12e9l1hELJp0lgFtTLtpXoBGPHk7nRTr3X8Rcy79IFWPNsOqKVXeWmJqDi0cgScZ0ktOuo-b_orv4QG1OsJq86rUKl64WvUILV1t7E56Fpk/s400/uncheck.gif);
border-bottom: 1px solid #ccc;
padding: .2em 0 .2em .5em;
}
.post-body ul li:hover,
.post-footer ul li:hover {
cursor: pointer;
list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT5ErmEWRONzRyw7YwBV9JAUbV2dZhKtvfTBzsN5-V523ppapMgMAc11DypJRzj85VTvfOPwlhyphenhyphenjn_aQIl-_nn9n-sr9JLzxOtnRvTFBfYcJuJBdVWPv66seI7W0U2oNcOAzT75tUaOMo/s400/check.gif);
background-color: #f2f2f2;
color: #B1291F;
}