Looking for blogger widgets of two column widget sidebar in blogger? Learn here How to Create two Column Widget sidebar in Blogger

Why to create widgetized sidebar?
If this question is also popping up in your mind that why you create extra two column widget sidebar then here is the answer, sometimes you may find your sidebar loaded with various widgets and you want to add some more important widgets in sidebar but you can't due to not much extra widget area. And ultimately in order to add some important widget you may remove the existing ones. But now stop worrying and let's see how you can add extra two column widget area in your sidebar.
How to Create two Column Widget sidebar in Blogger
First to install the two column widget sidebar goto your blogger dashboard >> Template >> Edit HTML.
At their search for ]]></b:skin>. And just above it paste the below chunk of the code.
Now again search for the below :
Now after this again goto your blogger template >> HTML editor and search for the code which you got in the above steps. In my case it's
Now just above it paste the following below code and save your template:
Voila! :=) You have successfully installed the two column widget sidebar in blogger.
At their search for ]]></b:skin>. And just above it paste the below chunk of the code.
#twosidebar-wrapper {After adding the above code now come to the next step.
width: 152.5px;
float:right;
margin:0px;
padding:0px 0px 0px 0px;
word-wrap:break-word;
overflow:hidden;
background-color:fff; }
#twosidebar-wrapper2 {
width: 152.5px;
float:right;
margin:0px;
padding:0px 0px 0px 0px;
word-wrap:break-word;
overflow:hidden;
background-color:fff; }
Now again search for the below :
<div id="rsidebar-wrapper">If you can't find the above code then first find that what id is used in your template for sidebar. Because every template have different template structure. To find that what id used in your blogger template for sidebar follow the below steps:
- Open your site's homepage
- Head over to your sidebar and right click on the sidebar and then click on the Inspect elements.
- Inspect elements shows you all the coding of the different page elements. When your revolve your mouse cursor on any chunk of code it will highlight that part of page which using that coding.
- So now, At there hover your cursor on the coding and notice that which coding highlights the sidebar.
- After finding the sidebar coding now look for the first div element of the sidebar
- And that's the one which you want. Look at the screen shot below for better understanding.
Now after this again goto your blogger template >> HTML editor and search for the code which you got in the above steps. In my case it's
<div id="rsidebar-wrapper">
Now just above it paste the following below code and save your template:
<div id='twosidebar-wrapper '>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
<div id='twosidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
Voila! :=) You have successfully installed the two column widget sidebar in blogger.
No comments:
Post a Comment