How to Customize Blogger Thumbnail Sizes


Blogger is an online program in Google that allows people to sign up for an account on the Blogger website and create a personal blog. When a person makes a blog on the website, they also have the option of uploading a photograph to their blog. The photograph may be a picture of the blog's author or it may be any other picture, so long as the image doesn't violate the terms of the website. The photograph will appear as a thumbnail image on the blog. The size of the thumbnail may be customized and made larger or smaller.

  • Click "Dashboard" at the top of the page to go to your dashboard.

  • Click "Design" in the list of options below the title of the blog on the dashboard page.

  • Click "Edit HTML." This option is located near the top left-hand corner of the screen, within the second row of options below the blog's title.

  • Click "Download Full Template" to save a copy of your template before you make any changes to it. This way, if you make a mistake and want to revert back to the way it was before, you will have a saved copy of the previous template.

  • Look for the CSS code "</b:skin>" within the body of the template.

  • Paste the CSS code ".profile-img{width:Valuepx;height:Valuepx}" directly above the other CSS code. If there is an additional CSS code on top of the other CSS code, then paste the new CSS code in between the two. Within the pasted CSS, change "Value" to the number of pixels that you want in your thumbnail picture. The amount of pixels will determine the size of the picture. The first "Value" in the code will be changed to the picture's desired width. The second "Value" will be changed to the picture's desired height. For example, if you want the thumbnail picture to be 200 pixels wide and 150 pixels tall, then the CSS code will be ".profile-img{width:200px;height:150px}."

  • Click the "Save Template" button.

  • Click "View Blog" to see the new thumbnail picture on your blog. If it is not the size you want it to be, then return to the "Edit Template" page and change the numbers that you entered into the CSS code.

Related Searches


  • Photo Credit Jupiterimages/ Images
Promoted By Zergnet


You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!