edit or create your Blogger template

Here are some basic tips you can use to edit or create your Blogger template:
Backup Templates and Components

The first thing you should do before changing the template Blogger is backing up the old template and page elements that you currently have. Components in addition to posting, archives, and comments quite vulnerable to the risk of missing the new template applied (Blogger will give a warning in the form of a list of widgets that will be lost if you apply a new template).

1.
Login to your blog management page, click the Layout> Edit HTML.
2.
To back up the initial template, selecting the code in the Edit Template box (Ctrl + A), then copy (Ctrl + C).
3.
Open Notepad, then copy the code into Notepad worksheet (Ctrl + V).
4.
Save backup your original template.

Edit HTML Blogger

For the record, if you have added the element / widget on your blog page, so before doing step 2, activate the first box Expand Widget Templates option (at the top of the Edit Template box). Only then will copy the entire code and save it as your next step.

Now you're ready to tamper with your Blogger template. If the result is less satisfactory, you can still restore the initial template by copying the code from Notepad to backup the Edit Template box.
Eliminate NavBar

Feel uncomfortable with the view NavBar at the top of your blog page? Remove the NavBar and expand your blog's page views in the following ways:

Blogger NavBar

1.
Open your Blogger template in the Layout> Edit HTML.
2.
Find the insertion point, place the cursor just above the line body (.
3.
Paste the code line below to remove the NavBar look at your blog page:

# navbar-iframe (
height: 0px;
visibility: hidden;
display: none
)
4.
Save the template changes, preview blog and enjoy the results.

Eliminating code insertion NavBar

Modify the width of page

The first thing you need to understand in modifying your blog page is about setting the width component of the page (header, the page posts, sidebar, and footer).

Here is the formula that you can make the guidelines in a wide tweaking your blog page:

# header-wrapper = # outer-wrapper = # footer = # main-wrapper + 30 + # sidebar-wrapper

Find and change the width value: in that section as needed:

*
# header-wrapper, # outer-wrapper, and # footer a standard width of the entire blog page.
*
# main-wrapper is the size of your post column.
*
# sidebar-wrapper is the size of your sidebar column.
*
The value 30 is used to provide distance between the column posts and sidebar columns.

With BASED on the above formula, then you can change the size of your pages by editing the HTML with the following values:

Initial width values:
660px = 660px = 660px = 410px + 30px + 220px

Width value for the modification:
750px = 750px = 750px = 470px + 30px + 250px

Explanation editing steps:

1.
Override width value in the # header-wrapper, # outer-wrapper, and # footer to 750px.
2.
Override width value in the # main-wrapper to 470px.
3.
Override width value in the # sidebar-wrapper to 250px.

Value width # main-wrapper = 470px suitable for advertising (it can accommodate the size banner 468x60 px). Please resize to taste with BASED on the above formula.
Modify the Number of Columns

Options provided Blogger template generally consists of two columns (columns posts and columns sidebar). You can create additional columns with the sidebar and copy the code to reset the size.

As an example, how to create a blog page with three columns.

New Sidebar column insertion

1.
Open your Blogger template in the Layout> Edit HTML.
2.
We double column code existing sidebar. Generally, code named sidebar sidebar-wrapper, but there is also a template that uses a sidebar-wrap or the like.
3.
Discover, selection, and copy this section:

# sidebar-wrapper (
width: 220px;
float: $ endSide;
word-wrap: break-word; / * fix for long text breaking sidebar float in IE * /
overflow: hidden; / * fix for long non-text content breaking IE sidebar float * /
)
4.
Move the cursor under the code, and paste the code that you copy. Now you have the code above 2.
5.
Differentiate code name, edit the name of # sidebar-wrapper that you insert into # sidebar-wrapper2.
6.
Change the value of width in the # sidebar-wrapper and # sidebar-wrapper2, 2 by dividing the existing value. For example the initial values to 220px you for each of 110px.
7.
Next find, selection, and copy this section:

8.
Move the cursor under the code, and re-paste the code that you copy. Now you have the code above 2.
9.
Edit name
have you insert a

10.
Save Template. Preview your blog to ensure the display 3 columns you have successfully created.

Note, if the width of the first and second sidebar to narrow, then use the formula Modifying Page Width.