Quick Tutorial: How to Install Gadget Blogger Templates

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




    1. The Relentless Builder September 7, 2011 3:08 am

      I found this VERY helpful. You're doing an awesome job. Thanks a lot!

    2. Bose September 17, 2011 5:23 am

      Inspiring Designs; Creative Excellence
      Resume template

    3. CBH September 20, 2011 1:42 pm

      Thank you so much for this post. I want to let you know that I posted a link to your blog in CBH Digital Scrapbooking Freebies, under the Page 4 post on Sep. 20, 2011. Thanks again.

    4. Lisa September 27, 2011 4:15 am

      Thanks so much for this gorgeous template and the easy to follow instructions. One question…how do I link my facebook page to the facebook button you've provided? I know how to show the button on my blog using widgets but can't figure how how to connect the button to facebook when clicked.


    5. starsunflowerstudio September 27, 2011 6:25 am

      @Lisa Where it says a href="http://starsunflowerstudio.blogspot.com&quot; put your facebook link inside the quotes.

    6. Maggie Perez June 1, 2012 6:22 am

      I just found your blog and love this template you are a blessing sent from heaven "You Rock" keep up the great work!

    7. Arooma August 3, 2012 8:53 am

      Ahhh… thanks a lot! Your tutorial helps me 🙂

    8. Rhodes Creations January 18, 2013 7:19 am

      Hi! I did this and it worked like clockwork! Thanks so much! Laura R.

    9. EYLÜL February 7, 2013 1:56 pm

      paylaşım için çok teşekkür ederim sevgilerr

    10. farah inayati August 22, 2013 2:29 am

      hey, how can i make a link to my twitter from this gadget label? thank you

    11. J Chen September 18, 2013 2:54 pm

      Hello .. I love your design but I really don't know how to apply it .. I've followed every step but I don't know where to put in the image and stuff. Sorry I'm new to this. Can anyone please help me out? like tell me right from the beginning ><

    12. Susan Smith September 19, 2013 10:55 pm

      It's under: Layout>Header>Configure Header>

      • Susan Smith September 19, 2013 10:56 pm

        Oh you have to actually click on the "Edit" button in the header box under layout.


    Leave a Reply to Susan Smith Cancel reply

    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.