
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}
OR
#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.
No Comment to " Blogger Layout: Change Width of Header,Footer,any Section "