Membuat Widget Popular Post Dengan Berwarna Dan Berurut Nomor

Sebelumnya banyak sekali orang posting tentang blogger dan didalam postingan tersebut pasti tentang mempercantik blogger. Anda melihat blog orang lain agak lebih bagus pasti anda lari ke google untuk mencari tahu caranya.
Cara tersebut sangatlah mudah karena tinggal tambahkan kode CSS akan memudahkan anda dengan mengedit edit.

Bagaimana caranya?

Caranya :

• Anda masuk dahulu ke blogger anda sendiri dan jangan punya orang lain.
• Tambahkan kode dibawah ini tepat diatas/sebelum kode
• ]]></b:skin>
• Kodenya :
• #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
  #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
  #PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
  #PopularPosts1 ul li:first-child:after{content:"1"}
  #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
  #PopularPosts1 ul li:first-child + li:after{content:"2"}
  #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
  #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
  #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
  #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
  #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
  #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
  #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
  #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
  #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
  #PopularPosts1 ul li:first-child:after,
  #PopularPosts1 ul li:first-child + li:after,
  #PopularPosts1 ul li:first-child + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
  #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
  #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
  #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
  #PopularPosts3 img{
      -moz-border-radius: 130px;
      -webkit-border-radius: 130px;
      border-radius: 130px;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      transition: all 0.3s ease;
  padding:4px;
      border:1px solid #fff !important;
      background: #F2F2F2;}#PopularPosts1 img:hover {
      -moz-transform: scale(1.2) rotate(-560deg) ;
      -webkit-transform: scale(1.2) rotate(-560deg) ;
      -o-transform: scale(1.2) rotate(-560deg) ;
      -ms-transform: scale(1.2) rotate(-560deg) ;
      transform: scale(1.2) rotate(-560deg) ;
  }