Cara Menciptakan Nomor Keren Di Postingan Blog

Hallo teman AakShare, pada tutorial kali ini saya mau membuatkan tutorial cara menciptakan nomor atau angka di postingan Blog terlihat menjadi lebih menarik. Untuk tutorial ini hampir sama dengan trik merubah Bullet List menjadi Check Lish yakni dengan memakai properti CSS.

Kamu sanggup mendesain ulang dari warna dan font, menariknya lagi pada penomoran ini terdapat effect hover. Jika cursor di tempatkan diatas aksara atau angka maka akan muncul icon segitiga di bab kanan kolom.

teks diantara dua garis yakni 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 gampang kok sobat, yuk pribadi saja berikut  ini langkah-langkahnya ....

1. Login keakun Blogger
2. Pilih Template >> Klik Edit HTML
3. Selanjutnya Anda cari kode ]]></b:skin>
4. Kemudian copy isyarat 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;
   }
5. Lalu simpan Template
6. Untuk menciptakan efeknya Anda klik pada tag nomor untuk pembuatan nomor, Anda sanggup melihat screnshootnya dibawah ini :
   
   
   
   
   Apabila anda ingin membuatnya secara manual menyerupai berikut :
   
   <ol> /*tag pembuka
    <li>Membuat Style Number di Blogger</li>
   </ol> /*tag penutup
7. Publikasikan, perubahan akan terlihat sehabis artikel di publikasikan.

Cukup gampang dan nomor di Blog Anda juga menjadi lebih keren bukan, sekian dari saya supaya bermanfaat!

Share this post