3 Modifikasi tampilan popular post terkeren

Modifikasi tampilan popular post - popular post memang menjadi salah widget yang harus ada dalam blog, karena sebuah widget popular post memberitahukan posting yang paling banyak dibaca/dikunjungi yang memmungkinkan post tersebut dibaca oleh pengunjung blog, kenapa bisa? karena popular post hanya menampilkan posting yang paling banuyak dikunjungi karena posting tersebut unik atau banya dicari oleh pengguna internet.

Semakin menarik tampilan popular post pada blog makin besar juga peluang mendapatkan pageviev dan menolak bounce rate yang tinggi untuk itulah posting ini memberikan sedikit tutorial memodifikasi tampilan popular post pada widget dengan 3 style yang menurut saya paling menarik.

sebelum memasang style berikut pastikan sobat telah menambahkan widget popular post pada blog

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 :D