Subscribe For Free Updates!

We'll not spam mate! We promise.

Friday 3 July 2015

fixing Blogger Layout Page Messed Up unique style

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 CreatingTemplate



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!

Socializer Widget By Heath-Tricks
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

0 comments:

Post a Comment