TutorialWebForBlogger

TW4B It's about a blog that talking about blogging widgets, blogger template tutorials, search engine optimization SEO and other useful blogging tips

Let's review a topic about how to add two small sidebar columns below main sidebar on your blog. 1. Go to Dashboard, click Design, cl... nopict

Add Two Small Sidebar Columns Below Main Sidebar

Let's review a topic about how to add two small sidebar columns below main sidebar on your blog.

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below :

#sidebar-wrapper {
width: 350px;
float: left;
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 */
}

you can use (Ctrl+F) to find easily

3. Right After it - place code of HTML below :

#left-col {
width:48%;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:48%;
float:right;
word-wrap:break-word;
overflow:hidden;
}

NOTES : you can change width:350px; and width:48%;

4. Find code of HTML below :

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id=.................Etc.,..............Etc.,.................
</b:section>
</div>

you can use (Ctrl+F) to find easily

5. Remove it - with code of HTML below :

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id=.................Etc.,..............Etc.,.................
</b:section>
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
</div>

6. Click save template and done.

Now you've already added two small sidebar columns below main sidebar on your blog.

There are no comments yet for 'Add Two Small Sidebar Columns Below Main Sidebar'