Cara Membuat Populer Post dengan Grid Tumbnail

adscblog

Populer Post merupakan Feature Widget yang dimana widget tersebut akan menampilkan berbagai artikel yang sering di baca atau sering di baca oleh para pengunjung blog,Populer Post ini bisa di modipikiasi dengan berbagai macam Style,baik itu dengan menggunakan Background Warna,Menambahkan Angak di samping Judul nya baik itu di kiri ataupun di kanan,dan masih banyak lagi Keunikan dari Populer Post ini

Seperti pada artikel kali ini saya akan berbagi artikel bagaimana cara nya agar Tampilan Populer Post ini dengan Grid Thumbnail yang dimana disana hanya menampilkan gambar dengan ukuran besar dan judul artikel nya berada di bagian bawah Thumbnail tersebut,tampilan nya yang sangat mungil sehingga populer Post ini di gunakan di beberapa Blog yang pernah saya kungjungi

Sehingga dengan begitu saya tertarik dengan Modipikasi Populer Post ini dan saya juga berbagi dengan dengan sobat blogger semua,mungkin Populer post ini juga bisa berguna untuk sobat blogger dan bisa di gunakan di blog nya

Memang benar masih banyak tampilan Populer Post yang dapat anda gunakan atau pasang di blog,tetapi apasalah nya jika anda juga mencoba Populer Post yang satu ini,dan untuk melihat contoh nya bisa anda lihat disini (demo)

Tampilan Widget Populer Post Menjadi Grid Thumbnail

Dan jika anda tertarik dengan tampilan Populer Post ini anda juga bisa memasang nya di template anda dengan mengikuti langkah-langkah di bawah ini

• Seperti biasa masuk ke bagian blogger dengan Email dan Posword nya
• Setelah itu silahkan klik Edit Html
• Setelah sobat masuk ke dalam peng editan Html silahkan sobat cari kode </b:skin> atau juga </style> kemudian letakan kode CSS berikut sebelum kode tersebut,untuk memduahkan dalam pencarian anda silahkan tekan kode Ctrl+F secara bersamaan.

/***** 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 anda Meletakan Kode CSS di atas,langkah selanjut nya silahkan anda cari lagi kode </body> dan letakan kode berikut sebelum kode tersebut

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>//<![CDATA[
    $(document).ready(function() {
      var tbn = 150;
      $('#PopularPosts1').find('img').each(function(n, image){
        var image = $(image);
        image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + tbn)});
        image.attr('width',tbn);
        image.attr('height',tbn);
      });
    });
    //]]></script>

• Keumdian Save template dan lihat hasil nya

Nah itulah cara pembuatan atau modipikasi Populer Post di blog menjadi Grid Thumbnail,semoga rtikel nya bisa membantu dan salam blogger.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 06 Juni and have 0 komentar