Add Custom CSS3 Style Numbered list inside Blogger Post
Gaya daftar berarti seri numerik yang dapat digunakan di Blog post . Umumnya secara default Blog memiliki pilihan gaya daftar di mana dengan memilih dua atau lebih baris jika kita klik pada pilihan Daftar maka secara otomatis akan menambahkan nomor seri per baris .
Pilihan ini paling populer di Template Blog serta Music Blog mana besar-besaran digunakan untuk daftar fitur template atau Mp3 daftar lagu . Umumnya di blog musik kita lihat daftar lagu dengan daftar pengguna tetapi sulit untuk menambahkan nomor seri per baris jika kita secara acak membuat posting .
Tapi solusinya adalah dengan menggunakan Daftar widget gaya yang akan membantu Anda untuk menambahkan nomor seri per baris dengan satu kali klik.
Namun widget daftar gaya default blogger:
Namun widget daftar gaya default blogger:
- Tidak menarik atau tidak gaya (tidak keren)
- Tidak bisa mampu menarik pengunjung.
Untuk alasan ini saya berbagi tutorial yang akan membantu Anda untuk menambahkan CSS3 memerintahkan daftar gaya dengan efek hover . Untuk pilihan yang berbeda dari pembaca saya telah merancang 2 gaya . Anda dapat dengan mudah menggunakan daftar gaya CSS3 bernomor .
List style means numeric serial that can be used in Blog post. Generally by default Blog has list style option where by selecting two or more line if we click on List option then it will automatically add the serial number per line. This option is most popular on Template Blog as well as Music Blog where massively use for listing the template feature or Mp3 track list.Berikut ini kode gaya numbered list dalam postingan blog seperti gambar ilustrasi.
Copas di atas kode ]]</b:skin> atau </style>
Kode
ol {counter-reset:li;list-style: none;font:13px 'Open Sans',Arial;
padding:0;margin-bottom:1.5em;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:#282b2b;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;}
Gaya dan Kode lainnya bisa dilihat di Sumber
No comments :
Post a Comment
Leave A Comment...