How To Fix Layout Page in Blogger

This post is consecrate to one of our valuable reader and for you also. Because he ask me a question. That question was "In my blogger layout page, the sidebar, post and header sections are very wide and can not able to handle at all. The bottom scroll is showing more". So I tried lot to do it but finally i got the code to solve it by using an option Inspect element on my chrome browser.(see the image that he sent to me)

This problem is happen because most of the custom blogger template's layout page isn't in appropriately width of those element mentioned on the question. So it would be very wide and the bottom scroll will appear more.

Doing well I found the code to decrease those elements width and some other customization. However there are few limits to customize in the layout page of blogger. So we could not customize at all. Let try to edit some errors in it with the following simple CSS code.

To Get started go to blogger dashboard and select Template. Click Edit HTML and Add the Following Code before  ]]></b:skin>  and Save it

body#layout #header-wrapper {width: 780px;margin: 0;}
body#layout #header {width: 200px;}
body#layout #content-wrapper {width: 760px!important;}
body#layout #main-wrapper {overflow: visible;width: 505px;}
body#layout #rsidebar-wrapper {width: 250px;float: right;margin: 0;}
body#layout .botwid {width: 240px;float: left;margin-left: 5px;}

Customization:
#header-wrapper is the total section of header which may include both sub header.
#header is left header.
#content-wrapper is the total section of post and sidebar.
#main-wrapper is post section only.
#rsidebar-wrapper is the right sidebar section. You may have to change the ID of it. If your Sidebar ID is different from this.
.botwid is the footer widgets. You may have to change the class of it. If your footer widget class is different from this.

With the above code, you can change the width and its position. You may also change each ID above if your section ID or class is different. As a result, you will see the widgets and post sections in the Layout (Page Element) of blogger are in proper width and can maximum avoid the more scroll bar on the bottom.

SHARE

Tweet