As you can see I got a new sidebar which the default blogger templates do not offer, so this blog itself is an example to this post.
Getting back to the point, its very simple hack, just copy and paste some codes here and there and thats it you are done.
Before we even start, I advise you to back-up your precious templates.
For this hack you might need to change the width of you #main-wrapper for the sidebar to fit in.
so if you main wrapper(content area + sidebar) is of 700px
content area of 490px
and sidebar of 210px
and new sidebar of 210px
then the total width with the new sidebar is 490 + 210 + 210 = 910px
1. Go to Layout>Edit HTML in your Dashboard
2. Find the below codes in your HTML
#sidebar {
float:left;
background: #fff;
width: 210px;
word-wrap: break-word;
overflow: hidden;
}
3. Just copy and paste it just below it and name it #newsidebar.See the example below:
Copy This code from your HTML
#sidebar {
float:left;
background: #fff;
width: 210px;
word-wrap: break-word;
overflow: hidden;
}
And Paste it just below it and rename it to #newsidebar
#newsidebar {
float:left;
background: #fff;
width: 210px;
word-wrap: break-word;
overflow: hidden;
}
in the above code you can specify the place you want the header to be. Like you can show it on right also.
4. Then find the code below, it is probably towards the bottom of your HTML page.
<div id="sidebar-wrapper">
<?xml:namespace prefix = b /><b:section class="sidebar" id="sidebar" preferred="yes">
</b:section>
</div>
5. and paste this code just above it
And thats it you are done with it. So now go to your Layout>Page Elements in your Dashboard and it should be looking something like this with a new coloumn.
So now its time to thank me.If you like this post you can also subscribe by email or rss and receive our updates directly in your mailbox.
Posts
