Tweet
#footer1-wrapper{width:300px;float:$startSide;word-wrap:break-word;overflow:hidden} /* gadget 1 */
#footer2-wrapper{margin-left:10px;width:300px;float:left;word-wrap:break-word;overflow:hidden;padding:0 10px} /* gadget 2 */
#footer1-wrapper{width:30%;float:$startSide;word-wrap:break-word;overflow:hidden} /* gadget 1 */
#footer2-wrapper{margin-left:10px;width:30%;float:left;word-wrap:break-word;overflow:hidden;padding:0 10px} /* gadget 2 */
.credit{width:960px;line-height:1.6em;text-align:center;font-family:Arial;font-size:11px;color:#fff;overflow:hidden; clear:both; margin:0 auto;padding:10px 0 10px 10px}
First, you need to know what are fixed width templates and what are fluid templates. The fixed width templates are those whose width remains same in every resolution of the monitor. But the fluid width templates adjusts itself according to the monitor resolution.
Most of the blogger templates have fixed width templates though some fluid templates are also available. Check out this link for a demo.
You can also convert a fixed template to fluid template just by following some simple steps.
First, keep a backup of your template before changing anything.
Now, in a normal blogger templates you would encounter some codes like this.
The most convenient way to do this is to start from the top.
1) Header
Find a code something like this ....
#header-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbPdTgqtIC9bV9n66onxlY53twnknBuyydBD7s8x_KkmWE16SbjyU9Lk3-VZ5_qjCSqaj8mAivtbWNMxZt8IRZtklETbLrb0EOfKzJTpqGn5e11FPxN47BssYFc-Kt-4aoxqSAIod9tyWW/s1600/header-bg.png)repeat-x bottom;width:980px;border:0 solid $bordercolor;margin:0 auto}
The header wrapper is the wrapper which controls the header section of the blog. Notice that the width is given as 980px. Change it to width:100%
Now if the header contain two gadgets then you have to change their width as well or you can keep them in the as they are. It is depended on you.
#header{float:left;width:470px;border:0 solid $bordercolor;text-align:left;color:$pagetitlecolor;margin:0}
#header2{float:right;width:468px;margin-right:10px;text-align:left;color:#555}
If you have this type of settings then you can just change their widths to
width:50% but if you want to add a advertisement in the second gadget in the header then keep a setting like this.
#header{float:left;width:25%;border:0 solid $bordercolor;text-align:left;color:$pagetitlecolor;margin:0}
#header2{float:right;width:75%;margin-right:10px;text-align:left;color:#555}
2) Outer,Main & Sidebar Wrappers
Find a code like this ....
#outer-wrapper{background:#ffffff;width:970px;text-align:$startSide;font:$bodyfont;margin:0 auto;padding:0 10px 0 0}
The outer-wrapper is the most important wrapper in the blog. It controls the total width of the blog. All the widths of the other wrapper are depended on the outer wrapper.
Notice that here the width of the outer wrapper is 970px. You can change it to 100% and your blog will be spread over your whole screen of the monitor. I personally would like to suggest to keep it at 95%. So, change the above code like this.
#outer-wrapper{background:#ffffff;width:95%;text-align:$startSide;font:$bodyfont;margin:0 auto;padding:0 10px 0 0}
NOTE : If you fix your outer-wrapper as 95% and all the other wrappers as 100% it simply means that all the other wrappers would occupy the 100% space inside the outer-wrapper.
#main-wrapper{padding-left:20px;width:630px;float:$startSide;word-wrap:break-word;overflow:hidden}
#sidebar-wrapper{padding-left:20px;width:320px;float:$startSide; word-wrap:break-word;overflow:hidden}
In most blogger templates the main-wrapper refers to the wrapper around the post body. The sidebar wrapper is for the sidebar beside the post area. If you have a sidebar beside the post body then change the settings like this.
#main-wrapper{padding-left:20px;width:63%;float:$startSide;word-wrap:break-word;overflow:hidden}
#sidebar-wrapper{padding-left:20px;width:32%;float:$startSide; word-wrap:break-word;overflow:hidden}
3) Navigation Bar Wrappers
If you have a navigation bar then you would also like to change the settings for it too.
#nav-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMBHlEtJzuTVkM8C3VUTXfjcpedIaWkJ-GElwfDk9YiqPC5gtmTStN7pgkEunNWKznwPSGMLnnZNwVWF7jkfos9YxRSNQjZ7pbpQc4B32c8sybqHHYxlP291KFfD6ZrE6VxaER5HKmvAGY/s1600/topbar.png) repeat-x top;width:980px;margin:0 auto;padding:0 auto;border-top:1px solid #000;border-bottom:1px solid #000}
#navbar{width:980px;height:27px;margin:0 auto}
The first part is the wrapper part and the second part is the part which contains the menu and the links. Like before change the setting like this.
#nav-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMBHlEtJzuTVkM8C3VUTXfjcpedIaWkJ-GElwfDk9YiqPC5gtmTStN7pgkEunNWKznwPSGMLnnZNwVWF7jkfos9YxRSNQjZ7pbpQc4B32c8sybqHHYxlP291KFfD6ZrE6VxaER5HKmvAGY/s1600/topbar.png) repeat-x top;width:100%;margin:0 auto;padding:0 auto;border-top:1px solid #000;border-bottom:1px solid #000}
#navbar{width:98%;height:27px;margin:0 auto}
4) Footer Wrappers
The footer wrapper controls the footer section of the blog. If the footer contains gadgets then you can also change the individual widths of each gadget. Lets assume that the footer contains three gadgets.
The code should look something like this ....
#footer-wrapper{width:940px;text-align:left;font:$bodyfont;margin:0 auto;padding:10px} /* the main wrapper which contains the gadgets */
#footer3-wrapper{margin-left:10px;width:300px;float:$endSide;word-wrap:break-word;overflow:hidden;padding:0 10px} /* gadget 3 */
All of the gadget's width is 300px, so the most easiest setting would be to change their width to 30% or 33% and change the footer-wrapper's width to 100%.
After completion, the code should look like this ...
#footer-wrapper{width:100%;text-align:left;font:$bodyfont;margin:0 auto;padding:10px} /* the main wrapper which contains the gadgets */
#footer3-wrapper{margin-left:10px;width:30%;float:$endSide;word-wrap:break-word;overflow:hidden;padding:0 10px} /* gadget 3 */
5) Credit Wrappers
The credit wrappers control the width of the credit section where the support, copyright and privacy policy links are displayed.
The code for the credit wrappers looks something like this ....
.credit-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgESzT8pkNMZi_ZtPBY3obnOBhAv25hY7KiLES7sRJM4rkoPp9Jn1i5tjTF4osjS_iEGSZs_hhHUR2NwNgJXvA00oMp4YsdqZHarDDWDC7Th8Qp5x67XncX7KfjYRAV9L2kkwaXFfxiBH7K/s1600/credit.png) repeat-x top;width:980px;margin:0 auto;padding:0 auto}
The first part is the wrapper part and the second part is the part which contains the links and the texts. Like before change the setting like this.
.credit-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgESzT8pkNMZi_ZtPBY3obnOBhAv25hY7KiLES7sRJM4rkoPp9Jn1i5tjTF4osjS_iEGSZs_hhHUR2NwNgJXvA00oMp4YsdqZHarDDWDC7Th8Qp5x67XncX7KfjYRAV9L2kkwaXFfxiBH7K/s1600/credit.png) repeat-x top;width:100%;margin:0 auto;padding:0 auto}
.credit{width:96%;line-height:1.6em;text-align:center;font-family:Arial;font-size:11px;color:#fff;overflow:hidden; clear:both; margin:0 auto;padding:10px 0 10px 10px}
Remember that this code can vary from template to template. And do not forget to keep a backup of your template before changing anything.
