Kamu bisa mendesain ulang dari warna dan font, menariknya lagi pada penomoran ini terdapat effect hover. Jika cursor di tempatkan diatas huruf atau angka maka akan muncul icon segitiga di bagian kanan kolom.
Seperti apa yang di utarakan diatas, pembuatannya menggunakan CSS. Prinsipnya sama dengan teks diantara dua garis yaitu dengan struktur elemen before dan after, nomor akan di hover dan ditransisi kepewarnaan background di sisi sebelah kanan.
Untuk demonya silahkan Anda tempatkan cursor pada nomor-nomor dibawah ini. Dan pemasangannya mudah kok sobat, yuk langsung saja berikut ini langkah-langkahnya ....
- Login keakun Blogger
- Pilih Template >> Klik Edit HTML
- Selanjutnya Anda cari kode ]]></b:skin>
- Kemudian copy kode dibawah ini dan pastekan diatasnya :.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;
}
user agent stylesheetli {
display: list-item;
text-align: -webkit-match-parent;
}
.post ol li:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #0fa9cd;
color: #fff;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.post ol li:hover:after {
left: -.5em;
border-left-color: #0fa9cd;
}
.post ol li:after {
position: absolute;
content: '';
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
ol {
counter-reset: li;
list-style: none;
font: 15px 'Arial';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
user agent stylesheetol {
display: block;
list-style-type: decimal;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
} - Lalu simpan Template
- Untuk membuat efeknya Anda klik pada tag nomor untuk pembuatan nomor, Anda bisa melihat screnshootnya dibawah ini :
Apabila anda ingin membuatnya secara manual seperti berikut :
<ol> /*tag pembuka
<li>Membuat Style Number di Blogger</li>
</ol> /*tag penutup - Publikasikan, perubahan akan terlihat setelah artikel di publikasikan.
No comments:
Post a Comment