How To Increase Thumbnail Resolution On Blogger

When nosotros add together a widget on Blogger, the thumbnails volition hold a default size of 72 x 72px which powerfulness non expect skilful if nosotros endeavor to brand them larger using alone CSS. However, alongside a fleck of JavaScript we'll endure able to supersede the thumbnail alongside the same ikon of higher resolution as well as this way, larger images volition no longer seem blurry.

So this tutorial volition present y'all how to increase the thumbnail resolution size of the pop posts Blogger widget, fifty-fifty though nosotros tin lav utilise this fox on whatsoever of the weblog widgets.

Demo Blog.

Changing the Thumbnail Size for the Popular Posts Widget

Step 1. First, let's add together the Popular posts gadget past times going to "Layout" > click on the "Add a gadget" link as well as conduct "Popular Posts" from the popup window.

Step 2. Next, become to "Template" > click on the "Edit HTML" push > click anywhere within the code expanse to opened upwards the Blogger search box using the CTRL + F keys.

Step 3. Type or glue the next tag within the search box as well as thence hitting Enter to notice it:

</head>

After y'all constitute the </head> tag, add together this CSS to a higher house it:

<style type='text/css'>
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: 130px;
margin: 0 0px 5px;
overflow: hidden;
width: 210px;
border: 2px corporation #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 corporation #EEEEEE;
border-radius: 10px;
box-shadow: 0 4px 10px #EEEEEE;
color: #555555;
padding: 10px;
margin-bottom: 5px;
}
.PopularPosts .item-title {
clear: both
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>

Step 4. Now search for this tag:

</body>

And simply to a higher house it, add together this script:

<script type='text/javascript'>                  
component division changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/w72-h72-p-k-no-nu/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>

Highlighted inwards ruddy is the widget ID for the Popular Posts gadget. To alter the thumbnail size for whatsoever of your weblog widgets, notice the gadget/widget ID as well as and thence add together a draw of piece of job below this part:

changeThumbSize("PopularPosts1",210);
changeThumbSize("widget-ID-HERE",210);

Then supersede widget-ID-HERE text alongside the ID of that widget/gadget.

Note: y'all won't run into the changes if the widget has a class selector - for this y'all may ask to alter class alongside id as well as supersede the point ".>" symbol alongside "#" inwards the CSS code.

If y'all don't know how to notice the id of a item widget, delight banking company tally out this tutorial on How to Use Firebug to Design a Blogger blog.

Step 5. Finally, press the "Save Template" to relieve the changes as well as this is how y'all tin lav increase thumbnail resolution on Blogger. Enjoy!

Share this post