Cara Membuat Grid Widget Popular Post Keren Dengan Thumbnail

Memasang Widget Popular Post keren di blog dengan Grid Thumbnail - Widget Popular Post adalah salah satu Widget yang dimana widget tersebut menampilkan Artikel yang sangat Populer atau sering di baca oleh para pengujung yang datang ke blog

Dengan Widget Popular Post ini akan memudahkan baik itu untuk kita yang memiliki blog atau bahkan para pengujung yang datang ke blog kita artikel mana yang sering di baca oleh para pengujung lain nya Baik itu secara perminggu ataupun perbulan

Maka dengan itu tidak sedikit para blogger yang mempercantik widget popular post ini,baik itu dengan membuat tampilan widget Popular Post ini dengan warna warni ataupun yang lain nya,dan kali ini juga saya akan memberikan trik membuat Popular Post ini dengan Grid Thumbnail

Pada Artikel sebelum nya saya pernah share tentang cara membuat widget popular post dengan warna warni,dan kali ini juga saya akan berbagi trik membuat widget popular post dengan menggunakan Grid Thumbnail

Sebenar nya Trik membuat Grid Popular Post ini juga sama seperti trik yang lain nya yang hanya menempatkan kode Css di bagian template,dan merupakan trik yang begitu mudah di lakukan walau hanya seorang newbe

Cara Membuat Tampilan Popular Post dengan Grid Thumbnail

Dan untuk penerapan kode CSS ini anda bisa mengikuti tutorial penerapan di bawah ini,tetapi bagi anda yang sudah paham hanya perlu menerapkan saja kode CSS Grid popular Post di bawah ini di template anda

• Masuk ke bagian Dashboard Blogger
• Setelah itu klik Template
• Kemudian klik Edit Html
• Setelah berada di bagian edit HTml silahkan anda letakan kode CSS di bawah ini

/***** Sidebar Popular Posts - Style 1 *****/
    .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;
      }

• Setelah itu save template dan lihat hasil nya

Nah itulah cara membuat Grid Popular Post di blog,semoga artikel ini bisa membantu blogger lain nya dan tutorial nya juga bisa di pahami,salam blogger

ads

• SHARES
• Share
• Tweet
• Share
• Share

Previous

Newer Post

Next

Older Post

Posted by Dede Ubed, Published at 23 September and have 2 komentar