Kumpulan Widget Popular Post

Kumpulan Widget Popular Post Di mulai ketika saya memulai nge blog,saya menemukan banyak sekali tempilan tampilan Popular Post selain dari bawaan Blogger. berikut Widget – widgetnya. Dan jika sobat berminat silahkan di pilih.

KODE

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
 #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 10px 0px -5px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; }#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}#PopularPosts1 ul li:first-child + li + li:after{content:"3"}#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}#PopularPosts1 ul li:first-child + li:after{content:"2"}#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}#PopularPosts1 ul li:first-child:after{content:"1"}#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px;}#PopularPosts1 img {border-radius:200px;width:60px; height:60px;margin-left:4px;}

KODE

.PopularPosts li {margin-bottom:-10px}
.PopularPosts .item-thumbnail {float:left}
.popular-posts ul li img {
  width:60px;
  height:60px;
  padding:2px;
  -moz-border-radius:60px;
  -webkit-border-radius:60px;
  border-radius:60px;
  -webkit-transition:all 0.3s ease;
  -moz-transition:all 0.3s ease;
  transition:all 0.3s ease;
  border:2px solid #CCC;
}
.popular-posts ul li img:hover {
  border:2px solid #ccc;
  -moz-transform:scale(1.2) rotate(-360deg);
  -webkit-transform:scale(1.2) rotate(-360deg);
  -o-transform:scale(1.2) rotate(-360deg);
  -ms-transform:scale(1) rotate(-360deg);
  transform:scale(1.2) rotate(-360deg);
}
.popular-post-isi {
  position:relative;
  background-color:#f7f7f7;
  padding:5px;
  min-height:60px;
  border:1px solid #ccc;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  margin-left:75px;
  margin-bottom:5px;
}
.popular-post-isi:before {
  content:"";
  width:0;
  height:0;
  position:absolute;
  right:100%;
  top:19px;
  border-width:10px;
  border-style:solid;
  border-color:transparent #f7f7f7 transparent transparent;
}
.item-title {
  font-size:12px;
  line-height:1.1em;
}
.item-snippet {
  color:blue;
  font-size:11px;
  line-height:1em;

}

Untuk cara pemasangan Widget Popular Post : -Buka Dasboard > Template > Edit Template (Jangan lupa di Backup data ) -Copy Kode di atas yang telah sobat pilih dan pastekan tepat diatas ]]></b:skin>