Meningkatkan Resolusi Thumbnail pada Blogger

Ketika kita menambahkan widget pada Blogger, thumbnail akan menjaga ukuran default 72px x 72px yang mungkin tidak terlihat baik jika kita mencoba untuk membuat lebih besar hanya menggunakan CSS. Namun, dengan sedikit JavaScript kita akan dapat menggantikan thumbnail dengan gambar yang sama dari resolusi yang lebih tinggi dan cara ini gambar yang lebih besar tidak akan terlihat buram/kabur.

Meningkatkan Resolusi Thumbnail pada Blogger
Meningkatkan Resolusi Thumbnail pada Blogger

Mengubah Ukuran Thumbnail untuk Popular Posts Widget

Langkah 1. Pertama, masuk ke Layout> klik pada link Add a gadget dan pilih Popular Posts.
Langkah 2. Masuk ke Template > Edit HTML > tekan tombol CTRL + F untuk membuka kotak pencarian Blogger.
Langkah 3. cari kode </ head> dan tambahkan CSS ini di atasnya:
 <style type='text/css'>
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: 130px;
margin: 0 0px 5px;
overflow: hidden;
width: 210px;
border: 2px solid #EEEEEE;
border-radius: 20px;
}
.PopularPosts .item-thumbnail img {
position: relative;
top: -30px;
transition:all .2s linear;
 -o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.PopularPosts .item-thumbnail img:hover{
opacity:.6;
filter:alpha(opacity=60)
}
.PopularPosts .widget-content ul li {
background: #F9F9F9;
border: 2px solid #EEEEEE;
border-radius: 10px;
box-shadow: 0 4px 10px #EEEEEE;
color: #555555;
padding: 10px;
margin-bottom: 5px;
}
.PopularPosts .item-title {
font: 14px Cambria,Georgia, sans-serif;
color: #2288BB;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.PopularPosts .item-snippet {
display: none;
}
.widget .widget-item-control a img {
height: 18px;
width: 18px;
}
</style>
Langkah 4. Cari kode </ body> dan tepat di atasnya, tambahkan script ini:
<script type='text/javascript'>                  
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("PopularPosts1",210);                  
</script>
Yang saya disorot pada warna merah adalah widget ID untuk Popular Posts - untuk mengubah ukuran thumbnail setiap widget blog Anda, pertama anda harus menemukan ID widget dan kemudian ganti warna merah tersebut dengan ID widget yang ingin anda resolusikan.

Langkah 5. Simpan Template.

Jika anda membutuhkan bantuan lebih lanjut, silakan tinggalkan komentar di bawah ini.