How to Add Elements and split under Blogger Sidebar?

How to Add Elements and split under Blogger Sidebar?

1
data:blog.title
blogger tutorial

Often we see many blogger template contain that split sidebar that helps the blogger to add Blogger labels vertically or we can easily add 160px X 600px Ad unit. So this is very effective for blogger to save space. Because if you don't split sidebar and add any widget then it will occupy the whole space. Adding  element (add a gadget) under the existing sidebar is very simple trick. If you are well known about blog coding then understanding the code will be much easier. So I am sharing with you the trick that will help you to split your current blogger sidebar into 2 column. just follow the simple steps from below.

Step 1 Log in to your blogger account and Click on Template  ->

Step 2 Now click on Edit HTML-> Unfold code  

Step 3 Now find like below code by Pressing  Ctrl + F

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

Note that sidebar-wrapper width may 280px, 300px or 310px or any other number so don't worry. just focus on Sidebar-Wrapper.

Step 4 And now replace the code by below code.

#sidebar-wrapper {
width:320px;
float:right;
font-family:Oswald,Georgia,Verdana,Geneva,Sans-serif,Arial,Helvetica;
margin:10px auto;
word-wrap:break-word;
overflow:hidden;
padding:0.5% 0;
}

Step 5 Now add the below code after above code (from Step 4)

#Spice-left{
width:50%;
float:left;
font-family:Oswald,Georgia,Verdana,Geneva,Sans-serif,Arial,Helvetica;
word-wrap:break-word;
overflow:hidden;
}
#Spice-right{
width:50%;
float:right;
font-family:Oswald,Georgia,Verdana,Geneva,Sans-serif,Arial,Helvetica;
word-wrap:break-word;
overflow:hidden;
}

Step 6  Now find the code like below

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

Step 7  Finally add the below code after </b:section>

<b:section class='sidebar' id='Spice-left' preferred='yes'/>
<b:section class='sidebar' id='Spice-right' preferred='yes'/>

The final code will be look like below-

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>   
</b:section>
<b:section class='sidebar' id='Spice-left' preferred='yes'/><b:section class='sidebar' id='Spice-right' preferred='yes'/></div>

Now check your blog layout view and see that your blog sidebar has split  into 2 column. There are some optional step which you may use from below.

tricks

Optional Step

If you wish to fix your new splited elements under sidebar according to your blog widget setting then please add the below code after the code from Step 5 .

#Spice-left .widget-content{
margin:3px 3px 3px 3px;
word-wrap:break-word;
overflow:hidden;
}
#Spice-left li,.column li {
line-height: 18px;
padding: 3px 10px;
text-decoration: none;
}
#Spice-left ul{
margin:0;
padding:0;
list-style:none;
}
#Spice-right .widget-content{
margin:3px 3px 3px 3px;
word-wrap:break-word;
overflow:hidden;
}
#Spice-right li,.column li {
line-height: 18px;
padding: 3px 10px;
text-decoration: none;
}
#Spice-right ul{
margin:0;
padding:0;
list-style:none;
}
#Spice-left h2{Width:90%;color:#252525;padding:5px 0 5px 10px;;margin bottom:10px;position:relative;border-bottom:2px solid #252525;}
#Spice-right h2{Width:90%;color:#252525;padding:5px 0 5px 10px;margin-bottom:10px;position:relative;border-bottom:2px solid #252525;}
#sidebar h2{color:#252525;font-family:Oswald,Georgia,Verdana,Geneva,Sans-serif,Arial,Helvetica; padding:6px;margin-bottom:10px;position:relative;border-bottom:2px solid #252525;}

If you have any problem then feel free to contact with me. I will reply you as soon as possible.
How to Add Elements and split under Blogger Sidebar?
4 Stars stars - "How to Add Elements and split under Blogger Sidebar?" Often we see many blogger template contain that split sidebar that helps the blogger to add Bl...

Hello Bro great post but bro i want the news ticker like yours please

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *