You Are Here : Home » , » How to Add Sidebar Section to Blogger Blog

How to Add Sidebar Section to Blogger Blog

Hey Viewers! In this post we will learn how to add sidebar section in blogger. Blogger designers template is very easy to customize. You can customize almost all parts of your blog by using designer template. But if you use custom template than you may find it little difficult to add additional sidebar to your blog. And it is even much difficult to customize. I shared various Template Tweaks for Blogger and if you want to customize your Template than you should checkout these Blogger Tricks. In this post I will show you adding additional sidebar in Blogger. I will try to explain adding sidebar in left column and right column. I will also explain you how to add two column sidebar in Blogger. We will use CSS styling and some Blogger tags to add sidebar in Blogger blog. So let's start the customizing.

Before going further make a backup of your Template. It will be helpful if your Template gets destroyed with very much customization.
We will first start with the CSS. Just follow the steps given below to know how to add the CSS for your sidebar in your Blogger blog Template.
  • At first you will need to sign in to Blogger if you haven't signed in yet.
  • Now click on the Blog title in which you want to add additional sidebar section.
  • Now go to Template Page from the Dashboard.
  • In the Template page click on Edit HTML which is located below the live preview of your Blog.
  • Now search for the code in your Template which is given below.
]]></b:skin>
  • Now add the CSS code given below just above ]]></b:skin>.
.sidebartwo-wrapper {
width: 190px;
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 */
float: right;
padding: 5px;
}
Use the above CSS code if you want the new sidebar to appear in right side than just change right in the above CSS code with left in the above CSS code. After replacing right from left the CSS code will look like below.

 .sidebartwo-wrapper {
width: 190px;
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 */
float: left;
padding: 5px;
}
It is enough for the CSS part. Now we will need add a sidebar section in the blog Template by using the above element id's. Let's proceed adding new section for sidebar in Blogger. To add new section Look for the following codes in your Blog Template. You can use CTRL+F to find the codes given below.
<b:section class='sidebar' id='sidebarright' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>...</b:widget><b:widget id='HTML1' locked='false' title='Like Us On Facebook' type='HTML'>...</b:widget>
<b:widget id='Stats1' locked='false' title='Stats' type='Stats'>...</b:widget>

</b:section>
The above shown code is the code of existing sidebar. The line of code in blue is existing sidebar section. See the starting section is closed by </b:section>. And the lines of codes in red is the widgets which is in the existing sidebar. You will see different widget codes depending on which widget/gadget you have added in your Blog. To add a new Sidebar Section in your Blog just add a new section after the existing sidebar section. Just add the code given below just after </b:section>.

<div id='sidebartwo-wrapper'>
<b:section class='sidebar' id='sidebartwo' preferred='yes'>
</b:section>
</div>
After adding the above Code in the HTML the code will look like below.
<b:section class='sidebar' id='sidebarright' preferred='yes'><b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>...</b:widget><b:widget id='HTML1' locked='false' title='Like Us On Facebook' type='HTML'>...</b:widget><b:widget id='Stats1' locked='false' title='Stats' type='Stats'>...</b:widget></b:section><div id='sidebartwo-wrapper'><b:section class='sidebar' id='sidebartwo' preferred='yes'> </b:section> </div>
Depending on the number of widgets in your Blog the code may look little different. Make sure you have added the sidebar section code after </b:section>. Look above code carefully to know where to add the new section code in your Blogger blog Template.
  • After adding the new sidebar section code in your Blogs HTML and the CSS, preview your template for any errors.
  • If everything is looking fine than Save your Template.
Great. You have just added a new sidebar section in your Blogger blog. But you may face problems with your blog Layout. To overcome this problem you will need to change the width of Outer Wrapper in your Blog Template. Take a slight look at the image below to know what I am talking about.

How to Add Sidebar Section to Blogger Blog
Basic Layout of Blogger Blog
As you can see in the above image the main wrapper and sidebar is kept inside the outer wrapper. Since there is no place for the new sidebar section therefore the new section for sidebar will not work properly. To overcome this problem you will either have to increase the width of the outer wrapper or decrease the width of the main wrapper(see Main Wrapper in above shown image).

If you want to increase the width of the outer wrapper(where sidebar and main wrapper lies) than search for "outer-wrapper" in your Blog's Template without quotes. If you can't find the text main wrapper in your Template than your Template may be using different element name. In that case search only for wrapper and look the code carefully. After finding the main wrapper code you have to increase it's width. Just increase it by 200px. Let's say your main wrapper width is 800px than you will have to add 200px more (800+200=1000). We are increasing width 200px because we have added a new sidebar whose width is near 200px. Look for the CSS which you get at the starting of this post. You will find width: 190px;. We have added 200px more to adjust some spaces between main wrapper and sidebar section.
#outer-wrapper{
width:800px;          <--- We have to change it to 800px.
margin:0px auto 0px;
padding:0px;
text-align:left;
}
Depending on your Blog Template the above shown code can look completely different but the ideas of both will be same. You will have to increase the width to make space for your new sidebar in your Blogger blog.

If you don't want to change the width of the main wrapper but want to add a new sidebar section than the only way out is to decrease the width of the main wrapper or sidebar wrapper. To find the width of main wrapper than search for the word main-wrapper (or wrapper) and look the code you find after it carefully.
#main-wrapper{
width:600px;               <--- Decrease it to 400px
float:left;
margin:0px;
padding:0px 0px 0px 0px;
word-wrap:break-word;
overflow:hidden;
}
Well! After making certain required changes in your blog Template save it and look in the Layout page how it looks. If everything looks fine than start adding your favorite widget/gadget in your Blogger blog.

If you are adding a new sidebar in left by using the above code than you will need to add the section code for your sidebar above before main div code.
Below is the new sidebar section code. Previously we have added the new section code below the existing sidebar but if you want the sidebar to appear in the left i.e., the main wrapper in the middle and the new sidebar on left. Just reposition it above main wrapper div.

<div id='sidebartwo-wrapper'>
<b:section class='sidebar' id='sidebartwo' preferred='yes'>
</b:section>
</div>
After adding the sidebar section code above main div code the HTML will look something like below.
<div id='sidebartwo-wrapper'>
<b:section class='sidebar' id='sidebartwo' preferred='yes'>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
  • Preview and Save Template. 
That's All! If you are not able to find the width of the wrapper to make change than keep playing with the width that looks like your work and observe the new changes with preview button. And when you figure it out Save your Template after making new changes.

Hope this post helped you in adding new sidebar section in your Blogger blog!

Ads by Google
If you enjoyed reading this article then please leave a comment or subscribe to our newsletter to get all the future posts delivered to your feed reader or you email desk.

No comments:

Leave a Reply

Welcome to SpicyTweaks.

Copyright © 2013-17 SpicyTweaks. All Rights Reserved.

Scroll to top