Change Page Width in Blogger

Solution: 1

1.Sign in to your blogger account and go to your blogger dashboard.
2.Now go to
 Template.
3.Now find
 #container code,using inbuilt searching tool of your New blogger template editor.
4.After find this code on your blogger template.it will be slightly similar to below one.


/*-----------Container - Style---------------*/
#container {
float: left;
margin: 0;
overflow: hidden;
padding: 15px 20px 15px 25px;
width: 640px;
word-wrap: break-word;
}
If you can't find that code on your blogger template.It looks like your blog template has Variable definitions.To edit your blog's content width,find this code content.width .In many blogger templates this code is just below <b:template-skin> code of  blogger templates. Mostly this method is used on default blogger templates.You can find this code scrolling down your template HTML editor. Find similar code like "content.width".After you found that code,It will look like this

<b:template-skin>
      <b:variable 
default='960px' name='content.width' type='length' value='960px'/>

Solution; 2

How To Remove Sidebar and Increase Width of Certain Pages:

The steps are straightforward and would hardly soak 10 minutes to complete so just do as follows.
  1. 1. Go to Blogger.com >> Add NEW Page/Post
  2. 2. Now select HTML TAB on Blogger Post Editor
  3. 3. Paste the following CSS and XML Code:
<style>
#sidebar-wrapper,
#midsidebar-wrapper,
 .gapad2, .blog-pager,
.post-header-line-1,
 .post-footer
 { display:none !important;
}
#main-wrapper
{
width:98%!important;
}
.post{
 width:98%!important; }
</style>
  1. 4. Replace width:98% according to your needs, you can even uses pixels instead of percentage i.e. 960px.
Additional Tips: If you want to exclude Titles from a certain page, then just paste the following code before </style> in above coding. Bots and crawlers will continue to fetch your Title, but human visitors will not view them because with the help of CSS we have concealed them.
.post-title, .post-labels, post-icons, post-author {display:none!important;}


  1. 5. Now Publish it and then visit your site to witness a perfect full width page without sidebar.

Post a Comment

Thank You

Previous Post Next Post