Cara Menciptakan Nomor Keren Di Postingan Blog

Hallo teman AakShare, pada tutorial kali ini saya mau menyebarkan 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 abjad atau angka maka akan muncul icon segitiga di bab kanan kolom.

Seperti apa yang di utarakan diatas, pembuatannya memakai CSS. Prinsipnya sama dengan teks diantara dua garis ialah 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 eksklusif 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 arahan 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 sesudah artikel di publikasikan.

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


Sumber http://www.websiteedukasi.com/