How to Create a Flash Header in Blogger
I've been experimenting a bit with the templates in Blogger. First, I built Whinsey a barn, then I built a wrap around crazy figure on my blog, and now I've figured how to add a Flash header to Blogger. (Post script: I've now added animation to my blog header. Be sure you see the feet too.)
Before you go too wild note that too much movement will drive readers nuts. However, the flip side is you can make your flash as interactive as you like. I managed to even include buttons within the Flash at this blog I set up for Walkup Border Collies. (In this case be sure the getURL code on the buttons specifies opening a new window.)
You will need to upload your flash animation, the swf file, to some server. I assume you know how to do that or you wouldn't be messing with this stuff.
Create a new blog for testing purposes. Mine is named http://flash-header.blogspot.com/
Choose a template: take Minima white to match what I'm going to do. It's nice and simple.
Let's decide, for ease of use, that the Flash animation will be 600 x 200 pixels.
When you mess around with templates you have to be very careful with your pixels or the thing will look totally screwy. I think this template allows you to make it as big as 660 but I'm sticking with 600 here.
And let's pretend you've already made your animation. I actually made mine about seven years ago-- the one I'll use in this demonstration... I'll try to add some code so that clicking on it will make everything stop... or maybe I won't. that code is so old I forget how to rewrite it!
Okay, so you have your new tester blog, and you might as well type a first post to get things rolling. Then click on template, and go to Page Elements.
Choose add a page element, and the type is html/Javascript.
The code you'll paste in is this:
<embed src="http://www.funonmars.com/movtown.swf" type="application/x-shockwave-flash" height="200" width="600">
but of course it will be your own file on your own server. If you just want to test this out with my file that's fine.
If you save your blog now and look at it, it will look screwy, with a big flash file extending to the right. Don't worry. You need to move this flash so it's at the top.
Now you're going into the html code. Near the very bottom find this code:
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
Remove it.
Find the code that looks like this:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Create a Flash header in Blogger (Header)' type='Header'/>
</b:section>
</div>
Right below that add this code:
<div id='subheader-wrapper'>
<b:section class='subheader' id='subheader' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>
Okay, not done yet.
Up near the top of the template find this code:
/* Headings
----------------------------------------------- */
Just above it, paste this:
/* ----- FLASH HEADER ----- */
#subheader-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 600px;
max-width: 600px;
min-height: 200px;
max-height: 200px;
}
Test it- getting closer, right?
Want to get rid of the border and shrink the top part? yeah! If you're chicken,
Take this code near top:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
make it this:
#header-wrapper {
width:600px;
margin:0 auto 10px;
}
and take this code:
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
and make it this:
#header {
margin: 0px;
}
or get drastic and remove all this code:
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-left: auto;
margin-right: auto;
}
and then go into the header and switch out a 600 x 10px jpg that's white for the title. I found if I put an image smaller than 10 px that sometimes Blogger got angry and wouldn't go farther. There's an option to subsitute image for title and description. Now it's possible you don't even want to lose your title and description, but I like the look.
If you've done all this it should look sort of like my page here:
There's lots more you can do if you're willing to explore templates, make it wider, take it right to the top, etc. but I just wanted to show you the basics that require little html editing for the code timid.
In my example at the top I use a png file for the title and a big flash piece for the fishbowl.
If you then want to put your flash file in your actual blog, be sure you save the template first. Also if you have a number of widgets added, you may want to copy out the code from them and save in case you make any big old mistaka.
One other thing I remembered. As you add widgets to a blog they get id names. The first html widget will be HTML1, which is how all this code is set up. If you try to get this going on a blog that already has a bunch of widgets, you may need to rename somebody, because you're not allowed to have two widgets with the same name.
One thing I've noticed that I still have to solve. The Flash seems to carry about 3 pixels of background between it and the body of the blog. Of course this is driving me nuts on my own blog, but you may not have even noticed it. If you look above you can see a thin white line. Of course I'm fussing over this trying to get it right.
We only watched them one a day, and I was often crying from laughing so hard. Charlie Chaplin is such an icon and costume figure, that I had forgotten how incredibly funny and talented he was. These were the last shorts before he got into features and are considered his best. There's an informality and intimacy to them that's amazing. Sometimes he looks right into the camera and you feel as if he's flirting with you.