Cara Memasang Popular Post Blogger Gadget 2 Style Keren Abis

Cara Memasang Popular Post Blogger Gadget 2 Style Keren Abis - Halo, apa kabar sobat blogger? Setelah belakangan ini saya selalu update tentang Template Blogger, akhirnya pada kesempatan kali ini saya bisa kembali share tutorial blogger yaitu Cara Memasang Popular Post Blogger Gadget 2 Style Keren Abiz.

Baiklah untuk mempersingkat waktu, berikut ini Cara Memasang Popular Post Blogger Gadget 2 Style Keren Abiz. Silahkan ikuti langkah-langkah dibawah ini:

Popular Post Blogger Gadget - Style 1

live demo

Step 1: Menambah kode CSS
Silahkan copy-paste kode css dibawah ini dan letakkan diatas tag </b:skin> atau </style>

.popular-posts ul {
  list-style: none;
  padding: 0;
}
.popular-posts ul li {
  float: left;
  width: 150px;
  height: 150px;
  padding: 10px !important;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}
.popular-posts .item-thumbnail {
  margin: 0;
  background-color: #000;
}
.popular-posts img {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding:0;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.popular-posts .item-content:hover img,
.popular-posts .item-thumbnail-only:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  opacity: 0.5;
}
.popular-posts .item-title a {
  color: #fff;
  position: absolute;
  text-align: center;
  left: 12px;
  right: 12px;
  bottom: 40px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.popular-posts .item-content:hover .item-title a,
.popular-posts .item-thumbnail-only:hover .item-title a {
  opacity: 1;
  visibility: visible;
}
.popular-posts .item-snippet {
  display: none;
} 

Step 2: Menambah kode Javascript
Silahkan copy-paste kode javascript dibawah ini dan letakkan diatas tag </body>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type='text/javascript'>
      $('.popular-posts .item-snippet').remove();
      $('.popular-posts img').attr('src', function(e, t) {
        return t.replace('/s72-c/', '/s200-c/')
      });
</script> 

Note: Hapus kode jQuery diatas, jika didalam template sobat sudah terdapat kode yang sama!

Popular Post Blogger Gadget - Style 2

live demo

Step 1: Menambah kode CSS
Silahkan copy-paste kode css dibawah ini dan letakkan diatas tag </b:skin> atau </style>

.popular-posts ul {
  list-style: none;
  padding: 0;
}
.popular-posts ul li {
  width: 100%;
  height: 100%;
  padding: 10px !important;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}
.popular-posts .item-thumbnail {
  margin: 0;
  background-color: #000;
  overflow: hidden;
}
.popular-posts img {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding:0;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.popular-posts .item-content:hover img,
.popular-posts .item-thumbnail-only:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  opacity: 0.5;
}
.popular-posts .item-title {
  padding: 10px 0px;
  display: inline-block;
} 

Step 2: Menambah kode Javascript
Silahkan copy-paste kode javascript dibawah ini dan letakkan diatas tag </body>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type='text/javascript'>
      $('.popular-posts img').attr('src', function(e, t) {
        return t.replace('/s72-c/', '/s350-c/')
      });
      $('.popular-posts ul li .item-snippet').each(function(){
        var txt=$(this).text().substr(0,60);
        var j=txt.lastIndexOf(' ');
        if(j>10)
          $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,' ...'));
      });
</script> 

Note: Hapus kode jQuery diatas, jika didalam template sobat sudah terdapat kode yang sama!

Bagaimana, mudah bukan? Sekian tulisan saya kali ini tentang Cara Memasang Popular Post Blogger Gadget 2 Style Keren Abiz, semoga artikel sederhana ini dapat bermanfaat bagi sobat blogger semua. Sampai jumpa!

Referensi code: http://ar-themes.blogspot.co.id/