Créer votre bannière avec menu cliquable en CSS "in line"

Jeudi 17 août 2006

Créer votre bannière avec menu cliquable en CSS "in line"

Mise à jour le 24/04/2006 22:01

Cette article à pour but de vous faire créer une banière sans la moindre image, avec uniquement du CSS "in line". L'intérêt principal étant un allègement conséquent de votre blog

1 / Code source commenté

Ci dessous le code source commenté (commentaire en vert) pour votre bannière. Ne copier/coller pas ce code, à cause de son formatage il ne fonctionnera pas... Pour faire un copié/collé prenez le code du 2ème paragraphe.

HTML commenté


<DIV
style="BACKGROUND: #544745;    
       WIDTH: 100%;                         
       PADDING-TOP: 3px;
       PADDING-BOTTOM: 5px;
       LINE-HEIGHT: 1em;
       FONT-WEIGHT: bold;                    
       FONT-SIZE: 54px;                      
       FONT-FAMILY: Georgia,Times;           
       COLOR: #98c5dc"                       
onclick="top.location.href='http://url...';">

<SPAN
title="Aller à l'accueil"             
onmouseover="this.style.color='white';" 
onmouseout="this.style.color='#98c5dc';"
style="COLOR: #98c5dc;                  
       CURSOR: hand">                   
Titre du Blog                           
</SPAN>

<SPAN
style="PADDING-LEFT: 5px;
       FONT-WEIGHT: bold;          
       FONT-SIZE: 12px;            
       COLOR: #98c5dc;             
       FONT-FAMILY: geneva,arial"> 
Texte de 1ère accroche             
</SPAN>
</DIV>



<DIV
style="FONT-WEIGHT: bold;          
       FONT-SIZE: small;            
       COLOR: #544745;             
       BACKGROUND: #98c5dc; 
       WIDTH: 100%;                 
       FONT-FAMILY: system,geneva; 
       TEXT-ALIGN: center"> 
Texte de deuxième accroche...        
</DIV>

2 / Code de base à utiliser en copier/coller

Ce code est à insérer en mode HTML de préférence dans l'entête de votre blog, mais cela peut aussi être fait dans un article, un module de texte libre ou bien le pied de page de votre blog.

HTML à copier/coller

<DIV style="BACKGROUND: #544745; WIDTH: 100%; PADDING-TOP: 3px; PADDING-BOTTOM: 5px; LINE-HEIGHT: 1em; FONT-WEIGHT: bold; FONT-SIZE: 54px; FONT-FAMILY: Georgia,Times; COLOR: #98c5dc" onclick="top.location.href='http://url...';">
<SPAN title="Aller à l'accueil" onmouseover="this.style.color='white';"
onmouseout="this.style.color='#98c5dc';" style="COLOR: #98c5dc; CURSOR: hand"> Titre du Blog
</SPAN>
<SPAN style="PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #98c5dc; FONT-FAMILY: geneva,arial; VERTICAL-ALIGN: center"> Texte de 1ère accroche
</SPAN>
</DIV>
<DIV style="FONT-WEIGHT: bold; FONT-SIZE: small; COLOR: #544745; BACKGROUND: #98c5dc; WIDTH: 100%; FONT-FAMILY: system,geneva; TEXT-ALIGN: center"> Texte de deuxième accroche...
</DIV>

Avec ce code, on obtient:

Mon Blog1ère accroche

Texte de deuxième accroche...

3 / Faites travailler votre imagination, quelques exemples

Variation de couleur:

Mon Blog1ère accroche

Texte de deuxième accroche...

Texte défilant:

>Mon BlogPar moi

Texte d'accroche défilant...

Multicolor:

PêUR?

L'urgent est déjà parti, l'impossible est en train de se faire, pour les miracles nous demandons 24 heures de plus

4 / Aller plus loin: Bannière avec menu cliquable

#Mon Blog !!Par moi

Vous touverez sur ce #blog!! tout ce que j'aime...

Zoélie SuperSouris Francisek

A vous de jouer, ci-dessous le code de l'exemple avec menu cliquable, (Utilisable en copié/collé):

HTML à copier/coller

<DIV
style="FONT-WEIGHT: bold; FONT-SIZE: 54px; BACKGROUND: #39002c; PADDING-BOTTOM: 5px; WIDTH: 100%; COLOR: #decbbd; LINE-HEIGHT: 1em; PADDING-TOP: 3px; FONT-FAMILY: Georgia,Times" onclick="top.location.href='http://url...';">
<SPAN
onmouseover="this.style.color='white';" title="Aller à l'accueil" style="CURSOR: hand; COLOR: #decbbd" onmouseout="this.style.color='#decbbd';">#Mon Blog !!
</SPAN>
<SPAN
style="PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #decbbd; FONT-FAMILY: geneva,arial">Par Guillaume
</SPAN>
</DIV>
<DIV
style="FONT-WEIGHT: bold; FONT-SIZE: small; BACKGROUND: #61110a; WIDTH: 100%; COLOR: #decbbd; FONT-FAMILY: system,geneva; TEXT-ALIGN: center">
<MARQUEE>Vous touverez sur ce #blog!! tout ce que j'aime...</MARQUEE>
</DIV>

<DIV
style="FONT-WEIGHT: bold; FONT-SIZE: small; BACKGROUND: #decbbd; WIDTH: 100%; COLOR: #39002c; FONT-FAMILY: system,geneva; TEXT-ALIGN: left">

<SPAN
onmouseover="this.style.background='#61110a'; this.style.color='white'" title="vie palpitante" style="BACKGROUND: #decbbd; CURSOR: hand; COLOR: #39002c" onclick="top.location.href='http://zoelie.over-blog.com';" onmouseout="this.style.background='#decbbd'; this.style.color='#39002c'">  Zoélie  
</SPAN>

<SPAN
onmouseover="this.style.background='#61110a'; this.style.color='white'" title="Vous avez aimé les aventures loufoques de SuperSouris ?" style="BACKGROUND: #decbbd; CURSOR: hand; COLOR: #39002c" onclick="top.location.href='http://www.supersouris.net/';" onmouseout="this.style.background='#decbbd'; this.style.color='#39002c'">  SuperSouris  
</SPAN>

<SPAN
onmouseover="this.style.background='#61110a'; this.style.color='white'" title="Génie pour lui même... et pour les autres" style="BACKGROUND: #decbbd; CURSOR: hand; COLOR: #39002c" onclick="top.location.href='http://www.francisek.com/';" onmouseout="this.style.background='#decbbd'; this.style.color='#39002c'">  Francisek  
</SPAN>
</DIV>

Ils, elles utilisent cette méthode

Source Peut-être une Réponse

par LeR!G3 publié dans : Trucs de Blog
ajouter un commentaire commentaires (0) recommander

Précédent : VIXID VJX16-4 MIXEUR VIDEO Retour à l'accueil Suivant : VI VIDEO VJ URBAIN