Setting Up A Flash Header In Blogger

For many bloggers who tried setting up their flash animation (.swf) file as their blog header, simply typing the <embed> code in the blog template just doesn't seem to work and probably there's no way for you to edit the header part of your blog in the Page Elements customization.

Now there's a simple way to have a flash header without much tweaking of your template's HTML code. Login your Blogger account and head on to Layout > Edit HTML. Before doing anything please backup your template first.

Find the following code (might look a bit different for some other templates):

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Azure Haze (Header)' type='Header'/>
</b:section>
</div>

Change the no in showaddelement='no' to yes, this enables you to add gadgets on top of your header in the Page Elements customization in the future.

*optional*Change the number in maxwidgets='1' from 1 to any number you like if you want to setup more gadgets in the header part.

Remove the code coloured red, which is the current header you're using. Save template (you might be asked to confirm your Header1 deletion, just confirm) and head on to Page Elements.

Now you should be able to see the "Add a Gadget" box on the header part, click on it and add HTML/Javascript (if you don't see it, add the gadget from your sidebar, then shift it to the header).

Type in the <embed> code which looks like this (replace http://yourhost.com/yourflash.swf with the address of your .swf file):

<embed src="http://yourhost.com/yourflash.swf" loop="false" height="240" width="1300"></embed>

Adjust the height and width number according to your flash size. The loop="false" code is to prevent your flash animation from repeating, so if you want your flash to be played repeatedly, remove that line. I'm pretty much sure you'll know how to deal with the rest of the code. Save the gadget and you're done.

If the flash is not in place, you might need to tweak the Header part of your template CSS stylesheet in Edit HTML that somewhat looks like this:

/* Header
-----------------------------------------------
*/

#header-wrapper {
float: left;
width: 1300px;
height: 240px;
margin:0;
padding:0;
clear: right;
background: no-repeat top left;
position:relative;
left:-170px;
}

Remove the border line code to hide the header borders and do some adjustments to the CSS code to position the flash the way you like. That's all. Time to PIMP your blog, people!