How to Increase Thumbnail Resolution on Blogger alphause

Helplogger Home Blog DesignWidgets SEO Menus Po ... How to Increase Thumbnail Resolution on Blogger 5 comments When we add a widget on Blogger, the thumbnails will keep a default size of 72 x 72px which might not look good if we try to make them bigger using only CSS. However, with a bit of JavaScript we'll be able to replace the thumbnail with the same image of higher resolution and this way, larger images will no longer appear blurry. In this tutorial we will see how we can replace the default thumbnail size of the popular posts widget but we can apply this trick on any of the blog widgets. See a demo HERE. Changing the Thumbnail Size for the Popular Posts Widget Step 1.First, let's add the Popular posts gadget by going toLayout> click on theAdd a gadgetlink and selectPopular Postsfrom the popup window. Step 2.Go toTemplate> click on theEdit HTMLbutton > click anywhere inside the code area and press CTRL + F keys to open the Blogger search box. Step 3.Type or paste thetag inside the search box then hit Enter to find it. After you found thetag, add this CSS above it: Step 4.Search for thetag and just above it, add this script: What I highlighted in red is the widget ID for the Popular Posts gadget - to change the thumbnails size for any of your blog widgets, first you need to find the gadget/widge ID and then add a line below this part: changeThumbSize("PopularPosts1",210); changeThumbSize("widget-ID-HERE",210); ... and replacewidget-ID-HEREtext with the ID of that widget/gadget. Note: you'll not be able to see the changes if the widget has aclassselector - for this you will need to changeclasswithidand replace the dot "." symbol with "#" within the CSS... Step 5.Finally, Save the Template. If you need more help, please leave a comment below. Like 1 Random Posts Possibly the most simple jQuery Slider03/09/2013 - 9 Comments Create a CSS Image Slider with Thumbnails for Blogger13/01/2014 - 4 Comments Fading Box With Newer/Older Posts Links and Titles for Blogger25/05/2013 - 3 Comments Related Posts: How to add custom Variable definiti... Understanding the Page Elements of ... What is the difference between padd... CSS3 Transition Property Basics How to Increase Thumbnail Resoluti... 5 comments: Sanved Tapkeer 2/08/2014 Do you a code for it to work with og:image. Any idea on how to convert it from s72-c to s200-c ? Reply WGM Hammer 2/13/2014 where can i founf my widget id? Reply Danielle Louise 2/14/2014 Hi, How can I make the thumbnail rectangle? I keep getting a square shape every time I try to re-ajust the width/height. Reply Glitter Daily 2/16/2014 is it possible to make this horizontal and remove the post title? Reply Chrissy Lilly 2/20/2014 Is it possible to put the post title underneath the thumbnail? Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,775 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments Joseph V M Hi, I've added pagination to my blog... dara king good Mel Ancheta You did it finally, thanks admin (: sorry for my late reply... Sandra Harriette It never ceases to amaze just how much we can do with Blogger.... Gabor Sziladi One question i still have...how can i keep distance between my... Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 1 Like