Learn To Create Sections In Blogspot Template

Blogspot platform is just awesome, it's because the simplicity and handy interface it provide. It has capability of moulding itself according to the users need and wish. I've never seen such a great flexibility on any blogging platform ever since, and this is that quality which makes the blogspot a favourite choice for the millions of it's active users around the world.

Today in this tutorial we will learn more about designing and coding. We will see how you can create different sections in your blogger templates.

Screenshot

But first what you have to do is open Blogger template editor(Html).
Blogger dashboard → Template → Html Editor

What It Needs To Generate Section

Sections in blogger is generated either by template designer or you can create it manually with simple coding which we'll deal few steps below.

If you are using Blogger then you must be knowing it that, Blogspot accepts template in XML format only.

So there are some preset codes which onload of your blog transforms itself as a HTML element of the body of your site/blog. Same is the story of sections also. See below

To generate Sections in Blogger template

XML

<!-- Basic Structure Of Coding -->

<div class="class_name">
<b:section id="id_name" class="class_name" preferred='yes'>
.
.
</b:section>
</div>

Remember!

Remember that <b:section>...</b:section> should be inside a div element, it's necessary because division acts as the parent-element for <b:section>...</b:section>, so it becomes easier for you when you need to float or move the sections in your template to any particular part applying CSS property.

Example

For side-wrapper or blog's content

Section Code For Sidebar-wrapper

<div class='side-wrapper'>
<b:section id="side wrapper" preferred="yes">
.
.
.
</b:section>
</div>

Now when you apply CSS-property to sidebar-wrapper and want it to float to right-side of screen all you need to do is apply property to parent element that is .sidebar-wrapper{} as

Css property for Sidebar-section

.sidebar-wrapper{
float:right;
width:300px
}

Now after adding division save the template and view the new generated section in
Blogger Dashboard → Layout/Page Elements

Final Words

Avoid using the same id for sections, like if you have created new section in your template structure with id='sidebar', but another section with same id is already existing in your template's structure then html editor will reject the id name for your new section.

Be careful while creating new section, and always keep a backup of your template's previous structure.

Enter proper CSS property without nay error or it will mess-up the whole structure of your template. But don't worry ever it happens with you just leave a comment or a message to my inbox I'll resolve it :)