The normal Blogger Minima template is less than 700px wide. This is great for those who have tiny monitors and don't mind loading tiny images, but if you are a photographer or crafter or anyone that wants to proudly display large images on your blog then you need more space. After all, if you are going to spend hours editing your images in Photoshop or Photoshop Elements using fun CoffeeShop Actions you want to show off!
You can download plenty of free templates out there that are wider or even ones that have only one column (Photoblogs), but it is so easy to customize your own template. If you download a new template and try to install it, you might lose some of your nifty gadgets/buttons/etc. on your blog. However, if you go in and tweak your template yourself, you won't lose anything. You don't need any knowledge of HTML to do this tutorial, just a few extra minutes and a need for HUGE images!
Here is your standard Blogger template (with a custom background, that is why the black area looks so wide). You can see the tiny skinny columns. And what a tiny image, let me put on my glasses. :-) Note: If you have another Blogger template other than Minima, go to Layout, Pick New Template, and then select the Minima one. That template is the easiest one to tweak!
1. Go to Layout, Edit HTML. Click on Download Full Template and save your original template somewhere safe! This is very important and should be done before making any changes to your template.
2. Now you will tweak the template. To find code you can click Ctrl-F and do a search, however you do not have to expand widgets so this code will be very easy to find just by looking.
Find this:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Make change in red:
#header-wrapper {
width:1000px;
-------------------
Find this:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Make change in red:
#outer-wrapper {
width: 1000px;
------------------
Find this:
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Make change in red:
#main-wrapper {
width: 750px;
--------------------
Find this:
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Make change in red:
#footer {
width:1000px;
3. Click on Preview. If your blog preview pops up and looks wider and you don't get any error messages you are good to go. Just Save Template and go play with your new improved blog! If your blog preview does not come up and you get an error message, click on Clear Edits and try again.
Here is the new wider blog. However, my image is still small... Unfortunately I have not found a way to make your template wider and also automatically enlarge your images. I don't think it is possible. However, you can go in and physically tweak your image code to make them bigger. Or you can upload them to Flickr or MerryPic and grab the URL and paste them in the HTML side of your post.
You can post images up to 740px wide in your new wide blog. The right column for your blog buttons/links/gadgets/etc. is the same size as the original Blogger template, 220px.
Now my image is huge. Wasn't that easy? Who needs to know anything about HTML to get a wide blog.
NOTE: If you have already installed a custom template on your blog and want it gone to start fresh, go to Layout, Pick a New Template, and then select the Minima template. You won't lose any of your gadgets switching back to a Blogger template (they claim!). Then use the tutorial above to tweak your template.
If you have any suggestions for future Blogger UnWrapped Tutorials please post them below!
