This blog is using Minima Stretch template. I have customized the look of this blog a lot. Now I want to add a top sidebar to this template. How can that be done? Actually it is not so hard than I thought. The following steps describe how I've accomplished this task.
- Always backup your template before you do anything. Go to http://www.blogger.com/home.
Click on a down arrow that will show more options. See the screenshot below:
- A list of choices will show up. Click on Template. See the screenshot below:
- It will lead you to the next screen. On the upper right corner, click on Backup/Restore. See the screenshot below:
- Next a popup window will appear. Click on an orange button Download full template to save your file to your PC. See the screenshot below:
- After that close the popup window. Next click on Edit HTML. See the screenshot below:
- Another popup window will open. It will allow you to edit your html. See the screenshot below:
- Next hold Ctrl and hit F at the same time to bring up a search bar. Type #sidebar-wrapper { in the text field to find the following code:
#sidebar-wrapper {
width: 160px;
margin-right: 15px;
float: right;
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
} - Next add the following code above it. See it in red below:
#topsidebar-wrapper {
width:330px; //pick your own width here
float: top;
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 160px;
margin-right: 15px;
float: right;
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
} - Then hold Ctrl and hit F at the same time again. Type <div id='sidebar-wrapper'> in the text field to find the following code:
<div id="sidebar-wrapper">
<b:section class='sidebar' id='sidebar' preferred='yes'/> </div> - Add the following code above it. See it in red below:
<div id='topsidebar-wrapper'>
<b:section class='sidebar' id='topsidebar' preferred='yes'/> </div>
<div id="sidebar-wrapper">
<b:section class='sidebar' id='sidebar' preferred='yes'/> </div> - Finally click on an orange button Save template to save it. See the screenshot below:
