Articles Comments

Technology Support Desk | Take Control of Technology » 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 | 2 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

VN:F [1.9.11_1134]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.11_1134]
Rating: 0 (from 0 votes)

Related posts:

  1. WordPress Easy Peasy Adsense plugin released
  2. 25% off WP-Member WordPress membership software
  3. Moving a WordPress site from one domain to another
  4. Uploading a plugin to WordPress SVN using Tortoise
  5. WordPress Logo Branding Plugin Available


Written by

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

2 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?

    VA:F [1.9.11_1134]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.11_1134]
    Rating: 0 (from 0 votes)
  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 :-)

    VA:F [1.9.11_1134]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.11_1134]
    Rating: 0 (from 0 votes)

Leave a Reply

CAPTCHA Image
*