How To Move Or Remove The Sidebar
Some templates made by SimplyTheStudio have the sidebar on the left and some have it on the right side. If you do not like the initial position of the sidebar in the template you bought, you can easily change it yourself. In this tutorial we are going to show you how to move the sidebar to the left or right, or how to remove it completely.
Move the sidebar to the left
- Open your Blogger Dashboard and from the left menu select “Theme”.
- Locate the button “Customize” and click on the arrow next to it.
- From the drop-down menu, select “Edit HTML”.
- Click inside the code and press CTRL + F (or CMD + F on Mac). A small search box in the top right corner will appear.
- Type into the search box —
.main-wrap
and press ENTER. - Underneath this code change
float: left
intofloat: right
. - Type into the search box —
.sidebar-wrap
and press ENTER (this should be a few lines below). - Underneath change
float: right
intofloat: left
. - Save by clicking on “Save the theme”.
Move the sidebar to the right
- Open your Blogger Dashboard and from the left menu select “Theme”.
- Locate the button “Customize” and click on the arrow next to it.
- From the drop-down menu, select “Edit HTML”.
- Click inside the code and press CTRL + F (or CMD + F on Mac). A small search box in the top right corner will appear.
- Type into the search box —
.main-wrap
and press ENTER. - Underneath this code change
float: right
intofloat: left
. - Type into the search box —
.sidebar-wrap
and press ENTER (this should be a few lines below). - Underneath change
float: left
intofloat: right
. - Save by clicking on “Save the theme”.
Remove the sidebar
- Open your Blogger Dashboard and from the left menu select “Layout”.
- Move or remove all gadgets from the “Sidebar” section — it must be empty.
- Save by clicking on the save icon in bottom right corner.
- From the left menu in your Blogger Dashboard select “Theme”.
- Locate the button “Customize” and click on the arrow next to it.
- From the drop-down menu, select “Edit HTML”.
- Click inside the code and press CTRL + F (or CMD + F on Mac). A small search box in the top right corner will appear.
- Type into the search box —
.main-wrap
and press ENTER. - Underneath thic code change
margin: 0
intomargin: 0 auto
and delete the linefloat: left/right;
.- Tip: If you want to increase the size of the post, you can change the number in
width
into whatever you want; just make sure it is not higher than the number in the.outer-wrap
section (it is two sections above this one).
- Tip: If you want to increase the size of the post, you can change the number in
- Type into the search box —
.sidebar-wrap
and press ENTER (this should be a few lines below). - Underneath change
width: (number)
intowidth: 0
and delete the linefloat: left/right
. - Save by clicking on “Save the theme”.
Tip: Make sure you do not delete any semicolons (;) — every line you are changing in this tutorial has to end with the semicolon (;). Otherwise the code will not work properly.
Is this not what you were looking for?
Perhaps you need a different tutorial. Return to the main Tutorials page and also browse through our Troubleshooting pages and FAQ for most common solutions.