How to install new templates without losing widgets?
It's frustrating to install a new template on your blog if you lose all your widgets. Here's how to avoid this problem and keep your old widgets on the blog when you install new templates. Don't worry, there's no coding involve. You just have to know where to copy and paste codes in your old template into your new template file.
1. Save your current template first
This is a must. Save the old one first just in case something screws up and you need to get back to the old template.
2. Use a text editor
Don't do any coding in the Blogger Editor; it's too easy to mess things up. Get a text editor to do any code tweaking on your computer. If you have no idea what to use, just use Notepad++. Download the latest Notepad++ Installer.exe file. It's free and it makes it easier for you to do your coding.
3. Open up the old and new template XML files in the text editor
Open them up because you'll need to copy some codes in the old template and paste them in the new template files. These codes that you'll copy and paste are basically the codes for your widgets. You don't have to understand what's going on inside the code; you just have to know where it is and what widget it is for.
4. Find out where the codes are located
Look at the image below. See the <body> tag? Click on the image to make it larger. All the codes above this tag are mostly CSS, the type of code that controls the appearance (colors, fonts) of your blog. You don't need to copy/paste anything in this section.
The codes below the <body> tag is the main XML code for your blog. Basically, it's the part that controls the layout (where the sidebars, widgets, headers are) and controls the data flow from Blogger into your blog. This is where all the codes for the widgets you want to save are located.
All your widgets are coded within the tag <b:widget> ... </b:widget>. All the <b:widget> tags must be located within the <b:section> ... </b:section> tag. The structure looks something like this:
<b:section class='sidebar' id='sidebar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'>
...
... some additional codes here ...
...
</b:widget>
<b:widget id='HTML1' .....;
...
</b:widget>
<b:widget id='Image1' .....;
...
</b:widget>
</b:section>
</div>
The above is a sample code on how a widget code looks like in a template XML file. The main location of the widget is identified with the div id label. In this case, div id=sidebar-wrapper. Below the div id is the b:section tag. All widgets must be located within this b:section tag. You don't need to worry if you don't understand much about the div or b:section thingy. The important tag you have to know is the b:widget tag. Note that you can put as many widgets as you want inside the b:section tags.
Here's an actual example of a widget tag embedded inside a b:section tag. The location is sidebar-wrapper, meaning that the widget is placed inside one of the sidebars in the blog. The widget is an image widget, as you can see it being labeled id='Image1'.
The most important thing to note is that the widget code starts with the <b:widget> tag and closed with the </b:widget> tag. This is the single most important thing you have to know when copying/pasting later on.Remember also that the widget is placed after the <b:section> tag and closed with the </b:section> tag.
Here's another example. The widget is a Linklist widget. You don't have to know the codes inside the widget tag because you won't have to change anything in there.
5. Copy and paste the widgets into new template file
Identify all the widgets you want to keep in your blog after template installation. Locate their codes in the old template file. Remember, these are the codes within the <b:widget> tags and must be close properly with </b:widget>. Copy the codes for a widget that you want to keep and paste them in the new template file, within the <b:section> tags at the location of your choice. Make sure the b:widget and b:section tags are closed properly.
If you don't know the div id location you want to paste them in, just put them in any div id, but must be inside a b:section tag. It'll then show up as a widget in the Layout > Page Elements page (as in the image below) and you can then drag and drop the widgets to any new location.
6. Upload the new template as your new blog layout
Once you've pasted all the widgets you want into your new template, upload the new template into your blog using the upload button shown below.
7. If not sure, test this technique on a test blog first
If you're not sure whether it'll work out okay, try it first in a test blog. Create a test blog with a few junk posts (lorem ipsum), create some widgets, and then try changing into new templates using the technique above. See if you can make it work.
------------------------------------
Easy no?
I bet most of those bloggers who use the basic Blogger templates do so because they all got so frustrated of having them widgets gone every time they install new templates. Now you don't have to stick to those basic ones knowing this trick; plus you've got all the templates you ever wanted here in Ourblogtemplates.com (just kidding, or not!).
24 comments:
Hey, thanks for the advice. I'll have to try it. I lost widgets when I went from Wise-n-Wonderful's old template to the new one. I had no clue. I am still new to working with code. Most of what I learned was from doing a Myspace page! I'm getting better, though, thanks to tips like these. Thanks again :)
excellent tip!
You should have a StumbleUpon/DiggIt button so we can thumbsup your articles.
Tq abhi. The digg and stumbleupon buttons are in the AddThis Share button below. Digg away and StumbleUpon it!
The design of the templates are excellent!
Im just new to blogger. So ill have to "study" this first before applying to my blog.
But im glad i found this site! keep up the great work guys
Your article is good.. But according to your method the data within the widget will not be saved. So technically i think there is no use in copying and pasting the codes from old template to new template. Correct me if m wrong.
As long as the widget still remains on the blog, the data is there. If you keep the widget code from the old template to the new template, the data will be kept too. But if you don't copy and save the widget's code into the new template, they won't keep the data.
I tried this on one of my blogs and it moved the widgets over but not the data. I uploaded the new template and then saved it. I then came back and added the code for the widgets into the XML code for the new template and the widgets appeared without the data. What did I do wrong? Thanks for your help!
It's nice post. I have tried to this and worked as well. Please take a look my blog
Thank you! This was so much easier than the way I did it last time!
Thanks..I've learned a lot from your advice. I'll try it. I'm a newbie and wanted to learn more blogging tips. I really felt bad everythime I change my template. Thanks for the tips...
I just uploaded this to my blog.
When I tried to copy and paste my widgets into the html content I got the following error:
The widget with id HTML3 is not within a section (actual parent element is: div.) Every widget should be in a section.
I don't know what this means since I pasted the widgets within the section you state within your instructions ("b" section)
Please help!!
What's been working for me is to View Source in the browser, copy and save that.
In that HTML you will see the actual content of a widget, the links, image links etc., in case you need to re-enter that. And you probably do.
Thanks this info. Akan saya coba n hatur ThankQ'U
hi i successfully downloaded templates of newspaper III, columnus, and professional templates but something went wrong...people cannot leave comments on my blogs, i also delete the rel "nofollow" something mess up already...tried many things but didint work out, am already frustrated, please help me...here are my blogs:
http://marketing-tips-strategies.blogspot.com
http://888umi.blogspot.com
http://lets-go-green888.blogspot.com
http://investment143.blogspot.com
Please let me know if you can help me out of these...thanks a lot!
Great read and blog! I'm giving it a shot this weekend. I created a blog post pointing to this post here:
URLAGE Blog Template MAKEOVER!
http://blog.urlage.com/2009/01/urlage-blog-template-makeover.html
I'm so glad to find this article - my blog has needed a face lift forever! Thanks for sharing. I'm going to ((attempt to)) create an instructional video while doing the change over to help other blogger's. I'm be back to let you know how it goes - cheers! =)
--following
it seem easy, but the more I try the more I failed. But, I'm sure I must be success. Thanks for the advice
Hi I finally got it right. But as brad said. No data followed. I don't know what I did wrong, but I believe I did it "by the book" as written here.. I don't know. gotta keep on looking for a better way to do it...
Hi wile I am uploading the templates I am losing the navigation bar in blogger...How can I prevnt that?please help
Thanks for the template! If uploading without widgets, its great. If uploading with copied and pasted widgets it doesn't work very well; widget "gadgets" are copied (over) but they are empty/the data is missing. AND not all widgets will copy over such as "Followers" the most important one. What code/tags should come before "b:widgets" for specifically "followers?" Help. Please. (P.S. I had to "delete the brackets" from the code in my message above so that this post would be seen here.)
I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
Ruth
http://fendisite.com
This procedure not useful to new or Dummy bloggers...
By http://indiamore.com
thanks for the advice..very useful.
Please get back to me. Would seem that comments do not work? Help. www.adoredaustin.com
Post a Comment