How to add a second sidebar to your template.



It is justly easy to add a second sidebar to your template and what is even better; you can keep up this sidebar from the Blogsbucleus Page Element layout screen!

How it works?


The Blogsbucleus template uses <div>-tags for several "wrappers".
The header is within the Header-wrapper. The sidebar is inside the Sidebar-wrapper. The main part is inside the Main-wrapper, and the footer is inside the Footer-wrapper.
Chief -wrapper and Sidebar-wrapper are inside the Content-wrapper.
And Header, Content, and Footer are surrounded by the Outer Wrapper.

The code looks like below:


<div id='outer-wrapper'>
<div id='header-wrapper'>
<b:section id='header' class='header' ....>
</div>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section id='main' class='main' ....>
</div>
<div id='sidebar-wrapper'>
<b:section id='sidebar' class='sidebar' ....>
</div>
</div>
<div id='footer-wrapper'>
<b:section id='footer' class='footer' ....>
</div>
</div>

You will easily recognize this structure from your template.

You can add a left-sidebar in 3 easy steps:

Add a new wrapper for the left-sidebar to your template, inside the content-wrapper and in front of the main-wrapper.

Add a new section inside this wrapper, with a unique ID (for example leftsidebar) and set its class to 'sidebar'.

This is the code:


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

In the leader of your format include css-code for a #leftsidebar-wrapper component, and set it to buoy left. 

Alter the width of your sidebars and your fundamental wrapper to fit the screen. 

Altering your new sidebar: 


Presently go to the design editorial manager, and you will see the new sidebar to one side in your Page Elements Screen, and you can add new page components to your new sidebar.

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...

More From Webworld