Friday, May 24, 2013

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.

No comments:

Post a Comment

Add Cool Drop Down Menu in Blogger

Drop Down Navigation Menu For Blogger : You may have seen many drop-down menus but today "ThatsBlogging" will present you an incre...