3 Jenis Widget Popular Post Menggunakan CSS3 untuk Blogger

Widget Popular Post merupakam bagian dari situs/blog. Yang menampilkan daftar update reguler suatu artikel yang paling banyak dibaca di situs Anda yang diperuntukan bagi pengunjung Anda. Karena widget ini berfungsi sebagai alat navigasi bagi pengunjung terhadap halaman web/blog anda. Blogspot juga menyediakan widget popular post bagi pengunjung, tetapi secara default itu sangat membosankan, maka saya coba membuat 3 koleksi widget popular Post terbaik menurut saya dengan menggunakan properti CSS3.

- Buka Blog masuk Dashboard → Template → Html Editor
- Cari (menekan Ctrl + F) "]]></b:skin>"
- Copy paste kode CSS dibawah ini tepat di atasnya.

.popular-posts img{display:none}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF  no-repeat scroll 5px 10px;
 list-style-type: none;
 margin:0 0 5px 0px;
 padding:5px 5px 5px 20px !important;
 border: 1px solid #dcdcdc;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 }
.popular-posts ul li:hover {
 background:#FF8040;
 }
.popular-posts ul li a {
 text-decoration:none;
 font:14px Georgia, verdana;
 color:#222222;
 }
.popular-posts ul li a:hover {
 text-decoration:none;
 color:#fff;
 }

.popular-posts{margin-left:-20px}
.popular-posts li{background:#fff}
.popular-posts ul {
 padding-left: 0px;
 counter-reset: popcount;
 }
.popular-posts img{display:none!important}
.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: #ff2e00;
 color: #ffffff;
 position: relative;
 font-weight: bold;
 font-family: georgia;
 float: left;
 border: 2px solid #dddddd;
 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;
 }

.PopularPosts h2{
 padding-right:.4em;
 padding-left:1em
 } 
.popular-posts ul {  padding-left: 0; 
 counter-reset: trackit;/*setting counter-reset*/
 }
.popular-posts ul li {  
 border-bottom: 1px solid #f0f0f0;  
 list-style: none outside none !important;  
 margin-left: 0 !important;  
 overflow: hidden;  
 padding: 10px 0 !important;  
 transition: all 0.25s linear 0s;
 counter-increment: trackit;/*setting counter-increment*/
 }
.PopularPosts ul li:before{
 content: counters(trackit, ".");
 padding: 0 .1em 0 0;
 font-size: 20px;
 font-weight: bold;
 color: #C4C4C4;
 float:left;
 margin-right:10px;
 }
.PopularPosts li:first-child{
 border-top:1px solid #f0f0f0
 }
.PopularPosts li:nth-child(odd)
 {background:#f5f5f5}
.PopularPosts .item-thumbnail, .PopularPosts .item-snippet {  
 display: none!important}
.PopularPosts a, .PopularPosts a:hover{
 color:#959595;
 font-size:.9rem
 }
#PopularPosts1 li{
 padding-right: 1em !important;
 padding-left: 1em !important;
 }
.widget.PopularPosts{padding:1.2em 0em !important}