Personalize Blogspot Template

Tictac is really a nice template, except that the layout is a bit tight for me; to utilize more space, we need to expand the columns, which is fairly easy to do, below I will demonstrate how:

Step 1: expand the columns
Before that, you need to download the original template which is already provided, see snapshot below:


open download template, which is a XML file, with a text editor, here I use MS Expression Web, spot the following section as is highlighted in blue:


outer-wrapper wraps the whole section so first we assign a larger value (default width is 800 px?) to it, then we increase the main (left column containing posts) and sidebar columns respectively, note that we need reserve some margin in between otherwise the sidebar will not be positioned properly. Here I assign the width using percentage value and give 64% for the main column and 30% for the sidebar. Meanwhile, we need to set the float attribute for each, see highlighted section.

Above step finishes the layout expansion, next we will expand the backgrounds to make them fit the modified page.
There are 5 background images we need modify, as background-size attribute is only supported by CSS 3, we need to manually resize the images.
Download the images and edit it in any photo editing tool, here I use Adobe Photoshop to equally expand the images by setting image size to 984px, which corresponds to the size of the outer-wrapper.


Upload the amended images to any web repository where you can retrieve them with URLs, what I use is Google Picassa Web album, get each image address and place them in the template to replace the original, save the template and then upload it, OK, IT'S DONE!

Fairly simple, right? If you are not interested to try it yourself, you can download the modified template HERE.