September 12, 200817 yr hello guyz i m a newbie in blogging looking 4 help from u guys the main thing i m looking for is to increase the width of both right and left sidebars which should ultimately reduce the vacant space on right and left side of sidebars , i hav tried so many things but nothing has worked 4 me secondly i want scripts or watever which can show my recent post and recent comments my blog is www.jobsinpak.blogspot.com it will be great from u guys
September 12, 200817 yr Now, whatever you add to your sidebars, you have to give up in the middle...but you can change these things in the Edit HTML section when you're logged in. Go to Layout, then Edit HTML. Change the width in these three sections of the CSS, but remember to keep the total width the same. #main-wrapper { float: left; position: relative; max-width: 518px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #main { width: 510px; margin: 0px 3px 0px 3px; padding: 0px 0px 15px 0px; text-align: left; background: #ffffff; /* url(http://farm4.static.flickr.com/3135/2746541297_c4c9e6dae2_o.jpg) repeat-y top left; */ border: 1px solid #DDF2F9; color: #999999; font: normal normal 74% Verdana, sans-serif; } The first two are the middle section. One is an outer wrapper, the other is the inside...just be sure to keep them proportioned the way they are now, make the outer 8 pixels wider than the inner. Then you can change the sidebars: #sidebar1 { width: 120px; margin: 0px 0px 0px 0px; padding: 15px 10px 3px 10px; color: #30A2D6; background: #ffffff; border: 1px solid #DDF2F9; line-height: 1.6em; } #sidebar2 { width: 120px; margin: 0px 0px 0px 0px; padding: 15px 10px 3px 10px; color: #30A2D6; background: #ffffff; border: 1px solid #DDF2F9; line-height: 1.6em; } You should be able to add recent posts and comments within the layout area also, they're just widgets that you add to the sidebar.
September 12, 200817 yr Author ok , thx for the tip, but when i try to increase the width of my blog, it gives error , can u tell me wat i m doin wrong ? plz guide me here is the code #outer-wrapper { margin: 0 auto; /* to make the template lay in the screen center */ padding: 0px 0px 0px 0px; margin-top: 0px; margin-bottom: 40px; position: relative; width: 100%; text-align: center; } #blog-wrapper { margin: 0 auto; /* to make the template lay in the screen center */ padding: 3px; margin-top: 0px; margin-bottom: 10px; text-align: center; position: relative; width: 802px; background: $blogframeColor; border: 3px solid $blogBorderColor; } #main-wrapper { float: left; position: relative; max-width: 518px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #main { width: 510px; margin: 0px 3px 0px 3px; padding: 0px 0px 15px 0px; text-align: left; background: $postbgColor; /* url(http://farm4.static.flickr.com/3135/2746541297_c4c9e6dae2_o.jpg) repeat-y top left; */ border: 1px solid $postBorderColor; color: $textColor; font: $textFont; #main .widget { margin: 0px 0px 0px 0px; padding: 15px 15px 0px 15px; } /* ----- SIDEBAR ----- Blogger template design by Ourblogtemplates.com */ #side-wrapper1 { max-width: 142px; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; /* background: $mainsidebarbgColor; */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #side-wrapper2 { max-width: 142px; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; /* background: $mainsidebarbgColor; */ word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } .sidebar { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: left; font: $sidebarTextFont; } #sidebar1 { width: 120px; margin: 0px 0px 0px 0px; padding: 15px 10px 3px 10px; color: $sidebar1TextColor; background: $sidebar1bgColor; border: 1px solid $sidebar1BorderColor; line-height: 1.6em; } #sidebar2 { width: 120px; margin: 0px 0px 0px 0px; padding: 15px 10px 3px 10px; color: $sidebar1TextColor; background: $sidebar1bgColor; border: 1px solid $sidebar1BorderColor; line-height: 1.6em; } #sidebar1 .widget { margin: 0px 0px 0px 0px; padding: 0px 0px 15px 0px; } #sidebar2 .widget { margin: 0px 0px 0px 0px; padding: 0px 0px 20px 0px; }
September 12, 200817 yr Specifically what are you trying to make wider? How wide? If you only change the numbers as I showed you, there is no reason you should get errors.
September 13, 200817 yr Author this is the error which i get even when i simply try to increase the sidebar width or main width, "More than one widget was found with id: Text2. Widget IDs should be unique" any suggestions
September 13, 200817 yr That doesn't have anything to do with the width...look at your layout and check your sidebar widgets...it says you are trying to have two with the same name.
Create an account or sign in to comment