Ada beberapa cara yang bisa kita lakukan untuk memperbesar ukuran thumbnail popular posts tanpa mengurangi kualitasnya seperti dengan menggunakan javascript dan mengedit langsung line html pada widget popular post.
#Menggunakan javascript
Kebanyakan para blogger menggunakan metode ini karena kemudahannya, cukup instal scriptnya, lakukan modifikasi pada style sheet, simpan dan selesai. Contoh javascript dengan fungsi ini salah satunya sebagai berikut<script type="text/javascript">
//<![CDATA[
function toggle_visibility(l){var e=document.getElementById(l);"block"==e.style.display?e.style.display="none":e.style.display="block"};<br>function resizeThumb(e,t){for(var g=document.getElementById(e),m=g.getElementsByTagName("img"),r=0;r<m.length;r++)m[r].src=m[r].src.replace(/\/s72\-c/,"/s"+t),m[r].width=t,m[r].height=t}resizeThumb("PopularPosts1",300);
//]]>
</script>dimana PopularPost1 adalah Id widgetnya dan 300 adalah ukuran gambarnya, 300px pada tinggi dan lebarnya.
#Mengedit Langsung Struktur Html Widget Popular Post
Jika cara diatas dengan menggunakan javascript tidak berhasil, artinya popular post pada blog kalian mungkin menggunakan format baru, bisa kita lihat pada berubahnya format s1600 (umumnya) menjadi w72-h72-p-nu pada thumbnail. contohnya seperti pada alamat gambar ini: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq_Z0J0sxcbI9iUO1l3J234v4ls8w3EFOxsqb0Il4mmNBfgEKVmyMmG4EpyjwfNUi5TSuE43KQhbPJoqfy3raUVAqMqVk2vrLqOjNOX6Rb__rjRKyYP8ilcAdIExoHw39qvPk0i9fa8TnJ/w72-h72-p-nu/fashion-king...Nah untuk mengatasi hal ini, bisa dengan mengedit langsung pada html widget popular posts. caranya yaitu masuk ke template editor, pada tulisan lompat ke widget, silahkan cari widget popular post kalian, umumnya PopularPost1 lalu expand sampai kalian menemukan tulisan ini:
<img alt="" border="0" expr:src="resizeImage(data:post.thumbnail, 72, "1:1")" />
Perhatikan angka 72 tersebut, itu adalah yang merujuk pada ukuran tinggi dan lebarnya 72 px. Nah kalian bisa merubah angka 72 ini dengan ukuran yang kalian inginkan.
#Styling Popular Post
Jika kita sudah mengubah ukuran thumbnail popular post, hal terakhir yang perlu kita lakukan adalah styling pada css. contoh salah satu kode css yang saya ambil di helplogger:
.sidebar .PopularPosts ul {padding:0;}
.sidebar .PopularPosts ul li:first-child{width:100%!important;max-height:100%;height:150px;opacity:.9}
.sidebar .popular-posts ul li:first-child img{border:0!important}
.sidebar .PopularPosts ul li:nth-child(even){
margin-right:2%}
.sidebar .PopularPosts ul li {
box-sizing: border-box;position: relative;
padding: 0px !important;width:49%;
max-height: 120px;opacity: 0.8;overflow:hidden;float: left;
margin-bottom: 2%;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;}
.sidebar .PopularPosts ul li:hover {opacity:1}
.sidebar .PopularPosts .item-thumbnail {margin:0;width:100%}
.sidebar .PopularPosts .item-thumbnail:first-child{margin: 0;width:100%;height:100%}
.sidebar .PopularPosts ul li img {box-sizing: border-box;width: 100%;height:100%;object-fit: cover;padding:0;border:5px solid #F6F5E9}
.sidebar .PopularPosts .item-content:hover .item-title a,
.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {visibility: visible;opacity: 1;}
.sidebar .PopularPosts .item-title a {color:#fff;background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);
text-decoration: none;position: absolute;text-align: center;font: 13px Oswald!important;
left: 0;right: 0;bottom: 0%;padding: 100px 10px 10px;opacity: 0;visibility: hidden;}
.sidebar .PopularPosts .item-snippet {display: none;}
silahkan cari atau edit kode css sesuai dengan keinginan kalian.
note: Sebaiknya dibackup dulu template kalian sebelum mengeditnya...