• Catégorie1
  • Lien 1 de la catégorie 1
  • Lien 2 de la catégorie 1
  • Lien 3 de la catégorie 1

• Catégorie2
  • Lien 1 de la catégorie 2
  • Lien 2 de la catégorie 2
  • Lien 3 de la catégorie 2

• Catégorie3
  • Lien 1 de la catégorie 3
  • Lien 2 de la catégorie 3
  • Lien 3 de la catégorie 3

• Catégorie4
  • Lien 1 de la catégorie 4
  • Lien 2 de la catégorie 4
  • Lien 3 de la catégorie 4

Alors voici un code un peu long, mais simple d'utilisation et facilement modifiable à placer dans son entête en mode html. Pour celà il faut aller dans son administartion de blog comme pour insérer une bannière , mais choisir les options suivantes :



Tout ce qui est en orange est à personnaliser (voir explications en bas)


<ul id="menuDeroulant1">
<li><a href="http://liencategorie1.html">Catégorie1</a>
<ul class="sousMenu1">
<li><a href="http://liensousmenu1-cat1.html">Lien 1 de la catégorie 1</a> </li>
<li><a href="http://liensousmenu2-cat1.html">Lien 2 de la catégorie 1</a> </li>
<li><a href="http://liensousmenu3-cat1.html">Lien 3 de la catégorie 1</a> </li>
</ul>
</li>
</ul>
<br /><br />
<ul id="menuDeroulant2">
<li><a href="http://liencategorie2.html">Catégorie2</a>
<ul class="sousMenu2">
<li><a href="http://liensousmenu1-cat2.html">Lien 1 de la catégorie 2</a> </li>
<li><a href="http://liensousmenu2-cat2.html">Lien 2 de la catégorie 2</a> </li>
<li><a href="http://liensousmenu3-cat2.html">Lien 3 de la catégorie 2</a> </li>
</ul>
</li>
</ul>
<br /><br />
<ul id="menuDeroulant3">
<li><a href="http://liencategorie3.html">Catégorie3</a>
<ul class="sousMenu3">
<li><a href="http://liensousmenu1-cat3.html">Lien 1 de la catégorie 3</a> </li>
<li><a href="http://liensousmenu2-cat3.html">Lien 2 de la catégorie 3</a> </li>
<li><a href="http://liensousmenu3-cat3.html">Lien 3 de la catégorie 3</a> </li>
</ul>
</li>
</ul>
<br /><br />
<ul id="menuDeroulant4">
<li><a href="http://liencategorie4.html">Catégorie4</a>
<ul class="sousMenu4">
<li><a href="http://liensousmenu1-cat4.html">Lien 1 de la catégorie 4</a> </li>
<li><a href="http://liensousmenu2-cat4.html">Lien 2 de la catégorie 4</a> </li>
<li><a href="http://liensousmenu3-cat4.html">Lien 3 de la catégorie 4</a> </li>
</ul>
</li>
</ul>







<style type="text/css"><!--
#menuDeroulant1{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 li{ float: left; margin: 0px; padding: 0; border: 0;}

#menuDeroulant1 li:hover > .sousMenu1 { display: block; }

#menuDeroulant1 .sousMenu1{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant1 .sousMenu1{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 .sousMenu1 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

#menuDeroulant1{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; position: absolute; top: 100; z-index:1000;}

#menuDeroulant1 li a:link, #menuDeroulant1 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant1 li a:hover { background-color: #99CCFF; }
#menuDeroulant1 li a:active { background-color: #FF3300; }
#menuDeroulant1 .sousMenu1 li a:link,#menuDeroulant1 .sousMenu1 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant1 .sousMenu1 li a:hover{ background-image: none; background-color: #FF3300;}
--></style>



<style type="text/css"><!--
#menuDeroulant2{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant2 li{ float: left; margin: 0; padding: 0; border: 0;}

#menuDeroulant2 li:hover > .sousMenu2 { display: block; }

#menuDeroulant2 .sousMenu2{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant2 .sousMenu2{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant2 .sousMenu2 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant2 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

#menuDeroulant2{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;position: absolute; top: 100;z-index:999;}

#menuDeroulant2 li a:link, #menuDeroulant2 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant2 li a:hover { background-color: #99CCFF; }
#menuDeroulant2 li a:active { background-color: #FF3300; }
#menuDeroulant2 .sousMenu2 li a:link,#menuDeroulant2 .sousMenu2 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant2 .sousMenu2 li a:hover{ background-image: none; background-color: #FF3300;}
--></style>



<style type="text/css"><!--
#menuDeroulant3{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;position: absolute; top: 100;z-index:998;}

#menuDeroulant3 li{ float: left; margin: 0px; padding: 0; border: 0;}

#menuDeroulant3 li:hover > .sousMenu3 { display: block; }

#menuDeroulant3 .sousMenu3{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant3 .sousMenu3{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant3 .sousMenu3 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant3 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

#menuDeroulant3{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; }

#menuDeroulant3 li a:link, #menuDeroulant3 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant3 li a:hover { background-color: #99CCFF; }
#menuDeroulant3 li a:active { background-color: #FF3300; }
#menuDeroulant3 .sousMenu3 li a:link,#menuDeroulant3 .sousMenu3 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant3 .sousMenu3 li a:hover{ background-image: none; background-color: #FF3300;}
--></style>



<style type="text/css"><!--
#menuDeroulant4{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant4 li{ float: left; margin: 0px; padding: 0; border: 0;}

#menuDeroulant4 li:hover > .sousMenu4 { display: block; }

#menuDeroulant4 .sousMenu4{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant4 .sousMenu4{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant4 .sousMenu4 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant4 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

#menuDeroulant4{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; position: absolute; top: 100;z-index:997;}

#menuDeroulant4 li a:link, #menuDeroulant4 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant4 li a:hover { background-color: #99CCFF; }
#menuDeroulant4 li a:active { background-color: #FF3300; }
#menuDeroulant4 .sousMenu4 li a:link,#menuDeroulant1 .sousMenu4 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant4 .sousMenu4 li a:hover{ background-image: none; background-color: #FF3300;}
--></style>


Première partie du code :
Il suffit de remplacer les noms des catégories (le titre des cases du menu sans dérouler), ensuite de modifier le titre des liens de la catégorie (ce qui s'affiche en se déroulant lors du passage sur le titre de la catégorie) puis de modifier les liens correspondants.

La dernière partie du code se compose de 4 paragraphes c'est pour la personnalisation, il faut alors modifier les couleurs, les dimensions pour que ça s'adapte harmonieusement à votre blog. Et ce pour chaque paragraphe, soit 4 fois.
Tout d'abord les dimensions. Ici la case de menu sera de 200px de large à vous de mettre ce qui vous convient. 11px c'est la taille de la police.
Premiere ligne : FFFFFF c'est blanc et c'est la couleur du texte - 3B4E77 c'est bleur et c'est la couleur de fond des catégories sans survol de la souris - FFFFFF c'est blanc et c'est le petit trait horizontal qui sépare les catégories.
Deuxième ligne : 99CCFF c'est bleu clair et c'est la couleur de fond de la catégorie au survol de la souris.
Troisième ligne : FF3300 c'est orange et c'est la couleur de fond lorsqu'un lien du menu est cliqué.
Quatrième ligne: FFFFFF c'est blanc et c'est la couleur du texte des sous-menus - CCCCCC c'est gris et c'est la couleur de fond des sous-menus lorsqu'ils se déroulent et qu'ils ne sont pas survolés par la souris.
Cinquième ligne : FF3300 c'est orange et c'est la couleur des sous-menus lorsqu'ils sont survolé par la souris.


Il est aussi possible de modifier ce menu dans le blog ou la page avec la même précision que le code pour le menu horizontal : Menu déroulant en css et html (2)

Pour plus de facilité, vous pouvez télécharger le code en fichier zip ici.

J'ai déjà suffisamment râler pour montrer mon mécontentement envers les albums photos d'over-blog, je vous propose aujourd'hui une nouvelle façon de vous en débarasser sans pour autant "forcer" vos visiteurs à consulter une page extérieure à votre blog.
Voici picasaweb : simple et efficace, il suffit juste d'avoir un compte google (gmail, igoogle...) ou d'en créer un ici : http://picasaweb.google.com

Ensuite, il faut juste se laisser guider par l'interface.


Cliquez sur "Transférer" et une nouvelle fenêtre va s'ouvrir :


Créez un album photo...

Remplissez les champs que vous souhaitez pour votre album photo et cliquez sur "continuer"

Cliquez sur "ajouter des photos" et votre navigateur va ouvrir une nouvelle fenêtre, parcourez votre disque dur et sélectionnez toutes les images de votre choix (pour pouvoir en sélectionner plusieurs à la fois, maintenez appuyée la touche Ctrl)

Lorsque toutes les photos sont choisies, cliquez sur "transférer" et vous allez constater le transfert de vos photos (c'est assez rapide selon votre connexion).


Allez dans la marge de droite de picasa web et trouvez ces indications :

Vous pouvez voir qu'il y a plusieurs liens : un lien direct vers votre album, mais donc extérieur à votre blog, un lien RSS et l'option "insérer un diaporama dans une page Web". Cliquez dessus.

Choisissez la taille de votre diaporama grace au menu défilant, si vous souhaitez voir les légendes, une lecture automatique...
Copiez le code !

Le code ressemble à ça :
<embed type="application/x-shockwave-flash" src="http://picasaweb.google.com/s/c/bin/slideshow.swf" width="600" height="400" flashvars="host=picasaweb.google.com&noautoplay=1&hl=fr&feat=flashalbum&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fcphoto.graph%2Falbumid%2F5376888548470605473%3Falt%3Drss%26kind%3Dphoto%26hl%3Dfr" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

Il est possible ed personnaliser la couleur d'arrière plan de votre album photo en modifiant ce qui est en orange dans le code (000000), il suffit juste de le remplacer par le code hexadecimal de votre choix : grace à l'article au sujet de la couleur

Ensuite, il n'y a plus qu'à insérer le code dans votre article, module ou page de blog :


Et voilà le résultat :

Une animation flash, qu'est ce que c'est ?
C'est une animation interactive ou non, généralement animée, sonore ou non...
Voici un exemple :