How I copy widgets from one template to another

When you choose a new default Blogger template, all of your widgets are copied over to the new template. However, if you try to upload a customized template (such as the ones featured here), you will probably get a message asking if you want to delete most of your existing widgets. I am often asked "how can I copy my widgets over to a new template?", so in this tutorial I will share the method I use to do this quickly and painlessly.

Your blog widgets are saved in your Blogger account, rather than in the actual template of the blog. The widgets are called to your blog by anchors within the template which look like this:

<b:widget id='HTML1' locked='false' title='My Widget Title' type='HTML'/>

As you can see in this example, each widget in your blog is given a unique identity (in this case, "HTML1") and a title, which is the same as the title you provide when you create the widget.

If you upload a template to your blog which contains the same widget identifiers, then the widgets will be called from your account by the template, and will display in your blog as normal. On the other hand, if you upload a template which does not contain the same widget identifiers, you will be prompted to delete widgets from your account.

So to ensure you can maintain your widgets from your existing blog template in your new blog template, we must copy these widgets over to the new template before uploading this to your blog.

The method I use to accomplish this is by using a second "test blog". I have explained all about creating and using a test blog in this post. If you don't already have a test blog available to use, you will need to create one temporarily to help you copy your widget identifiers over to your new template. Once you have created your test blog, here is the method for copying over your widgets from your old template to your new one:

1. Log in to your Blogger dashboard.


2. You will need to be able to edit both your existing blog template and your test blog template, so it's advisable to have two browser windows (or tabs) open at the same time. You can easily do this by keying CTRL+N to bring up a new page. So for the moment your Blogger dashboard will be available in both browser windows.


3. Now, in the first browser window, select your test blog and go to Template>Edit HTML. Click on the "Upload New Template" link near the top of the page and upload the new XML template you wish to adapt for your main blog. Once this template has uploaded, deselect the "expand widget templates" box.


4. In the second browser window, select your existing blog template and again go to Template>Edit HTML. Do NOT check the "expand widget templates box", as this will make things much easier for you. Now, locate the widget content identifiers in your template sidebar. Most likely, the section will look something like this:
   
   The code featured inside the red box displays the identifying code for your widgets, which calls the widgets to appear in your blog. You need to copy all of these <b:widget...> sections to yout clipboard, or paste into Notepad for easy editing in a few moments.


5. Once you have copied the widget identifiers from your old template, go back to the browser window in which you can edit your new template.


6. Find this section in your blog template:
   

   <div id='sidebar-wrapper'>
   
   <b:section class='sidebar' id='sidebar' preferred='yes'>
   
   There may or may not be content here...
   </b:section>
   
   </div>

   
   If there are any widgets defined here, it is advisable to delete them. Otherwise you may end up with duplicated widgets. Then in their place, paste the widget codes from your old template:
   

   <div id='sidebar-wrapper'>
   
   <b:section class='sidebar' id='sidebar' preferred='yes'>
   
   Paste the widget identifiers here
   </b:section>
   
   </div>

   
   
   
   If there are no widgets present in the sidebar of your new template, the code may look like this instead:
   

   <div id='sidebar-wrapper'>
   
   <b:section class='sidebar' id='sidebar' preferred='yes'/>
   
   </div>

   
   In this case, you should delete the trailing slash from the end of the line (highlighted in red). Make a line break then paste your widget content as before. Then finally create another line break and add the following line:
   

   </b:section>

   The finished result should look something like this:
   
   
   


7. IMPORTANT! Do not preview your template at all during this process! If you do, you run the risk of duplicating the widgets which will cause you many problems. This seems to be a glitch on Blogger's behalf rather than an error of this method. In any case, do not preview the template.


8. At this point, you should save the test blog template, after which you can view your blog in the normal manner. You will notice that no widget content is actually showing, only the widget titles. This is perfectly normal: as I mentioned earlier, the widget content is stored in the settings for your original blog.


9. Okay, now we have copied over the widgets, we can download the XML template ready to transfer over to the original blog. To do this, go to Template>Edit HTML and select "Download full template" near the top of the page. Save the template to your computer with a name you can easily identify.


10. Now back to the other browser window where you should have the Edit HTML page for your original blog still on the page. Here you should look for the "upload new template" section near the top of the page. Browse for the template you just downloaded from your test blog and upload it. You should NOT receive any error messages, like this:
    
    
    
    If you do see such error messages, take note of the widgets the template wants to delete, then choose to cancel the process. You should then copy the appropriate widgets from the old template into the new template in your test blog (as before), save the template and attempt to upload it again.


11. If you receive no error messages, your template will be saved, and you can now view your new blog template with all your old widgets still in place. You can then move the widgets around however you wish in the Layouts section of your dashboard.

I hope this tutorial helps you easily copy your widgets from your old template to your new one. Please leave your comments and opinions below, and feel free to contact me if you have any problems doing this in your own blogs.

Technorati Tags: widgets | templates | copy+over | test+blog>