Cara Membuat Grid Popular Post di Blog

Widget popular post merupakan widget kode yang sudah diberikan secara otomatis oleh platform blogger, namun karena ituu, widget tersebut terasa tidak enak dilihat dan dipandang, nah untuk itu admin membagikan Grid popular post di blog.

Popular post adalah salah satu widget yang menampilkan rincian maupun gambar terkait banykanya para pengunjung yang membaca, Dengan itu jika banyak artikel yang dibaca pengunjung, maka di widget popular post akan tampil di nomor 1.

Nahh sobat, untuk mempersingkat waktu, mari simak berikut ini :

Cara Membuat Grid Popular Post di Blog

Tahap Pertama : 

1. Login ke Blogger sobat

2. Lihat ke tab Tata Letak > Edit HTML

3. Masukkan CSS dibawah ini, Tepat diatas kode ]]></b:skin>

/***** Sidebar Popular Posts - By Chaya Education*****/
    .sidebar .popular-posts ul {
      counter-reset: popcount;
      margin: 0;
      padding: 0;
      }
    .sidebar .popular-posts ul li:first-child {}
    .sidebar .popular-posts ul li {
      font-family:'Oswald','Open Sans','Helvetica Neue',Arial,Tahoma,sans-serif;
      height: 130px;
      list-style: none !important;
      overflow: hidden;
      padding: 0 !important;
      position: relative;
      margin: 2px;
      border: 0;
      width: 48%;
      float: left;
      }
    .sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;}
    .sidebar .PopularPosts ul li img {
      display: block;
      float: left;
      padding: 0;
      width: 100%;
      height: 130px;
      -webkit-transition-duration: 1.0s; /*Webkit: Animation duration*/
      -moz-transition-duration: 1.0s; /*Mozilla Animation duration*/
      -o-transition-duration: 1.0s; /*Opera Animation duration*/
      transition:1.0s;
      }
    .sidebar .PopularPosts ul li img:hover {
      -webkit-transform:scale(1.06); /*Webkit: 0.5 times the original Image size*/
      -moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/
      -o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/
      transform:scale(1.06);
      overflow: hidden;
      }
    .sidebar .PopularPosts .item-title {
      bottom:0;
      left: 0;
      right: 0;
      padding-bottom: 0;
      position: absolute;
      z-index: 999;
     }
    .sidebar .PopularPosts .item-title a {
      background: rgba(32, 32, 32, 0.77);
      color: #FFFFFF;
      display: block;
      font-size: 12px;
      line-height: normal;
      padding: 5px 0px 2px 5px;
      text-transform: capitalize;
      transition: all .4s ease-in-out;
      }
    .sidebar .popular-posts ul li:hover .item-title a {
      color: rgba(255, 255, 255, 1);
      background: rgba(231, 76, 60, 0.88);
      text-decoration: none;
      }
    .sidebar .popular-posts ul li:before {
      background: rgba(255, 252, 8, 1);
      color: #000;
      content: counter(popcount, decimal);
      counter-increment: popcount;
      float: left;
      font-size: 14px;
      line-height: 20px;
      list-style-type: none;
      padding: 0px 8px 1px 1px;
      border-radius: 0px 0px 10px 0px;
      position: absolute;
      top: 0;
      z-index: 4;
      border: solid #FFF;
      border-width: 0px 2px 2px 0px;
      }

4. Simpan Template.
DONE!!

Mudah kan sobat? iya dong kan artikelnya buatan Chayaeducation :D Dah ya sobat, semoga bisa bermanfaat ya+_+