Tampilan Menarik Unordered List Pada Postingan
Tampilan Menarik Unordered List Pada Postingan - Nah pada kesempatan kali ini saya akan berbagi panduan seputar blogger yang akan selalu update setiap minggunya. Panduan yang akan saya bahas merubah tampilan Unordered List atau yang biasanya disebut bullets. Format Unordered List ini biasanya digunakan pada postingan jika menguraikan kalimat singkat atau poin poin yang diurutkan kebawah yang tidak berurutan dan biasanya diawali dengan simbol • (titik) lalu dilanjutkan dengan kalimat atau poin poin. Menggunakan format Unordered List ini juga memperlihatkan kualitas artikel yang baik, teratur, dan rapi juga lebih baik lahi jika tampilan dari Unordered List ini berbeda dari yang lainnya. Hal ini juga akan memikat para pengunjung yang mampir pada blog Anda dan membaca salah satu artikel yang menggunakan format Unordered List di dalam postingan. Tampilan Unordered List yang akan saya bagikan kepada Anda ini memiliki tampilan icon mini menarik, border bottom untuk setiap kalimatnya, juga memiliki warna latar belakang.
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 pertama,
 |
| Unordered List |
- Blogger templates,
- Templates,
- Blogs,
- Layouts,
- Skins,
- BTemplates,
- Koisine.
Nah, jika Anda ingin menggunakan Unordered List dengan tampilan yang berbeda dari yang lainnya pilihlah Unordered List dari kedua style atau tampilan yang tersedia dan dapatkan kode CSS Unordered List di bawah ini, selamat mencoba dan semoga berhasil.
Kita awali dengan cara yang paling utama dahulu,
- Silahkan kalian login dengan email dan password Anda ke blogger,
 |
| Gambar 1.2 |
- Selanjutnya, pada dasboard blog Anda silahkan pilih Template,
 |
| Gambar 1.3 |
- Selanjutnya, anda pilih Edit Html dan jangan lupa ceklist Expand Template Widget,
Kode Unordered List pertama,
.post ul {background: none repeat scroll 0 0 #FCFBEB;border: 1px solid #EBE9DE;font-family: Verdana,Geneva,sans-serif;list-style: none outside none;margin: 0 10px 15px 30px;padding: 15px 20px;}.post ul li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDvL27smp26FraaUSn34xC67yv3MJP8VuH422Z6R15X8TPtvy5q_OVYm1Y25MoT-6FfNvCx83xtwYKxm-xKbgyQEapH1BNGfjiQ8J7_e8_HjVT_zUFmd-87LG6JDEd7XLxtpyrOiqpFJGR/s0/ico_entry.gif) no-repeat scroll left 13px transparent;border-bottom: 1px solid #D0CFC3;padding: 7px 0 7px 15px;}
Kode Unordered List kedua,
.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/AVvXsEjTSkqfX-BlTQOFOonPkxQjZkg0DGtSLnFlJHsnGcnzCCkGnY-xSssLdcpThYRwu9f9qvJpCmBaNjlMlIGJOCoWhC98TIsDMv8c3K7YmZi5oqKe66BOfSKoy8uGARQ9lT9DnJaBC130lIU/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/AVvXsEhNPm_I4vHDu1HpenJ10QtlqX0GFdog-u0JOsBAMMM09QJYLJtj3RBITHGMo6Ol_2-ek8Q9lcBR535idpBC78l9pes5IN5GigHDeUCo-SMMtYD3xR7WiiJ1EnUO5Md6S2hRLVk2JmU2aHc/s400/check.gif);
background-color: #f2f2f2;
color: #B1291F;
}
Note : Pilih salah satu dari kedua tampilan di atas.
- Selanjutnya, silahkan copy paste salah satu kode CSS tersebut lalu letakan di atas atau sebelum kode di bawah ini,
]]></b:skin>
- Lalu, Simpan Template.
Sekian panduan mengenai Unordered List pada postingan, semoga artikel ini dapat bermanfaat dan dapat dicoba.
Selamat mencoba dan selalu saya ucapkan terima kasih.
4.5
