Waves and Winks: Making Animated .gif Header part 2

Wednesday, November 23, 2011

Making Animated .gif Header part 2

Whew! Did you catch the first part of making an Animated .gif Header? Make sure to check it out!

Today we will be putting the animated gif into our header. This takes some manipulating the HTML. I learned this through a zillion sources online so i am sorry but i don't have any references. But there is a post to solve almost any problem you have online! Just Google it :)

First off open your blogger to the TEMPLATE setting in your Dashboard. See the "Edit HTML" button. Click this. {then click proceed and ignore the warning... they just don't want you to do cool things :) j/k they just don't want the support headache!}

Click "Ctrl + F" to find something on the page then type in header. You want to find something that says <div=id"header-wrapper>. Below that you will see it says maxwidgets'1'. Change this one to any number above 1... i made mine 10. Next see the "show addelements='no'? Change the 'no' to 'yes'. DON'T CHANGE ANYTHING BUT THE WORDS. Make sure not to erase the '' and the = or anything. This will mess you HTML totally. It's very finicky :)

See? All changed!

Now go to the "Layout" tab in your dashboard. See where your header is? See how you can now add a gadget? Click "Add Gadget" and select HTML/javascript.

Now head over to your hosting site. I use photobucket. You will have to host your animated gif because that i know of blogger won't let you put it on. Upload your picture to your account.

Then go to the picture in your album and select the HTML code by clicking on it {in photobucket}

Now bring that code past and PASTE it into your HTML box. Click SAVE. You will probably also have to delete the information in your original header box. I haven't quite figured out how to delete it entirely yet, and i actually kind of like the extra space. So maybe another day.

Then go to your blog and admire your handiwork! :) {this one was actually put on my family blog...}

**Two small HTML housekeeping things you will want to check for.

First, you will see below the highlighted 900x. Yours probably says something smaller if it's different than mine. You will need to make it 900px for your header to fit {if you made it 900 wide}