Installing a Template on Blogger - Method 1

This method tells you how to install a Blogger template and keep your widgets by way of inserting the widget code into the new template. If there are any errors or suggestions you have about this article please leave a comment.

**the code used here was taken from the Blogger Minima template, your code MAY vary...email me if you have a question**

So you found a cool template for Blogger or you just want to change to an existing Blogger template. Have switched templates before and lost your widgets? How would you like to install a template or two WITHOUT LOSING YOUR WIDGETS (or gadgets as they are now called)???? OK...I KNOW you do!!!!!!!!!! I've heard SO MANY people tell me about their horror stories so here's a short and sweet how to! Don't be a widget-less victim!!!!

First of all make sure you BACKUP your template!!!!! If you mess it up you can always upload...well you can't upload your widgets us you can get the rest back. To do this:

• Click on Customize from your blog.
  
• Click Edit HTML
• Clock on Download Full Template.
  
• Choose the desired location and click save. The actual save process will vary depending on your operating system and web browser.

If at ANY POINT during this process you get the..."The following widgets are about to be deleted" message make sure you HIT CANCEL!!!! DO NOT just give up and deal with it...email me!!!

OK so now the "FUN" part! If you get the hang of this you can change your blog as often as you want!!!!

Since you are already in the Edit HTML area (because you should have backed-up) lets copy the widget code we will need to put into the new template.

• You will need to scroll down in the Edit HTML scroll box to find to the widget code...here is a screen shot to help show you the code. Notice Expand Widget Template is not checked and I scrolled almost all the way down to find the code I needed.
  

I have selected the code I need. You're code will differ depending on how many widgets you have on your sidebars and the names and types of them. You want ALL the lines that resemble the ones I've selected.

• To copy the code you first need to select it. Simply click the mouse at the END of the last line you need. While holding the mouse button drag the mouse to the front of the first line of code you need.
• Now right click your mouse on the selected code and click Copy.

Before we move on I suggest opening a new window so that you can leave your existing blog open. You will need it again soon.


The next step will be to create a new blog. I know your saying..."WHAT? But I don't need a NEW blog". Don't worry we are only using it for a while. Doing this will enable us to insert your widgets WITHOUT Expanding the Widget Template. Trust me, you want that!!!

I suggest opening a new window so that you can leave your existing blog open. You will need it again soon.

To create a new blog...(just in case someone helped you the first time):

• From your dashboard click on Create a Blog
• Choose a name
• Choose a template
• You're done!
  

Now upload the spiffy new template you found or even select the an existing Blogger template.

To choose a Blogger template

• Click on Pick New Template
  
• Choose one and click Save

To upload a new template

• Click on Edit HTML
• Next to "Upload a template from a file on your hard drive" click on Browse
• Choose your new template from your computer.
• Click on Upload
• Click on Save Template

One last thing and then we can insert the widget code for your actual blog.

• Delete any widgets you may have! To do this:
  • Click on Layout
    
  • Click Edit and then Remove on each widget.

Again with the scrolling! Scroll down to the sidebar widget area...it will look something like this:


You need to paste the widget code between ...preferred=yes/> and the div under that line like this:

If you don't know how to paste here is how:

• First put your cursor right behind ...preferred=yes/>, to do this Click the mouse right behind it.
• Press the Enter key on the keyboard to drop down a line.
• Right click the mouse on your new line and click on Paste. If the code does not appear you lost it from the clipboard. Just go back to your current blog and copy the widget code again. Try pasting it now.

Don't worry about the space in front of each line...it's only for looks. It doesn't affect the functionality of the code.

Finally copy ALL the code from the new template:

• Right click anywhere in the Edit HTML scroll box
• Click on Select All and then click Copy

Now go back to your current blog so you can paste:

• Right click anywhere in the Edit HTML scroll box and then click on Paste.
• Click on Preview. If you get any errors click on Cancel! If everything looks good close the preview and click on Save Template.

If you can't get it you can try the process again or try Method 2. You will be learning a little about Bloggers code! Or you can email me, I'll do it FOR YOU for a small fee.

Installing a Blogger Template - Method 2

This method tells you how to install a Blogger template and keep your widgets by way of inserting the CSS into the new template. This method makes you learn a bit more about code. If there are any errors or suggestions you have about this article please leave comment.

**examples of code are taken from a Blogger Minima Template**

Before we talk I must say…ALWAYS BACKUP BEFORE YOU DO ANYTHING!!!! Make sure you use the backup button and not just copy/paste the HTML. You can EASILY upload the old template if you have to.

In the Edit HTML window you will see CSS and HTML

Really all you need to do is copy the CSS ONLY from the new template into the HTML of your current blog. Although alot of time you WILL need to edit some HTML if the template design as well.

Here are some screen shots to help explain:

So here is the top…scroll and you will start seeing…




…CSS, this is what CSS looks like:



Here is the end…copy everything above /**Page structure…**/. Notice I don’t need widgets expanded…that only makes the HTML longer and I’m showing you the scroll bar on the side to give you an idea of just how far down you will be going.



Now once you copy and paste, hit PREVIEW!!!! If you get errors you can solve them before publishing. If you just can't seem to figure it out simply leave the page without saving and it's like you never touched it!!

It’s possible that you will need to re-order the HTML depending on the difference between the current template and the new one.

Here is a bit of explanation to help you modify the HTML:

Let's look at the HTML without widgets:




Here is a drawing to represent what this code means.



The div tags are used to create the "boxes" below. Here is another drawing to help explain.

Obviously there is much more to positioning and such bout for these purposes you just need to understand the layout. Here is a link to a great article explaining more about the HTML.

Now what you need to do is compare your new template to your current one. There are many things you need to look at: are div's in the same order, is there an additional sidebar, is a div outside of another div on the new template but contained with the old, and so on. When looking at the code see that some div's are closed immediately like this:



When rearranging code you will find this knowledge very helpful. If yo need anything else or have ways I can improve this article please let me know!


If you can't get it you can try the process again or try Method 1. You will be learning a little about Bloggers code! Or you can email me, I'll do it FOR YOU for a small fee.