Mempercantik Tampilan Numbered List Posting Blog

Cara Memperindah Tampilan Numbered List Posting Blog


Mempercantik Tampilan Numbered List Posting Blog
DALAM posting blog kadang kita membuat numbered list, yaitu daftar kalimat/kata yang diberi nomor.

Contohnya seperti gambar ilustrasi di posting ini.

Kita sudah lama mengenal istilah "Bulleted & Numbering" ini di MS Word. Di blog juga ada. Istilahnya sama: Bulleted List alias daftar yang dikasih nomor.

Menampilkan Numbered Lists seperti ini sangat dianjurkan agar tulisan kita di blog lebih "ramah pengguna" (user friendly).

Cara Mempercantik Tampilan Numbered List Posting Blog

Cara membuatnya sangat mudah:

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode ]]</b:skin> atau </style>

ol {counter-reset:li;list-style: none;font:15px &#39;Montserrat&#39;, Sans-Serif;
padding:0;margin-bottom:2em;text-shadow: 0 1px 0 rgba(255,255,255,.5);}
ol ol {margin: 0 0 0 2em;}
.post ol li{position:relative;display:block;padding:.4em .4em .4em .8em;
margin:.5em 0 .5em 2.5em;background:#fafafa;color:#666;text-decoration:none;
transition:all .3s ease-out;}
.post ol li:hover{background:#f9f9f9;}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;
left:-2.5em;top:50%;margin-top:-1em;background:#48d;color:#FEFEFE;height:2em;width:2em;
line-height:2em;text-align:center;font-weight:bold;}
.post ol li:after{position:absolute; content:&#39;&#39;;border: .5em solid transparent;
left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
.post ol li:hover:after{left:-.5em;border-left-color:#e74c3c;}
.post ol li span{position:relative;display:block;padding:5px 8px;margin-bottom:10px;background:#fafafa;color:#666;text-decoration:none;transition:all .3s ease-out;}
.post ol li span:hover{background:#f9f9f9;}

3. Save template!

KODE LAIN/WARNA LAIN:

Mempercantik Tampilan Numbered List Posting Blog

Jika ingin seperti gambar di atas ini, maka kodenya:

ol {counter-reset:li;list-style: none;font:15px 'Roboto Condensed', 'Oswald';
padding:0;margin-bottom:4em;text-shadow: 0 1px 0 rgba(255,255,255,.5);}
ol ol {margin: 0 0 0 2em;}
.post ol li{position:relative;display:block;padding:.4em .4em .4em .8em;
margin:.5em 0 .5em 2.5em;background:#F5F5F5;color:#666;text-decoration:none;
transition:all .3s ease-out;}
.post ol li:hover{background:#EEEEEE;}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;
left:-2.5em;top:50%;margin-top:-1em;background:#FA8072;color:#FEFEFE;height:2em;width:2em;
line-height:2em;text-align:center;font-weight:bold;}
.post ol li:after{position:absolute; content:'';border: .5em solid transparent;
left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
.post ol li:hover:after{left:-.5em;border-left-color:#FA8072;}
.post ol li span{position:relative;display:block;padding:5px 8px;margin-bottom:10px;background:#fafafa;color:#666;text-decoration:none;transition:all .3s ease-out;}
.post ol li span:hover{background:#f9f9f9;}

Demikian Mempercantik Tampilan Numbered List Posting Blog.

Sumber

Labels: Desain Blog
4 Komentar untuk "Mempercantik Tampilan Numbered List Posting Blog"

Wehhh...keren nih om. Tar ane pake.

caranya biar angka tidak center di tengah-tengah tulisan gimana om CB? Kurang rapih kayaknya kalau tidak berada di awal kalimat...
terima kasih,

Mantap ini gan. Terimakasih, sangat membantu. Hasilnya pun keren..

1. Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *