Cara Mempercantik Tampilan Numbered List Posting Blog

Cara Mempercantik Tampilan Numbered List Posting Blog

Cara Memperindah Tampilan Numbered List (Daftar Bernomor) Posting Blog. Hasilnya seperti dalam list dalam gambar di bawah ini.


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. Good Luck and Happy Bloggin! (www.contohblog.com).*

Sumber

Thanks for reading Cara Mempercantik Tampilan Numbered List Posting Blog | Labels: Desain Blog edit this post

4 komentar on Cara Mempercantik Tampilan Numbered List Posting Blog

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

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

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

    ReplyDelete

Contact Form

Name

Email *

Message *