Articles Comments

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



February 12th, 2010 | 4 Comments

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

Related posts:

  1. PHPBB Forum – How to add AdSense sky scraper banner ads to either side of your forum
  2. Moving a WordPress site from one domain to another
  3. 25% off WordPress Hosting
  4. 25% off WP-Member WordPress membership software
  5. WordPress landing page template 12 for 10 offer

Written by craig prunty

Filed under: Wordpress Tips · Tags: , , , ,


4 Responses to "How to add your own custom Flash SWF Banner to your WordPress Blog header in 5 easy steps"

  1. Martin says:
    February 12, 2010 at 1:39 pm

    Are you going to be making this into a plugin?

  2. craig prunty says:
    February 12, 2010 at 1:50 pm

    if the wife gives me some time of the DIY i may look at putting this into a simple wordpress plug-in :-)

  3. Stan Smith says:
    May 17, 2010 at 2:22 pm

    Thanks for this – its going in place this week.

  4. Mr Swoft says:
    May 19, 2010 at 2:14 pm

    Lovely stuff. Was great to finally find a site where it is clear and concise!

    http://www.bingopokerdirectory.net

Leave a Reply