Tuesday, June 23, 2009

Tutorial: Blogger Template Size Modification

I have been asked a few times about how to technically modify their blog the way mine is from the generic template that Blogger.com gives and just recently I found out how to make my images on the site much larger than the standard size Blogger dictates. I thought today I would share because I am cool like that. Warning geek speak about to follow, if you are not interested in editing your blog I suggest you go look at these lovely puppies I took pictures of a few weeks ago. It will make you feel warm and fuzzy inside because they are just THAT DAMN CUTE.


Blogger sets its generic templates to computers that have a monitor (the thing sitting on your desk) that is size 800x600. Most monitors according to this site, have a higher size of at least 1024x768. That means that you can gain 224 pixels in width for your blog.

1. To set your blog to the wider size go to the “Layout” tab > click on “Edit HTML” > scroll down to #outer-wrapper


2. change the #outer-wrapper to 960px;
change the #main-wrapper to 600px;
change the #sidebar-wrapper to 300px;

3. click save template

Now you can choose whichever numbers you want. I choose these because 960 pixels is just a bit smaller than 1024 (to give extra room on the sides. I personally think that this looks better. But you can play around with these numbers for different effects just be careful you are editing a template here.

Because you just modified the template that means that you never have to do another thing. Your blog will always be at the new larger size.


To make your photos bigger you cannot use the automatic upload feature that is within blogger. Instead you must upload your images first to a third party photo storage. There are millions to choose from but I personally prefer Flickr.com. One you upload your photos to the Flickr (I will use this as an example) simply copy the HTML code.

For Flickr simply click on the “all sizes” button right above the image.


Flickr will open another window where the code will be under the image. “1. Copy and paste this HTML into your webpage” you need to copy all of that code.


Once you copy the code go to blogger and paste the code in the window. I prefer to paste the code in the “Edit HTML” rather than the “Compose” window because then I can modify the size.


If you do not change the size of the image here then blogger will just show the image at the size you uploaded it into Flickr as. It is better for you to control what size you make things. If you followed the specifications above for your new template size of #main-wrapper to 600px like me then I would suggest you make your images no wider than 590px. That way the image will not run off of the page. See here I edited the width to 590 and the height fixed to size down at the same ratio.


cfunkhauser said...


paul peggy zeus said...

Wow, you ARE cool like that! This is definately a blog for DAD to read and follow - thanks for sharing, you are so generous, and I love you too!

Courtney Brady said...

This was very helpful, thank you!

Post a Comment