03-02-2009

METTRE UNE BANNIERE FLASH SUR CANABLOG

Vous n'avez peut être pas remarqué, mais ma bannière est une bannière Flash...elle apparait, disparait, des fleurs tombent du ciel ou tremblent...enfin, il se passe des choses quoi...

Je prépare un tuto pour réaliser ce genre de bannière, mais il sera publié sur mon autre blog Demolitetuto.fr, alors allez-y de temps en temps ou bien inscrivez-vous à ma Newsletter pour ne rien rater.

Une fois votre bannière réalisée, importez-là dans un message en passant par Importation d'un fichier, pour récupérer son adresse, ça ressemble à ça :

http://p0.storage.canalblog.com/01234567890.swf

Pour afficher la bannière flash vous devez ensuite insérer votre adresse.swf deux fois dans le code suivant :

<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
WIDTH="978" HEIGHT="358" align=right
CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=5,0,0,0">
<PARAM NAME="MOVIE" VALUE="http://storage.canalblog.com/adresse bannière.swf">
<PARAM NAME="PLAY" VALUE="true">
<PARAM NAME="LOOP" VALUE="true">
<PARAM NAME="WMODE" VALUE="Transparent">
<PARAM NAME="QUALITY" VALUE="high">
<EMBED SRC="http://storage.canalblog.com/adresse bannière.swf" WIDTH="978" HEIGHT="358"PLAY="true" LOOP="true" WMODE="Transparent" QUALITY="high"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>

Et changer les valeurs WIDTH="978" HEIGHT="358" en mettant les dimensions de votre bannière.

Maintenant que vous avez votre code, il faut ajouter un bloc à votre feuille de style, en remplaçant les valeurs par les dimensions de votre bannière :

#header {
position:relative;
width:978px;
height:358px;

}

Vous devez supprimer les blocs suivants qui permettaient de gérer l'affichage de votre ancienne bannière (faites une copie de votre feuille de style avant de supprimer quoi que ce soit) :

#topbar-logo {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-width: 1px;
    border-color: #;
    background: url("http://storage.canalblog.com/ancienne bannière.jpg") no-repeat 0% 0%;
    height: 300px;
    display: block;
}
div .logolink a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 300px;
}

Ouvrez maintenant votre Page d'accueil, descendez sur la ligne <body> et placez la balise <div id="header"> </div> comme indiqué sur la capture :

Sans_titre_1

Dans cet exemple j'ai du mettre la balise </div> après la balise <div id="topbar-logo"> pour permettre l'affichage de mon menu au dessus de ma bannière, si vous n'avez pas de menu comme le mien, vous pouvez mettre la balise </div> juste après </OBJECT>.

Pensez toujours à visualiser avant de valider les modifications.

Vous devez bien sur insérer ce code dans toutes vos pages pour que votre bannière s'affiche aussi sur les autres pages.

Posté par Demolite - Permalien [#]
Tags : ,