Quick Tutorial: How to Install Gadget Blogger Templates

To resolve any confusion, I’ve put together a tutorial so everyone will know how to set up a html gadget template in the new and old versions of blogger blogspot blogs. We assume that you already have a template picked out and have copied the code for it.

1. Adding the Template Gadget Code

Old Blogger:Design Tab>Page ElementsAdd Gadget>HML/Javascript in basics tab

Add Code to HTML Gadget & Save

New Blogger: (accessed via draft.blogger.com)

Layout
Add Gadget>Html/Javascript in basics tab
Add Code to HTML Gadget & Save

2. Adjusting Your Blogger Gadget Template

<div
It will temporarliy look funny with the white parts as shown below. Have no fear. We’ll fix that in the next step, and also adjust the template width to align everything.Old Blogger:

Design Tab>Template Designer
Simple Template (white)

New Blogger:

Template Button on left
Simple template (white)

a. Fixing the White Background
Old BloggerYou’re already in the template designer

New Blogger

Click on Customize Button

Ok now we’re finally in the same area whether in the new blogger or the old blogger!

Fix White Background in Blogger Template Designer (Make Transparent)

Advanced Tab>Backgrounds
Outer background>Transparent
Main Background>Transparent
Date Header>Transparent (you can change color of the text here too)
Post Footer>Background Color & Shadow Color>Transparent
Apply to blog

Template Designer>Advanced>Backgrounds>Transparent

Template Designer>Advanced Backgrounds>Transparent

Template Designer>Advanced>Date Header & Post Footer Edit

b. Adjusting Widths to Align Your Template
Blogger Template Designer:

Entire Blog: Max width

This will vary depending on which gadget template you are using and whether it’s 2 column or 3 column. Feel free to play around with the layout tab as well. Keep in mind that if you adjust the body layout, you’ll have to readjust the widths again.

c. Adding a Header Image
Old blogger: