Computer Tips and Tricks | WordPress Technology Hints » Wordpress Tips » How to add your own custom Flash SWF Banner to your WordPress Blog header in 5 easy steps
How to add your own custom Flash SWF Banner to your WordPress Blog header in 5 easy steps
This post will help you create your own Flash Banner that will add style to your site 
You can see an example of my flash banner at http://www.britishblueshorthair.com
Step 1 – First you must know your template header size in order to calculate the pixel size to design your own Flash Banner. If your using a WordPress template that someone else has designed you can usual find the header size in the style.css file that’s located in the root of your theme.
Location e.g. – ftp://YOUR-DOMAIN-NAME/httpdocs/wp-content/themes/YOUR-THEME-NAME/style.css
my style.css header details are as follows
{++++}
div.art-Header
{
margin: 0 auto;
position: relative;
z-index:0;
width: 944px;
height: 185px;
Step 2 – Now you know the size of your header you can create your Images and then produce a Flash banner using – Adobe Flash, Xara Xtreme Pro 5 or any other flash application.
Step 3 – Once your flash design is complete you must upload the file to your website template image area location.
Add to – e.g. – ftp://YOUR-DOMAIN-NAME/httpdocs/wp-content/themes/YOUR-THEME-NAME/images/YOUR-BANNER.swf
Step 4 – If you don’t have a copy of the swfobject.js script already in your route of your template theme you will also need to download from - http://code.google.com/p/swfobject/
Add to – e.g. – ftp://YOUR-DOMAIN-NAME/httpdocs/wp-content/themes/YOUR-THEME-NAME/swfobject.js
Step 5 – Now you must insert the following code into your header.php under the “div” parameter as per your style.css sheet. The code is also setup to detect if the internet browser accessing your site doesn’t don’t have flash installed and will create a flash button with a link to the Adobe Flash download site.
Header.php lcoation e.g. – ftp://YOUR-DOMAIN-NAME/httpdocs/wp-content/themes/YOUR-THEME-NAME/header.php
———————-code start——————————–
“THIS IS MY DIV FROM MY style.css” <div>
“EDIT THE RED TEXT AND REPLACE WITH YOUR DETAILS”
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<script type=”text/javascript” src=”swfobject.js”></script>
<script type=”text/javascript”>
swfobject.registerObject(“Header”, “9.0.0″);
</script>
</head>
<body>
<div>
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=” YOUR-IMAGE-WIDTH ” height=” YOUR-IMAGE-HIGH “>
<param name=”movie” value=”http:// YOUR-DOMAIN-NAME /wp-content/themes/ YOU-THEME /images/ YOUR-BANNER.swf” />
<!–[if !IE]>–>
<object type=”application/x-shockwave-flash” data=”http://YOUR-DOMAIN-NAME/wp-content/themes/YOU-THEME/images/YOUR-BANNER.swf” width=”YOUR-IMAGE-WIDTH” height=”YOUR-IMAGE-HIGH“>
<!–<![endif]–>
<p>Click the logo to install Adobe Flash Player plug-in to display this website correctly.</p>
<p>Flash player is an essential plug-in tool for your web browser in order to display graphical images on most websites.</p>
<a href=”http://www.adobe.com/go/getflashplayer”>
<img src=”http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif” alt=”Get Adobe Flash player” />
</a>
<!–[if !IE]>–>
</object>
<!–<![endif]–>
</object>
</div>
</body>
<head>
———————-code end——————————–
You can see an example of my banner at http://www.britishblueshorthair.com
Filed under: Wordpress Tips · Tags: Flash Banner, Flash Header, Wordpress, wordpress flash banner, Wordpress flash image
Are you going to be making this into a plugin?
if the wife gives me some time of the DIY i may look at putting this into a simple wordpress plug-in
Thanks for this – its going in place this week.
Lovely stuff. Was great to finally find a site where it is clear and concise!
http://www.bingopokerdirectory.net
An actual working example would be much appreciated. Your example link does not show a flash banner!