Cara Memasang Popular Post Blogger Gadget 2 Style Keren Abis

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
Cara Memasang Popular Post Blogger Gadget 2 Style Keren Abis

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
Cara Memasang Popular Post Blogger Gadget 2 Style Keren Abis


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/
Cara Memasang Popular Post Blogger Gadget 2 Style Keren Abis Cara Memasang Popular Post Blogger Gadget 2 Style Keren Abis Reviewed by Mgs Rama Dony on 03.35 Rating: 5

2 komentar:

  1. blog agan memang keren
    ane bookmark dulu deh :D

    BalasHapus
    Balasan
    1. makasih gan.

      blog agan juga cakep koq, infonya menarik semua lagi.
      happy blogging ! cheer

      Hapus

Silahkan berkomentar sesuai topik artikel diatas dan jangan buang waktu anda hanya untuk membuat komentar SPAM disini.

Diberdayakan oleh Blogger.