Lesson 2 - Templates

[ Close ]You are using Internet Explorer 6. Please upgrade your browser to increase safety and your browsing experience. Choose one of the following links to download a modern browser: Firefox Safari Opera Internet Explorer
Friday, 01 May 2009 Contact UsSIStv HomeHomeUsing The ClassroomFAQHow To EnrollTeachersStudentsWelcome!Join The GroupBlogger1. Intro & Set up.2. Templates2a Template Issues3. Blogger: Backgrounds4. Adding the backround5. Making a banner6. Uploading the banner7. Fancy Titles8. The magic buttonNEW: Note From Wilna9. The pixelstick10. Fonts and Colors11. Adding social networks.12. Adding MUSIC.TypepadIntroductionDownloadsSetupDesign TabPhoto AlbumsTypelistsPostingHTMLBannersCustom PreMadeSidebar pt1Sidebar pt2PagesNavigation BarBackgroundsFaviconWordpressDownloadsSetupSettingsHTMLBannersCustom PreMadePostingWordpress: Widgets
Bling Out Your Blog 2.0

with Wilna Furstenberg and Kayla Aimee Terrell

2. Blogger: Templates
You dont HAVE to use my templates!!! : )

Choosing a template:
For this blogger class, I have custom designed 2 templates:A 2 column and a 3 column template. You can download the html code for them in the next section.

What I mean by custom designed:

* I added the code for the background. Tomorrow I will show how to make your own background in Photoshop. I have a background template that will perfectly fit these 2 custom templates.

* I made the 2 column template a little bigger so that it looks uncluttered.

* The 3 column template is based on my current blog and I am so happy with the sizes and feel of the template.

* Both templates have custom backgrounds already. You can keep it if you want. as I designed every element myself, there is no copyright.


* With blogging being such a HUGE subject, I want to stick with what I know. I can help you upload and customize these 2 options. It narrows the field for me... There's no way I can possibly know everything!


The files: This is a screenshot of how the text file looks like that you will download and install (as I explained in the video and article below)









TWO COLUMNS:
This is the 2 column template. Click here to download the 2 column HTML text file. The best way to download the file is to click the file. It will open a new dialogue box. Click save and select a place where you want to save it. This is a text edit file which open in TextEdit, Notepad or in Word. Remember that tomorrow I will show you how to make your OWN background + there will be various background designs for you to choose from and download. If you want to install the HTML code, follow the instructions carefully...(also in the next section). What's cool about the HTML text file is that I color coded the most important code that you will need to change.




























THREE COLUMNS:
This is the 3 column template. You can click and save the html text file. The best way to download the file is to click the file. It will open a new dialogue box. Click save and select a place where you want to save it.. This is a text edit file which open in TextEdit, Notepad or in Word. Remember that tomorrow I will show you how to make your OWN background + there will be various background designs for you to choose from and download. If you want to install the HTML code, follow the instructions carefully...(also in the next section). What's cool about the HTML text file is that I color coded the most important code that you will need to change.


































CHANGING your old template to a new one.



THIS article is copied from HERE. It's a brilliant brilliant article on how to change your blog template without loosing any widgets. I made a video that follows the instructions carefully.

Watch this video on how to change your blog template: Below in this post is a WRITTEN How to. I used it exactly.

password: blogger09



Adding a new template from Wilna Furstenberg on Vimeo.


This article was written to provide a step-by-step guide on how to correctly apply a new XML Blogger template to your blog. This process can be tricky depending on several factors (quality of the code in the new template, your existing widgets, etc) so you need to be careful when changing your template. Don’t worry though, just follow our step-by-step instructions below and we’ll hopefully get you through it without much pain.

Many people make the same mistake when installing a new blogger template. Most problems when installing a new template are caused by the blogger widgets (Page Elements) that you’ve spent time setting up in your previous template. Almost all Blogger templates available for download on this site are in the new Blogger xml template format so if you’ve downloaded the template from us, it’s going to be much easier to follow our instructions.

Step #1 - Backup Your Current Template

Backup your current Template just in case you make a mistake. This is very important so you can always go back (click on the screenshot to the left to see exactly how this is done). You’ll want to navigate to the “Template” => “Edit HTML” section of Blogger and then look for the “Before editing your template, you may want to save a copy of it. Download Full Template“. Click on the “Download Full Template” and save it somewhere easy to find later on your computer. We are not responsible for any mistakes you make in applying your new Blogger template. Once you have saved this .xml file onto your computer, move on to step #2.



Step #2 - Take a Screenshot of Your Page Elements
This next step isn’t necessary but I like to do it anyhow. Take a screenshot (YOU CAN USE YOUR CAMERA TOO) of your “Page Elements” page just so you know exactly what widgets (Page Elements) you had before applying the new template (an example of the exact page you should take a screenshot of is in the image to the left). If you blow away all your widgets and you don’t remember which ones you had, this screenshot will at least help you remember. If you’re unsure as to how to take a screenshot, then check out this quick tutorial (MS Windows).



Step #3 - Make a temporary placeholder for your widgets
Next, we’re going to essentially make a temporary placeholder for your widgets (Page Elements) within your current template. You should still be in the “Template” => “Edit HTML” section of Blogger so if you’re not, go back to that section.

You’re going to actually edit this template code now so pay close attention. Look for the following piece of code which is all the way at the bottom.






Now you’re going to replace that code with the following bit of code: (Look for this line in the article then you dont have to type it out... you can just copy and paste it.)






Save your template and you’ll see this message (which is a good sign):



What did we just do? We created a brand new widget (Page Element) in your current Blogger template so we can move all your widgets over to keep them safe! Next navigate over to the “Template” => “Page Elements” section of Blogger and you’ll see a blank new footer section.

Drag all your widgets (Page Elements) that were going to be deleted (we wrote them down or took a screenshot in step #3). The order doesn’t really matter as long as you’ve moved them all down into the widget (top image on left). After you’re done, it should look something like this (bottom image on left):




Now click on the “Save” button and the temporary placeholder for our widgets will be saved. We’re not done quite yet but if you’ve gotten this far already you’ve done great! The hardest part is over. Now we’re going to copy the widgets we just protected over to your new template. Hold off on that bathroom break and let’s keep going.

Next, go back to the “Template” => “Edit HTML” section of Blogger and scroll down in the template code and look for the line of code you added before:










There should now be a bunch more code in between it which will look something like this:











This is a list of all your widgets (Page Elements) that we just moved into the footer. You want to select all this code and copy it. We’re going to paste it into our new Blogger template code which will complete the transfer safely.

Now open your new Blogger template xml file in a text editor (you can use Notepad/ Text Edit, just right click -> Open With -> Choose Notepad). Once you have it open, scroll all the way down to the bottom of the code and look for the following code:






You’re going to replace this code with the new code you just copied above. Make sure you only replace that one bit of code otherwise you might run into some problems. Save your new Blogger template and you’ve finished transferring your widgets (Page Elements) into the new Blogger template!

Now after all that work just to save your precious widgets, let’s hope the new template works ok in Blogger. Go back to step #3 above and upload your new template like you attempted to do before. If all goes well, your new template will properly save and your blog will be updated!

Step #4 - Move Your Widgets Back To Their Original Spots
I’m assuming your new template installed without and problems and you’re ready to move your widgets (Page Elements) back to their original spots. This is just the reverse process of what we did before by going to the “Template” => “Page Elements” section of Blogger and moving them out of the footer and back into the sidebar (or wherever you originally had them in your old template).

After you arrange them to your liking, make sure to save and view your blog. If all went well then your blog should be looking the way it did before the new template was applied (well, except for the new beautiful design which is the main reason for this hassle in the first place right?).

Summary
Congratulations on adding a new custom Blogger xml template to your blog! The whole process should have taken anywhere from 15 minutes to 1 hour depending on your experience and comfort with blog template code, the code quality of the new template, and the number of widgets your blog currently has. Blog designs shouldn’t have to change very often so hopefully this is a one-time process for you. If not, I recommend you bookmark or add this page to your favorites so it’s easy to find the next time you decide to change Blogger templates.

A few things to remember when you change your template: (As discussed in the template video)

Take some screenshots of your current blog. That way you can always re-create a look or list you loved.
Download your current template.
DON'T BE AFRAID to change your template.You will NOT loose your blog post content.
With the place holder method you SHOULD NOT loose any widgets... if you do... DON'T WORRY! It's easy to re-create and fun to give your blog a spring clean. I do this at least once a year!
If you want to change your templates today so that we can start blinging them tomorrow, it will be cool. If you have any problems, leave me a comment and I will help you!

The only condition for me to HELP is that you SHOULD HAVE watched ALL the videos and read all the instructions!








Show us your blog:
Visit Bling Out Your Blog 2.0 Students
Edited to add:



IF YOU HAVE ISSUES WITH UPLOADING THE TEMPLATE... CLICK LESSON 2A: TEMPLATE ISSUES. I EXPLAINED A FEW THINGS THERE THAT WILL HELP YOU A LOT


Template Issues:

[ Close ]You are using Internet Explorer 6. Please upgrade your browser to increase safety and your browsing experience. Choose one of the following links to download a modern browser: Firefox Safari Opera Internet Explorer
Friday, 01 May 2009 Contact UsSIStv HomeHomeUsing The ClassroomFAQHow To EnrollTeachersStudentsWelcome!Join The GroupBlogger1. Intro & Set up.2. Templates2a Template Issues3. Blogger: Backgrounds4. Adding the backround5. Making a banner6. Uploading the banner7. Fancy Titles8. The magic buttonNEW: Note From Wilna9. The pixelstick10. Fonts and Colors11. Adding social networks.12. Adding MUSIC.TypepadIntroductionDownloadsSetupDesign TabPhoto AlbumsTypelistsPostingHTMLBannersCustom PreMadeSidebar pt1Sidebar pt2PagesNavigation BarBackgroundsFaviconWordpressDownloadsSetupSettingsHTMLBannersCustom PreMadePostingWordpress: Widgets
Bling Out Your Blog 2.0

with Wilna Furstenberg and Kayla Aimee Terrell

Template issues.


Template ISSUES!
Hey girls! Thanks for all the comments and questions! A few have been having some template issues and I thought to quickly do a post about it and provide some screen shots to fix it.

But first: some dont's

DO NOT:
DO NOT Use the temporary placeholder for your widgets if you have a new blog or only a few widgets... it's for those people like me with LOTS of baggage!!!!!! It will be just too frustrating for you.
DO NOT Use the temporary placeholder for YOUR PROFILE, ARCHIVE, FOLLOWERS or any other widgets that you can just add again with blogger.




1. After you have placed your widgets in a temporary place, it will look like this on your page elements page. PLEASE NOTE: you can see that there is a PROFILE, ARCHIVE, FOLLOWERS widget in there that should not have been dragged there!




BACK UP THE OLD TEMPLATE.... you can select all the HMTL code and copy and paste it into word,







2. Now go to the HTML code and copy ONLY the code that pertains to the widgets.



3. Open your TEXT file with the new template code and look for this piece of code that's highlighted in the picture above.





4. RIGHT underneath it, paste the widget code you just copied.





5. Click preview template. If you get a error code like this one: where there is more than one widget with the same ID, look for the widget with that ID and just give it another number. For instance in this case there was more than one widget eith the name IMAGE 1. so i looked for image 1 and changed the 1 to a 3. (big arrow)



Click SAVE template. This warning will come up, but click CONFIRM and SAVE.



If you have any issues, please leave me a comment in this lesson. If it worked for you, let me know as well.







Comments (6) 6 Thursday, 30 April 2009 11:23 Caro
Hi Wilna,

the quintessential Baobab tree, in it's two seasons, is PERFECT!!!

I am just waiting for PSE to d-o-w-n-l-o-a-d so I can grow them on my blog. THANKS so much.
Caro
Reply 5 Thursday, 30 April 2009 00:52 jessica lubyk
It is all looking good so far, except that the text size is quite small on my blog and I don't seem able to go in and change it via the settings. P.s I am finding this class really fun.....ty :)

Jessie
Comments (1) 4 Wednesday, 29 April 2009 22:11 Charlene Cundy
My template dosen;t fit on my blog right. I added the code and the right column is better but the trees arent on the page lol!!
Reply 3 Wednesday, 29 April 2009 20:46 Claudia Gibson
Thanks Wilna but I got that figured out. Now I'm working on the next part.
Comments (1) 2 Wednesday, 29 April 2009 15:05 student
i battled with these issues, but by fiddling around, i managed to fix them. fortunately, there is always the backed-up template, so if there is a problem, you can start over.

i found that you have to drag the widgets right to the bottom, to the lowest open space, below the block that says 'add a gadget'. then the lines of code are also at the bottom of the template.

thanks, i had fun learning this!
Comments (1) 1 Wednesday, 29 April 2009 14:51 Claudia Gibson
I'm not sure what I did but my comments are showing up in the first column clear down at the bottom as well as the middle column. I think it is in the html code but I didn't change anything that I know of. My blog is at http://myplayart.blogspot.com/
Comments (1)
Add your comment
Comment:
PostPreview
yvComment v.1.20.0This classroom is provided by Scrap In Style TV, LLC



If you want to change the margin of RIGHT sidebar of the 3 column template I gave you to download... insert this code: margin:.25em -10px .5em; Under #rightsidebar-wrapper {
float: right; found under the part:

/* Outer-Wrapper
----------------------------------------------- */

Before you save your blog, click PREVIEW. If you are happy save the template.






Comments (14) 14 Wednesday, 29 April 2009 14:53 Maureen Rogers
Wilna,
I think maybe with my limited computer skills that the two column template would be easier for me. I have looked at the teacher info and couldn't see an email - where could I find it?
Comments (1) 13 Wednesday, 29 April 2009 14:18 Maureen Rogers
I made it further this time, but when I tried to upload the new template I got the error messaage: could not be parsed as it is not well formed. Please make sure all XML elements are closed properly. XML error message: content is not allowed in prolog.
Comments (1) 12 Wednesday, 29 April 2009 13:14 Maureen Rogers
Hi,
I'm having trouble loading the new template. I got as far as as getting the list of widgets into my old template, but when I open your 2 column template to trasfer them, there is no matching line you mentioned at the bottom. Did I do something wrong when I downloaded the template?
Comments (1) 11 Wednesday, 29 April 2009 02:24 Jeanet Kuiper
Hi Wilna,
I have the same problem as Lisa Bakewell,my template cannot be saved;Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Content is not allowed in prolog
Comments (1) 10 Tuesday, 28 April 2009 22:18 Donna Nelson
The videos were great..thanks. My blog is very bare in regards to posting. I was able to load the 3 column, move gadgets, etc. I'm just not sure it looks like it is suppose to. The trees look cut off and the graphics (squares) at the top are missing. Does this look right to you? At least I understand what to do....just not sure if something is wrong.

luluandbob.blogspot.com

Again, thanks for the videos.....you are GREAT!

Donna
Comments (1) 9 Tuesday, 28 April 2009 20:51 Sarah Cochran
I watched the video and did step by step what you did. Except I omitted the saving your widgets stuff because my blog doesn't yet have any widgets. I did end up updating my template to the 3 column one, however there is nothing on either side of the outside columns. Just white space. I read in a column above that these files were made in Elements and they are Photoshop files and wont open in any other program. I don't have Elements and I've already done the free trial and can't do it again. Is this my problem or have I done something else wrong?
Reply 8 Tuesday, 28 April 2009 18:36 student
I can't get the template to download. When I tell it to open with Word it tells me that I have a dialog box open that I need to close, and I don't think I do. It shows me the install list in a small box but I can't get it to download. I don't have photoshop so I won't be able to make my own. Any ideas?

Thanks,
Missy
Comments (1) 7 Tuesday, 28 April 2009 16:12 student
OOps--I posted a comment/question elsewhere...sorry about that.

I have an existing blog but have decided to completely start fro scratch with this class (just seemed like fun...ha, ha). Anyway, I copied your three column template and everything came through ok..however I noticed there is no header in the template. Will we be covering headers later on in the class?

Shona
Comments (1) 6 Tuesday, 28 April 2009 15:53 Lisa Bakewell
Wilna,
I'm getting this error message when trying to upload new template. Just sent you email too! Please help?! thanks

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Content is not allowed in prolog.
Comments (1) 5 Tuesday, 28 April 2009 13:43 Shep9
Mine was not so successful. I worked on it for an hour and keep getting this message.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "body" must be terminated by the matching end-tag "".
I tried taking my widgets out all together and no go. HELP! I did it step by step with the video.
Comments (1) 4 Tuesday, 28 April 2009 11:42 Jennifer Bertman
Hooray! Thank you, that worked.

Jenn Bertman
http://writerjenn.blogspot.com
Reply 3 Tuesday, 28 April 2009 11:07 Jennifer Bertman
Hi Wilna,

Thanks for your great instruction. This seemed easy enough to follow, but I've run into a problem. I watched the video and then followed all the steps but after I copy and pasted the code for the 3-column template into my edit html box (after saving my widget info as you outlined in the video), I press "save template" and I get the following response: "We were unable to save your template. More than one widget was found with id: Image1. Widget IDs should be unique."

So I looked through the list of widget code at the end of the new template to see if there were two labeled Image1. There's only one, so then I tried deleting the code for that widget but I got the same "unable to save" response but this time it says there are duplicate widgets labeled BlogArchive1.

Any idea what I'm doing wrong or how to fix this? Thank you in advance for your help.

Jenn Bertman