Cara Membuat Tampilan Popular Post Terkeren

Style Pertama

membuat popular post dengan penomoran otomatis

1. login blogger >> template >> edit html
2. copy paste kode berikut tepat diatas ]]></b:skin>

 .popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; 
}
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Style Kedua

membuat popular post menjadi thumbnail

1. login blogger >> template >> edit html
2. copy paste kode berikut tepat diatas ]]></b:skin>

#PopularPosts1 {width:100%;background:none;} 
#PopularPosts1 .widget-content {margin: 0 !important; } 
#PopularPosts1 ul {margin: 0 !important; padding: 0 !important; } 
#PopularPosts1 ul li {background:none ;list-style-type: none;margin:0;
padding:0 !important} 
#PopularPosts1 ul li .item-title{display:none} 
#PopularPosts1 li {float:left;list-style:none;} 
#PopularPosts1 .item-thumbnail img {float:left;margin-bottom:3px;
width:90px;height:90px;border:none;transition:all 400ms ease-in-out;} 
#PopularPosts1 .item-thumbnail img:hover {opacity:.7}

3. kemudian klik Jump to widget dan pilih Popularpost1
4. cari kode ini <!-- (3) Show only thumbnails --> dibawah kode tersebut ada kode seperti berikut

<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' expr:height='data:thumbnailSize' 
expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>

5. ganti kode diatas dengan kode dibawah ini

<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<img alt='thumbnails' expr:src='data:post.thumbnail' 
expr:title='data:post.title' height='90' width='90'/>
</a>
</div>

untuk menyesuaikan lebar dan tinggi thumbnail edit kode yang distabilo kuning

Style Ketiga

membuat widget popular post berwarna warni

1. login blogger >> template >> edit html
2. copy paste kode berikut tepat diatas ]]></b:skin>

.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  outline:none;
}

.PopularPosts ul {
  margin:.5em 0;
  list-style:none;
  font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
  color:black;
  counter-reset:num;
}

.PopularPosts ul li img {
  display:block;
  margin:0 .5em 0 0;
  width:50px;
  height:50px;
  float:left;
}

.PopularPosts ul li {
  background-color:#eee;
  margin:0 10% .4em 0;
  padding:.5em 1.5em .5em .5em;
  counter-increment:num;
  position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  font-size:120%;
  color:inherit;
  text-decoration:none;
}

.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  top:50%;
  right:-10px;
  margin-top:-15px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

/* Set color & level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

simpan template dan lihat hasilnya :D semoga bermanfaat :