Blogger Layout: Change Width of Header,Footer,any Section

The structural blogger layout will be as shown above. Blogger layout is divided into 5 parts namely header, outer wrapper, main wrapper, sidebar wrapper and footer as shown in the figure above. To edit/modify the style of a part, you must first identify the layout you want to modify and then modify the style code of that particular section. In this post, i am giving you the tutorial on modifying various sections in the blogger layout and the codes explained below may be of slight change with respect to your blogger template.

http://4.bp.blogspot.com/-x6jBptXWegg/UWhaOnUNdSI/AAAAAAAADOw/NMlDVhPE-UI/s1600/blogger-template-html-editor-how-to.png

Let me consider that you identified the section you want to edit in your blogger layout. Let me illustrate the style codes of these 5 sections. Before going to modify the width of any section, you must be aware that width can be declared in % form or in px(pixels) and if you specify the width in % form, then your blog will start displaying width depending on the Screen resolution of the pc the visitor is viewing from. As the main concept of this blog post is to guide you on editing the width of various sections of your blogger layout, i will be concentrating on only the width modification here. You can however learn basic Css and modify the style of any section as you wish.

Modifying the Width of Blogger Layout Elements

Go to your blogger dashboard > Template > Edit Html ( tick the expand widget template option).

To Change Width Of Outer Wrapper

Find This Code:

body{background:#111 url(); width:980px; color:#333;
font-size:12px; font-family:Arial,Tahoma,Verdana;
margin:0 auto 0; padding:0}

#outer-wrapper{background:#111 url(); width:980px;
color:#333; font-size:12px; font-family:Arial,Tahoma,
Verdana; margin:0 auto 0; padding:0}

Change 980px to your desired width and you are done!!..

To Change Width Of Header::

Find This Code:

#header{background:#000 url(); width:960px; height:155px;
color:#fff; font-size:11px; margin:0; padding:0;
overflow:hidden; margin-top:-4px;}

Change 960px to your desired width and you are done!!..

To Change Width Of Sidebar Wrapper::

Find This Code::

#sidebar-wrapper{float:right; width:320px;
margin:0; padding:0 0 10px; display:inline}

Change 320px to your desired width and you are done!!..

To Change Width Of Footer Wrapper::

Find This Code::

#footer{width:660px; clear:both; margin:0 auto;
padding-top:15px; line-height:1.6em; text-transform:uppercase; letter-spacing:.1em; text-align:center}

Change 660px to your desired width and you are done!!..

Hint:-

If you are unaware of finding a particular code in your blogger template html. There is nothing to worry. Just press Ctrl and F buttons together and you will notice a search bar on your browser, enter the code to be searched in it and press enter.

Backup the Template before modifying!!!

Before doing any modifications in your template Html, make sure to backup your template i.e.,

go to your blogger dashboard > Template, you will find the backup/restore option. Just click on it and download your template before doing modifications.

Post Tags:

Blogging Tutorials

Blogger Tricks

Basic / Advanced tutorials on WordPress, Google Blogger, SEO, Earning online income, Website development tips, tricks, etc.

Website: http://bloggertricks.biz/