How to Change the Widget Margins in Blogger
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.
Other People Are Reading
Instructions
-
-
1
Sign in to your Blogger account to go to the Dashboard.
-
2
Click the blue "Design" link on the Dashboard. Click "Edit HTML" under the "Design" tab to go to the "Edit Template" page.
-
-
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
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
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
Click the blue "View Blog" link to view the blog with the increased widget margins.
-
1
Tips & 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.
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
