Modifying your blogger templates

Tired with your old looking templates? There are two choices for you. The former is quite practical, search and download templates Blogger from third parties, then copy and install it to your new templates. The second is more creative, modify your own template!

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

1. Backup Templates and Components

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

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

For the record, if you have added the element or widget on your blog page, then before doing step 2, you have to activate the Expand Widget (at the top of the Edit Template box). then you can copy the entire code and save it as your next step.

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

2. 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:

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

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



3. 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 of 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:
Override width value in the # header-wrapper, # outer-wrapper, and # footer to 750px.
Override width value in the # main-wrapper to 470px.
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). You can resize it based the formula.