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 3:35 AM Rating: 5

2 comments:

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

    ReplyDelete
    Replies
    1. makasih gan.

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

      Delete

Silahkan berkomentar sesuai topik artikel diatas.
1. Jangan tinggalkan link akitf
2. Jangan gunakan kata kotor, spam, sara, atau provokasi lain
3. Gunakanlah form komentar dengan baik dan bijak

Powered by Blogger.