How to change the widget margins in blogger

Written by meg north
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to change the widget margins in blogger
Change the widget padding with HTML coding on Blogger. (Comstock/Comstock/Getty Images)

Change the HTML/CSS "margin" property within the Blogger template to increase or decrease the margins. Blogger widgets are located in your blog's sidebars, so this is where you change the code. The "margin" property uses the four directional values of top, right, bottom and left. Margins are measured in pixels, abbreviated as "px." Use Notepad or another text editor to change the code, then copy it into Blogger. Back up your Blogger template before changing any HTML code.

Skill level:
Moderately Easy

Other People Are Reading

Things you need

  • Notepad or other text editor (optional)

Show MoreHide

Instructions

  1. 1

    Sign in to your Blogger account to go to the Dashboard.

  2. 2

    Click the blue "Design" link on the Dashboard. Click "Edit HTML" under the "Design" tab to go to the "Edit Template" page.

  3. 3

    Scroll down to the ".sidebar. widget" section. The coding looks similar to this:

    .sidebar .widget, .main .widget {

    border-bottom:1px dotted $bordercolor;

    margin:0 0 0 5px;

    padding:0 0 0 5px;

    }

  4. 4

    Change the "0 0 0 5px" next to "margin" to the value you want. For example, change the first "0" to "10px" to increase the top margin; the second "0" to "10px" to increase the right margin; the third "0" to "10px" to increase the bottom margin; and the "5px" to "0" to decrease the left margin.

  5. 5

    Click the orange "Save Template" button. The code now looks like this:

    .sidebar .widget, .main .widget {

    border-bottom:1px dotted $bordercolor;

    margin:10px 10px 10px 0;

    padding:0 0 0 5px;

    }

  6. 6

    Click the blue "View Blog" link to view the blog with the increased widget margins.

Tips and warnings

  • click "Ctrl" and "F" at the same time to pull up the "Find" box. Type the ".sidebar .widget" code to find it quickly within the large HTML template.

Don't Miss

Resources

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.