A Flash header can be a dynamic, eye-catching addition to your blog. If you are using Blogger, the tools available to you within your layout editor may make you think that it's impossible to put a Flash header on your own site. But with a bit of tweaking, you can edit your template to support a Flash header. This type of customization should only be done by those who feel comfortable with editing HTML. You will also need somewhere to host your SWF file. Have a question? Get an answer from Online Tech Support now!
Other People Are Reading
How to Upload an SWF File to Blogger
How to Get a Blogger Header Image to Rotate Every Second
Instructions
1
Upload your Flash banner to your webhost or any hosting site of your choice. Write down or copy the full URL of the banner. You will also need to take note of the height and width of the banner (in pixels).
2
Click on the "Layout" tab within your Blogger dashboard. Click the "Page Elements" link below the tab.
Sponsored Links
HTML Editor - Download
Edit, format, validate, preview & publish HTML. Download now!
www.UltraEdit.com/HTML-Editor
3
Click "Add a Page Element." Select "HTML/Javascript" as your element type.
4
Paste the following code into the Page Element text field. Change the URL and the height/width values to match that of your header.
<embed src="http://www.yourwebsite.com/example.swf" type="application/x-shockwave-flash" height="150" width="500">
5
Click "Save Changes."
6
Enter the HTML editor for your blog's template. Delete the following code from the bottom of the template:
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
7
Find this code block within the template editor:
<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>
Directly beneath the </div> tag, add the following 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>
8
Find this code within the template editor:
/* Headings
----------------------------------------------- */
Directly above, paste in the following code:
/* ----- FLASH HEADER ----- */
#subheader-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 500px;
max-width: 500px;
min-height: 150px;
max-height: 150px;
}
Change the width and height values to match that of your header
Other People Are Reading
How to Upload an SWF File to Blogger
How to Get a Blogger Header Image to Rotate Every Second
Instructions
1
Upload your Flash banner to your webhost or any hosting site of your choice. Write down or copy the full URL of the banner. You will also need to take note of the height and width of the banner (in pixels).
2
Click on the "Layout" tab within your Blogger dashboard. Click the "Page Elements" link below the tab.
Sponsored Links
HTML Editor - Download
Edit, format, validate, preview & publish HTML. Download now!
www.UltraEdit.com/HTML-Editor
3
Click "Add a Page Element." Select "HTML/Javascript" as your element type.
4
Paste the following code into the Page Element text field. Change the URL and the height/width values to match that of your header.
<embed src="http://www.yourwebsite.com/example.swf" type="application/x-shockwave-flash" height="150" width="500">
5
Click "Save Changes."
6
Enter the HTML editor for your blog's template. Delete the following code from the bottom of the template:
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
7
Find this code block within the template editor:
<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>
Directly beneath the </div> tag, add the following 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>
8
Find this code within the template editor:
/* Headings
----------------------------------------------- */
Directly above, paste in the following code:
/* ----- FLASH HEADER ----- */
#subheader-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 500px;
max-width: 500px;
min-height: 150px;
max-height: 150px;
}
Change the width and height values to match that of your header
No comments:
Post a Comment