Cara Merubah Popular Post Blogger Menjadi Lebih keren

Hallo !
Kali ini saya akan membahas tentang cara merubah popular post blogger yang biasa menjadi lebih keren ketje dan lutju. Saat kita belajar ngeblog, setidaknya kita akan pernah merubah ataupun menambahkan widget yang ada di template pilihan anda.

Popular Post

Menambahkan Popular Post pada Blog

Oke langkah pertama yang harus dipersiapkan adalah menambahkan widget Popular Post atau Entri Popular di blog anda. Caranya dengan masuk ke menu Tata Letak > Tambah Gadget > Popular Post. Lakukan konfigurasi seperti screenshot berikut ini.

Konfigurasi

Merubah Tampilah Popular Post

Demo

Lalu setelah konfigurasi dan pemasangan selesai, kita masuk ke menu template > Edit Template. Lalu cari tag ]]></b:skin>  dengan cara CTRL+f dan ketik tag tersebut. Lalu copy kode CSS dibawah ini.

.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
width: 100%;
list-style: none !important;
padding: 0 !important;
margin-bottom: 20px;
position: relative;
border: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
height: 120px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
position: relative;
margin-bottom: 15px;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 29px solid #fff;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
bottom: 0px;
content: &quot;&quot;;
height: 0;
width: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail:after {
color: #000;
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
list-style-type: none;
position: absolute;
bottom: 0;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
width: 100%;
height: 120px;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0px auto;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
}

Lalu cari tag <b:skin><![CDATA[  dan tambahkan kode di bawah ini tepat di ATASnya.

<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Lalu cari tag </body> dan tambahkan kode dibawah ini tepat di ATASnya.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/w72-h72-p-nu/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>

Oke jika sudah klik tombol simpan template, dan silahkan lihat di blog anda hasilnya.
Mungkin hanya itu saja yang akan kita bahas pada artikel ini, terimakasih, semoga bermanfaat.