Wednesday, April 26, 2017

Increase Thumbnail Resolution on Blogger

By default, in Blogger when we add a widget, the default side of every widget and thumbnail resolution on blogger will be 72 x 72 which might not look good. So, do you need a change thumbnail resolution?

Then you landed at the right place, this post walk you through the tutorials on how to change the thumbnail resolution on blogger as per your wish. We need to add a JavaScript to your blog to bring the fresh look. Don’t worry here after you don’t need to worry about large image getting blurry in your blog.




Steps to change the Thumbnail Resolution on blogger popular posts widget


Step 1. Click on “Layout” and then on “Add a Gadget” and select “Popular Posts” under the popup window to add the popular post gadget.

 



 

Step 2.Then, click on “Template” > “Edit HTML” > open search box by clicking anywhere inside the code area “ CTRL+F keys”.



 

Step 3. Now, enter the below in the search box to locate the keyword in the code area.

<code>  </head>  <code>

 

Step 4: Once you found the </head> tag, add this CSS code above 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 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 {
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 5. Then search for the below tag:
</body>

Step 6: Now add this script above it.
<script type='text/javascript'>                   
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/w72-h72-p-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>


 

Widget ID is highlighted in the Popular Posts gadget. To change the thumbnail resolution of your blog widgets, search the gadget ID and add this line below this part

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

Then replace widget-ID-HERE text with the respective ID of that gadget/widget.

Note: Please make sure that you don’t misplace any “.” Or ”#” to avoid errors.

Step 7. The final step is "Save Template" to update the changes and this is how you will change thumbnail resolution on your Blogger. Hope you enjoyed it!

 

0 comments:

Post a Comment