welshon blog elements: May 2009

Tuesday, May 5, 2009

Snow Mountain Ranch - an Alpine Valley School Weekend Family Retreat

Every year most of the families from Alpine Valley School (where the kids go to school and the DH works) go on a weekend long retreat at Snow Mountain Ranch:YMCA Camp of the Rockies up near Winter Park. We used to stay in the dorms and eat in the cafeteria. That was easy and fun. Last year we missed the mark to get into the dorms and had to rent a reunion cabin. Now that we have had that experience we will never go back to the dorms. We stayed in the Legacy Reunion cabin. It has a wonderful double kitchen with two of every appliance. Enough tables and chairs for about 40 people to sit at one time. There is a large living room with many comfie counches and chairs, a loft of the same, only a bit cozier and many bedrooms.

This year it was cold and rainy most of the time. Part of what is fun is that the kids can go and do so many things without the adults having to tag along. There is the Kiva center where you can roller skate, play ball, rock climb, etc. Next to it is the pool. There is a great craft center and an old ghost town, not to mention the outdoors full of fields, forests and places to ride a bike. If you like you can go on a horseback ride, though none of us did that this trip. The kids went out and about. The adults enjoyed each other's company. We bring food to grill, to eat and to share. And we bring games - tons of them. It started off with a few simple card games and a single box of Apples to Apples. It grew into a pile of around 15 games.

The most popular one this year was "The Werewolves of Miller's Hollow."

It was so fun that we played it five times in a row and most likely would have kept playing if it had not gotten near midnight. It is a card game with a narrator. Most of the people are villiagers. A few turn to werewolves at night. Each "night" a villiager is eaten. Each "day" a person is lynched for suspecting to be a werewolf. Various villiagers have more detailed idenities such as a witch who has the power to bring people back to life, a curious little girl who can see what is going on but cannot talk about it, and a few others. It takes at least 10 people to play. It is a lot more fun than I am making it sound.

Another one that many people played was "Ticket to Ride." I could play that one over and over. A number of people liked this card game. I don't know the name of it. It drew crowds once people understood the aim of it.

Some people elected to read, do puzzles (several of thos going) or write. A number of people in our little community are creative, thoughtful writers.

Friday and Sunday I chatted, watched and played. I was worn out from a hard day at work and was feeling a bit exhausted.

Saturday morning I felt a bit more refreshed. I had visions of making a batch of home made cinnamon rolls, the cabin filled with the sweet scent of fresh bread. When Laura and I went to the store to get what I needed we were enticed with a diversion in the form of a home decor store. That led to an Alpaca fiber farm and mill. But, that is a story for tomorrow. People were disappointed that I did not make the cinnamon rolls. I thought they would not really care. I guess we all learned a bit of a lesson from that.

Saturday evening we usually have a big fire where we sing, roast marshmallows and tell stories. The constant rain made that idea uninviting. However, Ethan was dedicated to the tradition and tried his best to make it happen. I was both proud of him and a bit sad for him as he and Kennedy tried in vain to get a fire going in the downpouring rain. I love that focus and dedication my boy has. In the end he came in and became the sherif for the werewolf game, that is until he was eaten one night. He would have loved to do the fire, but he enjoyed the game, too.

Sunday we had a lovely breakfast, hung out at the craft center and then headed down the mountain to Beau Joe's for mountain pie pizza.

Saturday, May 2, 2009

Laura's Mexican Casserole

Laura's Mexican Casserole

Preheat oven to 350 degrees. Grease a 9x13 pan.

1/2 Onion, Chopped
2 cloves Garlic, minced
1 lb. Ground Beef
Cook together in a very large pan. Drain beef fat.

16 oz. Taco Sauce
1 can Rotele Chilies, Tomatoes with Lime
10 oz. jar Green Chili
1 can Sliced Black Olives
1 can Refried Beans
1 can Black Beans, drained
Mix the taco sauce, green chilies, olives, and beans. Add to the beef mixture and heat until bubbly.

1 bag Tortilla Chips

Use 1/2 of the meat mixture to make a layer in the pan. Make a layer of chips. Top with cheese. Repeat layer, ending with cheese.

Freezes well. Bake for 45 minutes to 1 hour until heated through and brown on top.

3 cups Cheddar Cheese, shredded

Laura's Fab Pork Chop Casserole

Laura's Fab Pork Chop Casserole

Preheat the oven to 350 degrees.

1/2 Onion, cut up
1-2 lbs. Pork Chops, deboned and cut into chunks
Seasoning (Salt and Pepper or Montreal Steak Seasoning)
Saute these together. The fat in the pork shops will provide the base.

1/2 can French's Fried Onion Rings (the ones in the can)
2 cans Mushroom Soup
1 med. Sour Cream
1 bag Frozen Mixed Veggies
Mix this nicely and then add to the onion/pork chop in the big pan. Heat through until bubbly.

1 head Cauliflower, steam & chopped into bite size pieces.(You can replace this with hash browns)
Grease the bottom of a 9X13 pan and make a layer with the steamed cauliflower.

3 cups Cheddar Cheese, shredded
Place a 1 cup of the cheddar cheese on top of the califlower. Top this with half of the creamy mixture. Repeat these layers.

1/2 can French's Fried Onion Rings
Use these to top off the cheese.
Bake until it is bubbly and brown, 45 minutes. Freezes well before baking.

Friday, May 1, 2009

Adding Music

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

12. Blogger: Music

Today we are learning:

How to add a playlist to our blog.

First create your own playlist with PLAYLIST . Then click get the playlist code.

Select your preferences and click GET CODE.

CHANGE the width and height of your playlist in every spot you can see... I changed mine to WIDTH: 140 and HEIGHT: 250.

Copy the code and paste it into a HTML/javascript widget.

Watch the video:

Adding a playlist from Wilna Furstenberg on Vimeo.

If you have any questions, leave me a comment. Also link me in the comments to your new blingy blog so that I can leave YOU a comment. Again, the only condition for me to help you would be that you watched the video and followed the instructions carefully!

Show us your blog:
Visit Bling Out Your Blog 2.0 Students
Comments (1) 1 Thursday, 30 April 2009 21:07 Carolyn Ward
I already had a playlist, but thanks for pointing out the height and width stuff - I played around in the code and made it fit better and look better.
Reply
Add your comment
Comment:
PostPreview
yvComment v.1.20.0This classroom is provided by Scrap In Style TV, LLC

Adding Social Networks

Fonts and Colors

The Pixelstick

A Note with Fixes from Wilna

Sidebar Magic Button

Fancy Titles

Uploading Your Banner

Making a banner in Photoshop

Adding Your Background to Blogger

Blogger Backgrounds in Photoshop

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

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

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
http://writerjenn.blogspot.com
Comments (1) 2 Tuesday, 28 April 2009 06:20 student
read everything and could actually do it! thx Wilna, GREAT videos and instructions!!!
Reply 1 Monday, 27 April 2009 21:50 C Warnke
Great videos- very easy to follow! Thanks!
Reply
Add your comment
Comment:
PostPreview
yvComment v.1.20.0This classroom is provided by Scrap In Style TV, LLC

welshon blog elements

Tuesday, May 5, 2009

Snow Mountain Ranch - an Alpine Valley School Weekend Family Retreat

Saturday, May 2, 2009

Laura's Mexican Casserole

Laura's Fab Pork Chop Casserole

Friday, May 1, 2009

Adding Music

Adding Social Networks

Fonts and Colors

The Pixelstick

A Note with Fixes from Wilna

Sidebar Magic Button

Fancy Titles

Uploading Your Banner

Making a banner in Photoshop

Adding Your Background to Blogger

Blogger Backgrounds in Photoshop

Lesson 2 - Templates

Lesson 2 - Templates

Followers

Blog Archive

About Me