Widget Popular Posts Bernomor Di Blogger

info-gamepc.blogspot.com - Artikel kali ini, mengajarkan kamu bagaimana membuat Popular Post bernomor yang bisa kamu lihat pada gambar disamping kiri.

Tertarik dengan jenis popular post tersebut, kalo jawabanmu Iya, ok mari kita praktekkan bareng-bareng.

1. Masuk ke Blogger kamu.

2. Masuk ke Template pilih Edit HTML.

3. Cari kode ]]></b:skin> dan paste kode dibawah ini diatas kode ]]></b:skin>.

.popular-posts ul li a { background: none repeat scroll 0 0 #222222; color: #FFFFFF; display: block; margin: 10px 0; padding: 25px 15px 30px; position: relative; text-decoration: none; transition: all 0.3s ease-out 0s; width: 85%; } .popular-posts ul li a:before { background: none repeat scroll 0 0 #2DB3E9; color: #FFFFFF; font-weight: 700; height: 2em; line-height: 2em; margin-left: 88%; padding: 4px; position: absolute; text-align: center; width: 2em; transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; } .popular-posts ul li a:hover { opacity: 0.8; } .popular-posts ul li a:hover:before { border-left-color: #CCCCCC; left: -1px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; } .popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before { content: "10"; } .popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before { content: "9"; } .popular-posts ul li:first-child + li + li + li + li + li + li + li a:before { content: "8"; } .popular-posts ul li:first-child + li + li + li + li + li + li a:before { content: "7"; } .popular-posts ul li:first-child + li + li + li + li + li a:before { content: "6"; } .popular-posts ul li:first-child + li + li + li + li a:before { content: "5"; } .popular-posts ul li:first-child + li + li + li a:before { content: "4"; } .popular-posts ul li:first-child + li + li a:before { content: "3"; } .popular-posts ul li:first-child + li a:before { content: "2"; } .popular-posts ul li:first-child a:before { content: "1"; } .item-snippet { display: none; } .PopularPosts .item-thumbnail { display: none; }

4. Simpan template kamu, coba dibuka Blog kamu.. Jreng..!!!!!!!!!!!!