Cara Membuat Style Number Keren Pada Postingan Blogger

Style Number Keren

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

Rekomendasi: Cara Membagi Postingan di Blog Menjadi Beberapa Halaman

Tetapi ada batasan, 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.

Rekomendasi: Cara Membuat Tombol Demo/Download Seperti Blog Ini

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..
1. Silahkan login ke Blogger > Template > Edit HTML

2. Cari kode]]></b:skin>atau </style> lalu letakan kode CSS dibawah ini diatas ]]></b:skin> atau </style>

CSSol {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

• Demo Style Number

Mungkin sekian dulu artikel dari Cara Membuat Style List Number Menjadi Keren Pada Blog. Semoga Bisa Bermanfaat untuk Kita semua. Terima Kasih Atas Kunjungannya. Salam Blogger!

Tweet