Fix Blogger Layout Page Messed Up While Creating Template

No doubt, Blogger is the best platform to start the new blog. As it has the user friendly interface which helps the beginners to understand how to use Blogger easily and it has some advanced features which helps to design the blog and also in the search engine optimization. The blogs on Blogger.com are developed with XML, HTML, JavaScript and CSS which are the basic web developing languages and if someone knows these languages then he/she will not face any problem in designing his own custom blogger template. But for that, a person must understand the basic things about developing blogger template which are creating widgets and use of XML. Most of those who are new in the blogger template designing face this kind of issue that after designing the template the layout page gets messed up and it make them disappointed. So, in this post we will discuss that why that layout is getting messed up and how can we fix it.

Why and How Blogger Layout Gets Messed Up?

There are the several reasons that your layout is getting corrupted while creating the blogger template. The first reason is that you might don't have used the CSS properly and you don't have created the widgets properly. Try to make use of height and width properties in CSS. Sometimes, you edit the template and by mistakenly you removes or corrupt the widget code and in case the layout gets corrupted. If you're coding the template then you will need to concentrate on coding and sometimes you search hours for the error and that is the single semi colon which is missing. 

Fixing Blogger Layout Messed Up While Creating Template

Those were the starting days of coding when I was learning how to code and how to create blogger template. I usually learn everything online in the home because I don't like institutes. While creating template, when I landed into the layout page it appeared messed up and I was shocked that why it get messed up. After the searching, I got the solution of this which I'm going to share with you below.

There is not any big tutorial to fix this but a little tip which I'm going to share with you and this will really help you to design the beautiful layouts. Actually, there is the additional field of CSS for blogger layout same like <b:skin>. And that is body#layout which you can use to rearrange the widgets and create cute layout.

To fix the layout widgets correctly or rearrange them, just go to your template, expand the <b:skin> and just in starting of that write the CSS coding. Let me guide how you can write that CSS to fix layout.

First of all write the additional tag body#layout and after the space write the .class or #id of that widget which you're going to rearrange. Simply, now start the middle bracket { and write the coding for that like width, height, padding, float etc. And in the last don't forget to close that with }. And by this you have to rearrange the every widget. After writing the code it will look like this.

body#layout #widgetID { The Properties For Widget In Layout Page Goes Here } 
body#layout #widgetID2 { The Properties For Widget In Layout Page Goes Here } 
body#layout #widgetID3 { The Properties For Widget In Layout Page Goes Here } 
body#layout #widgetID3 { The Properties For Widget In Layout Page Goes Here } 

After the writing the commands for each widget section save it and see your layout.
Remember :

1. On #WidgetID you've to write the ID or Class of the widget section.
2. These CSS Properties will only work in Blogger Layout Page.
3. That's All!