Home » » Mempercantik Tampilan Numbered List Posting Blog

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

Thanks for reading & sharing Mempercantik Tampilan Numbered List Posting Blog

Previous
« Prev Post

4 comments:

Comment Page:
  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

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox