Membuat Popular Post Dengan Thumbnail Besar Dan Judul Dibawahnya

Sebelumnya saya telah memposting tema yang sama dengan apa yang akan saya bagikan kali ini, yaitu tentang bagaimana memodifikasi Recent Post dengan tampilan yang lebih futuristik dan menarik tentunya. Popular Post bawaan blogspot selalu dengan thumbnail kecil yang kadang tidak begitu menarik minat Blogger, apalagi kalau misalnya digunakan untuk toko online kurang bisa menampilkan gambar produk secara detail. Sebagai pilihan lain silahkan baca pada posting sebelumnya dengan judul Widget Popular Post Dengan Boks Descriptions Di Dalam Thumbnail

 

Modifikasi Popular Post kali ini menghasilkan ukuran gambar yang besar dan tidak blur dengan judul dan snipet berada dibawahnya, namun jika ukuran gambar yang ini masih kurang besar Anda dapat memasang Popular Post yang saya postin sebelumnya. Untuk lebih jelasnya silahkan perhatikan screenshootnya dibawah ini:

Bagaimana menurut Anda, jika model Popular post ini sesuai selera Anda dapat memasangnya di Blog kesayangan  Anda.
Caranya tidak terlalu sulit kok, hanya dibutuhkan ketelitian saja dan yang lebih penting Anda harus punya kuota (hehehe… bercanda). Oke deh teman… Mari kita mulai tutorialnya:

Sebelum memulai melakukan editing terhadap HTML template, pastikan sudah terpasang widget Popualar Post dalam Blog Anda dan sudah disetting seperti gambar dibawah ini. Pada pilihan tampilkan silahkan centang pada thumbail gambar dan cuplikan.

1. Langkah pertama, buka template HTML  Anda dan temukan tag </head>, untuk mempermudahnya silahkan gunakan shortcut dengan tekan Ctrl+F dan ketikan </head> pada kotak search pada bagian kanan atas, seperti gambar dibawah ini. Setelah itu ENTER

2. Setelah ketemu pastekan CSS dibawah ini tepat diatas tag </head> sepertigambar diatas

<style type='text/css'>
.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;
}
</style>

3. Cari tag <head> dan pastekan kode dibawah ini tepat dibawahnya

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

4. Cari tag </body> dengan cara yang sama seperti diatas dengan menggunakan Ctrl+F, seperti dibawah ini:

5. Setelah ketemu silahkan  pastekan Script dibawah ini tepat diatasnya.

<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;/s72-c/&#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>

Catatan: Jika dalam template Anda sudah terdapat JQuery silahkan Anda hapus kode berwarna diatas.

6. Terakhir SAVE template Anda.

 Popular Post yang Anda pasang pada Blog akan membuat pengunjung mengetahui artikel mana yang banyak dibaca oleh pengunjung lainnya, disamping itu Widget popular post ini juga akan membuat Blog Anda tampil menawan dan ellegan, Selamat mencoba