Sunday, January 19, 2014

How To Customize Blogspot Blog’s Template ?

Many of them are struggling to customize their blog’s template. Everyone wants their blog to look different from the other blogs but do not know how they relate to the code.

Let us make the customization of the template easy for you. You mainly have to know following things about Blogger platform and template coding.

1. Template are Designed in XML (Extensible Markup Language).

2. CSS, It is use to define how these elements and page should appear.

To Customize the template just Login to Dashboard and Select Template Option from the left side Menu.

Customize Template

A page appears where you can select templates and with Edit HTML Button.

Customize Template

You can Customize your template by clicking edit HTML button, After Clicking Edit HTML button a box appears that asks us to proceed.

Customize Template

Then Click on Proceed to start editing HTML or to Customize your Template.

The blog’s Template is similarly divided into Main divisions called :

1. Body
2. Outer Wrapper
3. Header Wrapper
4. Main Column
5. Sidebars
6. Footer


You can replace your coding with new one (from any source) to make customization as you want.

You can also change CSS coding, if required. I.e. if you want to change height, width, colors, font styles, Background images, etc you can change using css code.

CSS id names of the above Divisions which you can easily Customize :


For body :

#body {
You can change background color here
}


For Header :


#header-wrapper {
CSS code goes here
}


#header {
CSS code goes here
}


For Outer Wrapper :

#outer-wrapper {
CSS code goes here
}


For Main Wrapper :

#main-wrapper {
CSS code goes here
}


For Sidebar Wrapper :

#sidebar-wrapper {
CSS code goes here
}


For Footer :

#footer {
CSS code goes here
}


You can also get more CSS examples and you can also learn CSS from W3Schools.

If you want to develop a new Blogger template, Please do study about XML/CSS using W3Schools or many other sources and then try developing your own unique template.

No comments:

Post a Comment