Cara Membuat Style List Number Menjadi Keren Pada Blog

Assalamualaikum wr.wb

Cara Membuat Style List Number Menjadi Keren Pada Blog - Selamat Siang ..

Kali ini admin akan memberikan suatu trik yang dimana bisa mempercantik tampilan blog kalian. karena setiap blog yang mempunyai design menarik, akan banyak disukai oleh para visitor.

Tetapi ada batasan sob, jangan terlalu banyak menambahkan script-script yang bisa membuat loading blog kalian jadi lama yang bisa-bisa membuat para visitor blog kalian jadi pada kabur, karena malas nunggu lama-lama.

Memang sih, kalau dari awal artikel yang kalian bagikan selalu artikel menarik para visitor akan tetap sabar menunggu untuk melihat artikel-artikel kalian selanjutnya. tetapi jika tidak? bagaimana? maka dari itu saya memberikan masukan atau saran agar tidak memberikan terlalu banyak script-script yang memang gak perlu, seperti artikel yang akan saya bagikan kali ini :D

Jika kalian suka dengan Style Number nya silahkan lanjutkan membaca artikel ini sampai kelar, agar tidak ada kesalahan yang terjadi pada blog kalian.

SEBELUM MENAMBAHKAN TRIK INI KE TEMPLATE KALIAN, ADA BAIKNYA JIKA KALIAN BACKUP TERLEBIH DAHULU TEMPLATE NYA. SUPAYA BILA TERJADI CRASH BISA KALIAN RESTORE.

Langsung saja saya berikan tahap cara pemasangannya..

Tahap Pemasangan Style List Number Keren 

1. Silahkan login ke Blogger > Template > Edit HTML
2. Cari kode ]]></b:skin> atau </style> lalu sisipkan kode dibawah ini diatas kode ]]></b:skin> atau </style>

ol {counter-reset:li;list-style: none;font:15px 'Roboto Condensed', 'Oswald';
padding:0;margin-bottom:4em;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:#666;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;}

3. Save Template!!
4. Done :)

Mudah kan sob? tentu donk, meskipun newbie blogger seperti saya, saya rasa kalian juga bisa menerapkannya. tinggal copas doank kok :)

Mungkin sekian dulu artikel dari Cara Membuat Style List Number Menjadi Keren Pada Blog. jika kalian suka dengan artikel ini, luangkan waktu kalian untuk klik iklan pada menu sidebar blog ini.

Terima Kasih Atas Kunjungannya

Wassalamualaikum wr.wb