Cara Membuat Widget Popular Post Keren Dengan Thumbnails Dan Urutan Angka

Cara Membuat Widget Popular Post Keren Dengan Thumbnails Dan Urutan Angka . Popular post digunakan untuk menampilkan posting yang paling s...

Cara Membuat Widget Popular Post Keren Dengan Thumbnails Dan Urutan Angka. Popular post digunakan untuk menampilkan posting yang paling sering dibaca dengan total jumlah pageview paling banyak atau yang paling populer di blog anda dibandingkan dengan artikel anda yang lain. Untuk menunjukkan posting mana yang paling populer, bisa disesuaikan dengan setelan populer per minggu atau perbulan.

Fitur Widget ini diantaranya :
  • Judul posting berada didalam gambar dengan transparan warna hitam
  • Efek zoom jika diletakkan mouse
  • Ada urutan angka disisi kiri atas
  • Gambar jelas (tidak blur) dan bisa diresize
  • Warna, tinggi dan lebar bisa di kustomisasi
  • Gratis 
Screenshotnya :

Langkah langkahnya adalah sebagai berikut :

1. Backup dulu template sebelum di ubah.
2. Ubah dulu setelan  widget popular post jadi seperti ini:

2. Letakkan kode dibawah ini tepat dibawah < / body>
<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>
3. Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

/***** 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;
  }
4.jika ada masalah (troubleshooting) silahkan ubah kode CSS .sidebar .popular-posts (warna hijau) sesuaikan dengan nama kode CSS dalam side bar popular post di blog anda biasanya ada yang bernama .sidebar-wrapper .popular-post ada juga bernama .sidebar-content .popular-posts dll

Selamat mencoba

COMMENTS

Nama

Android,5,Bisnis,3,Film,1,Lifestyle,1,News,2,Olahraga,5,Paket Internet,6,Selebrity,11,Sosmed,14,Techno,1,Trik Blogging,26,
ltr
item
PROSOSMED: Cara Membuat Widget Popular Post Keren Dengan Thumbnails Dan Urutan Angka
Cara Membuat Widget Popular Post Keren Dengan Thumbnails Dan Urutan Angka
https://3.bp.blogspot.com/-CTK3DnJ4zSc/V3JCHBwpMiI/AAAAAAAACa4/6hbFqzDVrCcIhbUDFOGSkE79vNWm3jN5gCLcB/s1600/sc%2Bshoor.png
https://3.bp.blogspot.com/-CTK3DnJ4zSc/V3JCHBwpMiI/AAAAAAAACa4/6hbFqzDVrCcIhbUDFOGSkE79vNWm3jN5gCLcB/s72-c/sc%2Bshoor.png
PROSOSMED
http://www.prososmed.tk/2016/06/cara-membuat-widget-popular-post-keren.html
http://www.prososmed.tk/
http://www.prososmed.tk/
http://www.prososmed.tk/2016/06/cara-membuat-widget-popular-post-keren.html
true
5389799211285355543
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy