Quick Tutorial: How to Install Gadget Blogger Templates

  • Get access to thousands of craft files

Quick Tutorial: How to Install Gadget Blogger Templates

September 1, 2011
/ /
in News

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)

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

2. Adjusting Your Blogger Gadget Template

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:

Design>Page Elements>(Header)>Edit
Choose file from your computer
Choose placement

New Blogger:

Choose file from your computer
Choose placement

If you’d like to center the image read on: Centering Header with Blogger Template Designer



    Font Banner - Free Fonts

    Post a Comment

    Your email address will not be published. Required fields are marked *


    This site uses Akismet to reduce spam. Learn how your comment data is processed.