A customer left a comment on my Blogs By Heather blog on how to customize her Blogger template and I thought I'd write a mini-tutorial on it.
Since my customer is using the Son of Moto Blogger template, I chose that one to manipulate to help her specifically. However, these instructions are similar for other templates as well – but you may need to experiment. The most important thing is to change the “width” attribute to one that is desirable.
In this example, we are going to lengthen the main/post body area of the blog to make the outer borders smaller (basically make more room for the posts and sidebar items and less room for the background borders).
IMPORTANT: You may have to re-install/re-do your Widgets. Don't worry, it will warn you before it actually does! Another site to visit is www.threecolumnblogger.com!
- Login to Blogger
- From the Dashboad, click on Layout.
- Then Edit HTML.
- Make sure you backup the current template – click at the top to Download Full Template — this stores a backup copy of how your blog was BEFORE you make the changes below.
- Scroll down and make the following changes (bolded):
body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;
font-size: small;
}
In the bolded line above, remove the url(…..) which will remove the outerwrap.gif which is what is keeping the columns smaller.
So that line will now read:
background: #692;
#outer-wrapper {
margin: 0 auto;
border: 0;
width: 692px;
text-align: $startSide;
background: $mainBgColor url(http://www.blogblog.com/moto_son/innerwrap.gif) top $endSide repeat-y;
font: $bodyFont;
}
Change this width to be wider – this widens everything (width: 1000px;)
#main {
width: 400px;
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 */
}
Widen this to 750px – this is the main post/body area (width: 700px;)
#sidebar {
width: 226px;
float: $endSide;
color: $sidebarTextColor;
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 */
}
Again, wided this to 250px so the 700px and the 250px make the 950 px set (which fits in the 1000px set in the OuterWrapper area). You do not want to set it to 750px or it will overlap the sidebar. Leaving the 700px leaves room between the main body and the sidebar.
width: 250px;
- Save the template and you’re finished.
- Click to View Blog to see immediate results.
- View my sample here: http://sampleblogsbyheather.blogspot.com/
If you have any problems, I'd be happy to make the changes for you. Feel free to contact me at heather@blogsbyheather.com or simply visit my blog, https://www.blogsbyheather.com/.
Thanks for visting!
