How To Move Or Remove The Sidebar

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

  1. Open your Blogger Dashboard and from the left menu select “Theme”.
  2. Locate the button “Customize” and click on the arrow next to it.
  3. From the drop-down menu, select “Edit HTML”.
  4. Click inside the code and press CTRL + F (or CMD + F on Mac). A small search box in the top right corner will appear.
  5. Type into the search box — .main-wrap and press ENTER.
  6. Underneath this code change float: left into float: right.
  7. Type into the search box — .sidebar-wrap and press ENTER (this should be a few lines below).
  8. Underneath change float: right into float: left.
  9. Save by clicking on “Save the theme”.

Move the sidebar to the right

  1. Open your Blogger Dashboard and from the left menu select “Theme”.
  2. Locate the button “Customize” and click on the arrow next to it.
  3. From the drop-down menu, select “Edit HTML”.
  4. Click inside the code and press CTRL + F (or CMD + F on Mac). A small search box in the top right corner will appear.
  5. Type into the search box — .main-wrap and press ENTER.
  6. Underneath this code change float: right into float: left.
  7. Type into the search box — .sidebar-wrap and press ENTER (this should be a few lines below).
  8. Underneath change float: left into float: right.
  9. Save by clicking on “Save the theme”.

Remove the sidebar

  1. Open your Blogger Dashboard and from the left menu select “Layout”.
  2. Move or remove all gadgets from the “Sidebar” section — it must be empty.
  3. Save by clicking on the save icon in bottom right corner.
  4. From the left menu in your Blogger Dashboard select “Theme”.
  5. Locate the button “Customize” and click on the arrow next to it.
  6. From the drop-down menu, select “Edit HTML”.
  7. Click inside the code and press CTRL + F (or CMD + F on Mac). A small search box in the top right corner will appear.
  8. Type into the search box — .main-wrap and press ENTER.
  9. Underneath thic code change margin: 0 into margin: 0 auto and delete the line float: 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).
  10. Type into the search box — .sidebar-wrap and press ENTER (this should be a few lines below).
  11. Underneath change width: (number) into width: 0 and delete the line float: left/right.
  12. 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.