Cara Membuat Nomor Keren di Postingan Blog

Hallo sobat AakShare, pada tutorial kali ini saya mau berbagi tutorial cara membuat 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 menggunakan properti CSS.

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 ....

1. Login keakun Blogger
2. Pilih Template >> Klik Edit HTML
3. Selanjutnya Anda cari kode ]]></b:skin>
4. 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;
   }
5. Lalu simpan Template
6. 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
7. Publikasikan, perubahan akan terlihat setelah artikel di publikasikan.

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

Share this post