CARA MEMBERI NOMOR URUT UNTUK "POPULAR POSTS" BLOGGER

Kalau kita bosan dengan tampilan widget bawaan blog tidak ada salahnya mengedit widget tersebut melalui "edit HTML" Dalam hal ini jika yang ingin kita robah tampilannya adalah widget "popular posts". Kita dapat memberi penomoran dengan label penomoran berwarna seperti contoh popular post milik EditBlog dibawah ini:

Gambar popular posts tema editblog

Caranya masuk kepengaturan dasbor blogger, pilih tema dan lalu pilih "edit HTML". Cari kode:

 ]]></b:skin>

Dan letakan kode dibawah ini tepat diatasnya:

/*--- TRI Popular Posts --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #FF1493;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #FF1493;
box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;

}

Lalu save.

Selanjutnya masuk pengaturan blog, pilih lay-out - tambahkan widget - pilih popular posts - save

Lihat kita telah berhasil memodifikasi tampilan "popular posts" menjadi memiliki nomor urut. Kalau kita ingin merobah warna nomor urut cukup merobah kode warna cssnya (kami beri highligt kuning) silahkan robah sendiri kodenya.

font-size: 16px;
background: #FF1493;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #FF1493;

Tinggal hapus kode warna bawaan pilih dan kopi kode wanra baru yang dapat kita cari di web, lalu pastekan sebagai pengganti kode warna yang telah kita hapus tadi.

Atau klik link: Kode warna css lengkap DianAgung

Trik ini bekerja dengan baik pada tema sederhana blogger

Related Posts

• 
  BLOG FOR TEST: INTRODUCE MY NEW SITEThis new blog for testThere is no big deal even how hard I try to concealed and in the back door: We are fool when we think we has been done with the ...
• 
  FREE FASTER BLOG THEME, THE DEFAULT PREMIUM The faster blog theme isn't means because of its both premium or "non-premium one". The faster one even when you use the default theme and fix some p ...
• 
  MAU MEMASANG IKON AWSOME DENGAN GRADASI WARNA DI BLOG? BEGINI CARANYA!Rekan rekan blogger! Kita bahas sedikit perihal kecenderungan kita sebagai seorang blogger yang terkadang memiliki sensasi sebagai desainer, dan tanp ...
• 
  7 LANGKAH MENJADIKAN TEMA SEDERHANA BAWAAN BLOGGER MENJADI PREMIUM1. Menyembunyikan Navbar. Pertama masuk ke - Dasbor blog - Tataletak-lalu pilih navbar - buka konfigurasi lalu pilih opsi: OFF.2. Buang gambar obeng ...
• 
  CARA MENGGUNAKAN TEMPLATE EDITBLOGTEMA UNTUK DIPAKAI SENDIRI SECARA GRATISJika kita belum berniat atau mampu membeli tema blogger, sedangkan tema bawaan jika tidak di modifikasi dengan benar akan kelihatan sangat standar. M ...
• 
  MEROBAH GAYA DAN UKURAN FONT POSTINGAN BLOG DENGAN OPSI CSS PADA BLOGGERMungkin yang kami kemukan hanyalah masalah kecil bagi sebagian teman teman blogger. Akan tetapi baik gaya maupun ukuran font cukup berperan besar pad ...