July 27, 2009

How to Add a Template



By adding my designs to your blog, you agree to my terms of use.

UPDATE: Blogger has updated their interface and I have updated this tutorial to correspond to the new look. If you still have the old look, just look at the instructions that are in green. (I recently tried to add one of my templates and I was given an error message that I don't understand. I will update this more once I figure out the problem.)

What's the difference between a template and a background?
-A background is just the picture that shows up like wallpaper on the back of your blog.
-A template is a set of instructions that tells your blog what the layout should look like, i.e. how many columns, what font, etc.

Before you add a template:
1. Remove any free background you already have by clicking Layout from the drop down menu.
Then find the HTML/JavaScript gadget with your background in it and click Remove.

(Old interface instructions: Remove any free background you already have by clicking Design, then find the HTML/JavaScript gadget with your background in it and click Remove. )

2. Next, back-up your sidebar gadgets. You can do this however you choose. You can make a list of all the gadgets that you currently have, copy the html on those that use html, copy the info on any other gadgets and make sure that you can upload any sidebar pictures again. You shouldn't lose your gadgets by following my instructions, but you never know what might go wrong. It's best to be safe.

(Old interface instructions: same as above)


3. If you are changing from a 3-Column template to a 2-Column template, move all of your gadgets to your right sidebar. Do this by clicking Layout from the drop down menu or left sidebar (depending on what screen you are on) and then clicking and dragging each gadget into the sidebar on the right.

(Old interface instructions: You will click on Design instead of Layout.)

4. Now, backup your template by going to your Template page and clicking Backup/Restore on the right side of the screen. Click Download Full Template and Save. Find a folder on your computer to save it to.

After you have downloaded your template, click Edit HTML. It will give you a disclaimer about editing your HTML, warning you that only advanced users should edit the HTML and that you may not be able to use the Template Designer for all of its features if you do so. If you are ok with this, click "Proceed".

(Old interface instructions: Backup your template by going to your Layout page and clicking Edit HTML. At the top where it says "Backup/Restore Template", click Download Full Template and click Save. Find a folder on your computer to save it to.)


Now you are ready to add a Template.


To add a Template:
1. Click on the link given in the post of the template you like.
2. Select all of the text in the white section (Hold down "Ctrl" and then "A" or go to "Edit" and then "Select All")
Copy everything on the page. (To copy, make sure all of the text is selected and then hold down the "Ctrl" button and the "C" button or go to "Edit" at the top of your browser window and click "Copy".)

Here is what you should see. The code I selected is in blue. (Click to enlarge.):


3.  Go back to your Template page and click Edit HTML.

(Old interface instructions: Go back to your Design page and click Edit HTML.)

4. Erase everything in the box in the middle of the page as shown below, highlighted in blue.


(Old interface instructions: Erase everything in the box in the middle of the page as shown below, highlighted in blue.)

(Old Interface)

5. Paste the HTML that you copied into this box by holding down "Ctrl" and "V" or going to "Edit" at the top of the browser and clicking "Paste".
6. Click Save Template.
7. This last part is important!  Your blog may say, "Warning: Your new template does not include the following widgets:" and then it will list the extra widgets that you already have on your blog. It then asks if you want to keep them.  YES you do!  Click Keep Widgets.
8. Now, click View Blog.

You're done!!

If you have any problems, you can always go back to your old template by going back to the Template page ("Edit HTML" page on the old interface) and clicking "Backup/Restore" ("Upload" on the old interface). Find the copy of your original template that you saved to upload back onto your blog. Or simply choose any of Blogger's template from the Template Designer.

Or, if you have the old Blogger interface, you can go back to a "Minima" Template (the basic blogger template) by going to Design and clicking on Edit HTML and then clicking Select Layout Template (at the bottom) and then choosing "Minima". Click "Save Template". You will back to normal again.

Don't forget to add one my buttons when you are done!!

24 comments:

  1. When I go on to my edit template thingy, and I delete everything in the box in the middle and replace it with your template it says to me 'we were unable to save your template, there should be one and only one skin in the template and we found: 0' :( I'm trying to use the cupcake one that you have at the bottom of the page.

    ReplyDelete
  2. The cupcake one that you mention is only a background, not a template. A background is just a picture that acts like wallpaper on your blog. A template is a set of instructions that tells your blog things like how many columns, what font to use, etc. That means that you don't go to the "Edit HTML" like these instructions tell you to. Send me an email and I'll help you some more or go to http://blogdesignsbydani.blogspot.com/2009/05/free-blog-backgrounds-by-dani.html for instructions on how to change your background.

    ReplyDelete
  3. Thank you so much for the free template. You're instructions were great. I am so not computer literate and was able to add your template. Thanks again. I will probably want to upgrade to a custom template in the near future.

    ReplyDelete
  4. What? I can't understand it says when I put the code it says

    We're sorry but we were unable to complete your request
    ='(

    ReplyDelete
    Replies
    1. I'm sorry it is not working for you. Can you give me exact details on what you did, where you entered the code, etc?

      Delete
    2. I did is I copy the code and paste the code in the Html and then its says "We're sorry but we were unable to comeplte your request" can You make new tutorial ? , the blogger is on a new look now =(

      Delete
    3. I updated the tutorial but it still may not work. I also tried to add one of my templates to another blog and received an error message. I don't know why but I will look into and update this tutorial or make a new post about it. Stay posted!

      Delete
    4. I have the same problem.. but when I preview it it's okay.. then when I click save 'we're sorry but we were unable to complete your request'.. how to fix it??

      Delete
    5. Ellia, I noticed the same problem when I tried it. Blogger must have changed something. I think I have an idea of how to fix it but it will take a little time on my part. I will work on a solution this week or next and post an update.

      Delete
  5. I am getting the same error message! Dang. I love the Yellow Daisies template. :( Any luck getting this error fixed, Dani? Love ya!!!
    Shantelle

    ReplyDelete
    Replies
    1. I think I just emailed you, Shantelle, but yes my templates are not working :( I will work on fixing it but I have so much going on right now it may take a while. Let me know if what I suggested will work for you.

      Delete
  6. Ok thanks for reply
    Sorry if i had a long reply

    ReplyDelete
    Replies
    1. Your reply was fine. So sorry it's not working. I will try to work on it this month...hopefully it won't take longer than that but we will see.

      Delete
  7. Hello Dani
    Thank you for the free templates. I've contacted you to purchase a template but I know you were not filling any request. So I installed the Yellow Daisies Template 2011 and everything works except that the image of the elements of the page does not get centered on the background page. I cannot get a centered page. See here http://yolandascakes.blogspot.com/
    I would appreciated your help if you can.
    Thanks and God bless.

    ReplyDelete
    Replies
    1. It looks like you found a template that works for you. Are you happy with that one? I am recovering from back surgery and can't do much for now. But if you still would like help in a couple months please send me an email.

      Delete
  8. Hi! We're supposed to erase EVERYTHING in the box? From top to bottom?

    ReplyDelete
  9. nice template :) thanx, ,the instruction make is so simple and aesier to understand

    ReplyDelete
  10. I tried to upload the yellow template but it shows my blog now edit html code only

    can you please let me know wht i might be doing wrong?

    ReplyDelete
    Replies
    1. Can you tell me exactly what you did to upload your template? Also what is your blog address?

      Delete
  11. The template - Chalkboard Fun is AWESOME!!! You're directions were so clear and I truly needed the step-by-step instructions. My only problem is it doesn't line up properly on my mobile device (iPhone 5 with iOs 7). Any suggestions - it's just too cute to not use!

    ReplyDelete
  12. good Idea Your Post, I Like this blog

    Is my Blog site http://it-house24.blogspot.com/

    ReplyDelete
  13. I love this layout, thank you so much :)

    ReplyDelete
  14. Just changed the template! Thanks! I absolutely love it!!

    ReplyDelete

Thank you so much for leaving a comment! I would love to answer everyone's questions, but I am a busy mama. I will try my best, but technical questions that require me to study your blog's html are very time consuming for me. I may not be able to answer all of these comments. If you are a reader that knows the answer to a question, please help your fellow readers by offering your advice.