How To get Flash Header - My First Blogger Hack

It was hardly a week and I was getting bored of the header in blogger. It was unreal to think it is just a text or plain image ! In this age of jazzy looking headers this was pathetic !

So went out for a simple blogger hack. Here's a Tut for you.

Warning: This is long and possibly boring tutorial. You are responsible for your own action and if your blog acts funny or goes up in flames I am not responsible. Blame it on Weapons of mass Distruction. A coke could be handy during this tutorial.

Even if you are going to put a flash header you need to first upload a image header( dummy image) and choose the following settings.

Step 1



Step 2



Note: If you are uploading the image header for the first time than the "Placement" option will not be visible as soon as you upload one. Close the window and repeat step 1.

Step 3

Now comes the embedding part. Go to Template -> Edit Html

Then click on Expand Widget Templates



COPY THE WHOLE TEMPLATE TO A NOTEPAD AND SAVE IT IF THINGS GO BAD YOU CAN ALWAYS PASTE AND GO BACK T0 DEFAULT.


Now the default templates have too many waste space on either side of the bog so first you need to decrease that so that you can insert a big header.

Step 4

Under the edit template search for "#header-wrapper" (by Ctrl + F.... duh !)

This is the code which gives the header-wrapper attributes

#header-wrapper {
width:670px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Now I wanted a atleast 800 px width and I didnt like the border so I changed to

#header-wrapper {
width:800px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}


Step 5

I dont want even the the header border (by default there are 2)

So search for "#header { "

#header { margin: 5px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; }

Changed it to :-

#header { margin: 5px; border: 0px solid $bordercolor; text-align: center; color:$pagetitlecolor; }

Now check out the preview.

Step 6

Now if you need to increase the width of the blog. This is how you do it to Increase blog width :-

Search for the string "#outer-wrapper { "

#outer-wrapper { width: 760px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

I Changed it to:-

#outer-wrapper { width: 900px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }


Step 7

To decrease the width between the main blog and the sidebar

Then Search for the string "#main-wrapper { "

#main-wrapper { width: 410px; float: left;

Change it to

#main-wrapper { width: 510px; float: left;

Step 8

Press Preview to check it out. Never Press Save Template until you are absolutely sure about the changes.

If everything looks smooth like a baby's bottom then lets go to the next step !

Step 9

Now we start to embed the flash header. (Finally! The pop-corn were almost over)

You need to host the flash header, choose a flash header that lets you hotlink and gives you the full file address (eg http://somebloodyfreehost.com/crap/your-god-damn-header.swf and not http://reallystingyhosting.com/free-shit/1287192837198237jsdkajdshakd/ )

Once you you've done that, replace the the src to the file address in the following flash embedding code !

<embed bgcolor="'#FFFFFF'" height="'140'" pluginspage="'http://www.macromedia.com/go/getflashplayer'" src="'http://somesite.com/yourheader.swf'" type="'application/x-shockwave-flash'" width="'700'/"></embed>

Dont forget the /> at the end
Keep the width less than that in Step 4 and now keep the code handy (Copy to clipboard would be good)

Step 10

The moment of truth. Now its a good time to have that coke cuz don't mess up this step

Search the template for "!--Show just the image, no text-- "

here is the screenshot



Now replace the selected block of code with the flash embed code from step 9

Now press preview. If every thing is ok then click Save Template

Here is the screen shot of before and after

Before:


After:



With a flash header in blogger you can add menus, search box, mouse over effects including sound. Best of all looks non-template and alive !

Troubleshooting
Now for all those people who screwed up. Most likely you will get this message

We were unable to preview your template

Please correct the error below, and submit your template again.

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.

This will be followed by the xml error message like this

XML error message: The element type "embed" must be terminated by the matching end-tag "".

Check out what the message states and act accordingly. Most likely you might have missed a tag or deleted something.
You can always copy the original template which you had saved in Step 3 and start all over again.



Coming soon more menus and header mods

Let me know your comments ! you can also post yours in the comments !