Styling your blogspot blog (Part 1) - Floating Review

BloggerToday I will start sharing what I know to modify and create your own blogger theme. There are a lot of free blogger theme out there but as a web designer I don't use them, I want to create my own design for my own blog. Before anything else I want you to backup your existing template, just click on "Layout" and go to "Edit HTML" tab and click the "Download Full Template" link and then save to your desire location. Or you can simply copy all the code you see in the code frame and paste it to your word processing application, make sure you check the "Expand Widget Template" before doing copy and paste.

We need to backup our existing template first so if anythings goes wrong you can simply restore your previous template.

For this tutorial we will put the side bar in the left side of the page while the main content goes to the right.

Float Left In order to do this you must go to "Layout" and click "Edit HTML" tab. Once you see the "Edit Template" code find this #main-wrapper and #sidebar-wrapper. I want to explain all the characters the code has but I don't think my readers are familiar with CSS so let's just go straight to the topic.

Example of the #main-wrapper code:

  width: 560px;
  float: $startSide;
  word-wrap: break-word;
  overflow: hidden;

Example of the #sidebar-wrapper code:

  width: 250px;
  float: $endSide;
  word-wrap: break-word;
  overflow: hidden;  
  padding: 10px;

This are only examples you might have a different values inside #main-wrapper and #sidebar-wrapper.

So the next step is to find "float: $endSide;" inside #sidebar-wrapper and change it to "float: $startSide;" then go #main-wrapper and change "float: $startSide;" to "float: $endSide;" and your done. Click preview before saving the template to make sure everything goes fine.

Float RightDo not change any code values in this tutorial unless you know what your doing and make sure to remove double quote ("") and copy as is.