Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

blogger customization help

Featured Replies

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

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.

  • 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;

}

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.

  • 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

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

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.