Changing blogger template
(My blog, before the template change)As promised in my last blog entry, this post would be about changing the blogger template. Note that in order to make full use of this post, you must either be using the old blogger or you are hosting your own blog site.
But guys, if you are using the new blogger, its okay. Here is how to revert to the old blogger.
Click on the 'Template' tab and then click the 'Edit Html' tab
Scroll down, do not scroll contents of the template, I am talking about the page. And you will see a link titled 'Revert to classic template'
Once you have done this, you are free to hack your template in which way your heart desires. But if you still want to use the new blogger and change the template, you can google for it.
So in the next 4 steps, I will show you how to get your blog and new sleek look.
1) Choose a cool template of your choice
This is the best part. Rather than being limited to a handful of templates that blogger offers, You are now free to choose your template that really suits your blog. So first lets google for it. When you google for 'free css templates' (without quotes) the first site you get is(or the first site I got was) www.freecsstemplates.org
This is a really cool website offering mind blowing templates, and that too free.If the 222 handpicked, eye candy templates do not suit you, you can surf through the other results that turn up in the Google result, most of them are really worth checking out.
Now to make things simpler, lets assume that you downloaded the template from www.freecsstemplates.org The folder will contain a css file an html file and many image files.
2) Hack the code
To start beginning to edit the css and html files that you got, I recommend you try to get a slight hang of using css and html. Googling for css or html could get you enough stuff to get your hands up and dirty.You could also head on to http://www.w3schools.com which has an excellent section on html and css.
Now someone may ask, why take "so-much" trouble(?) to learn and do things rather than be content with the same boring template blog that one has been using for ages. The simple answer is - its just the part of hacker mentailty and culture. Hacker mentality typically revolves around discovering new things, finding answers and learning new stuff and so on. Thats all.
Next edit the html and the corresponding css files to suit your needs. You can add your images and stuff like that. For example, I have added links to World Food Programme(a N.G.O) and Feedburner feeds and so on.
3)Add the necessary blogger variables
Now this part took a bit time for me to get used to. But I bet, this would go as easy as pie for you, since all the information is presenter right HERE.
Once you have a template that closely matches your blog's theme, then its time to decide, where you want the links to 'previous posts' , 'archives' and the body of post must appear. Then its only a matter of copy-pasting those variables to the html file. But it must be done in a proper order. So i have numbered them below.
(From now on, all code in this post will be in RED)
i) The blog post title and body
Inside the
(if you have any doubt refer your original template [blogger >Template > edit html ]
<$BlogItemTitle$>This displays the blog title, Next comes the date header
<blogdateheader>
</blogdateheader>
<$BlogDateHeaderDate$>
Note I have used tags to specify the formatting which suits my blog. It may be different in your case. Only thing you have to note here is that not to change the name of Blogger variables.
Then finally comes the actual body of the blog post
posted by <$BlogItemAuthorNickname$> @ <$BlogItemDateTime$>
<$BlogItemBody$> and author and comments links
|<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$>
comments |
<blogitemcommentsenabled> </blogitemcommentsenabled>
ii)Previous post link
Also add the links to previous posts
<bloggerpreviousitems>
<$BlogPreviousItemTitle$>
4) The great joining
This last section is the is the most simplest of all. Create a new file. Lets call it myNewTemplate.html.
Open using using your favorite text or html editor. Please do not open with Microsoft word or any such software, becuase these softwares themselves add unwanted code and bloat our neat, clean template.
For windows users I would suggest notepad, PSPad( its a freeware HTML editor, PHP editor, XHTML, JavaScript, ASP, Perl, C , HEX editor.) or cream (A awesome editor with syntax highlighting that supports most languages you can ever think of)
For linux users Kate, BlueFish or cream would suffice.
Now add the code from the css file to the style section of the head tag.
Next add the contents of the html file to the body of this newly created file.
<html>
<head>
<title>My new blog</title>
<style type="text/css">
<!--- add the code from css file here -->
</style>
<body>
<!-- Add the code from html file here -->
</body>
</html>
Once you have done this, save this file. Now head on to blogger >Template > edit html. Now remove everytihng from the text box and copy and paste the code of newly created file(myNewTemplate.htm) into the text box.
Click apply changes and voila you have your new template ready.
(My blog after the template change)
A Final word
If you encounter any problems, counter check the steps I told you and dont hestitate to google for more help. If you find any problems in grasping the css template while trying to edit it, its okay. Take your time and try to figure it out, with help from the web.
And finally, you can also comment this post and share with others your experience while hacking out your own template as I have shared mine.
One last note, in case you are hosting your own blog; Rather that using the blogger variables you will have to use the variable names of the language, used to host the blog. So if your blog uses PHP, substitute the PHP code instead of the blogger variables that I mentioned earlier.
Thank you
Justin
