Bonjour à toutes et tous,

Je reviens avec un article concernant les menus horizontaux et qui complète l'article paru ici.

Après avoir fait une recherche sur mon blog, j'ai trouvé des sites qui vous permettent de créer vos menus et d'ensuite les insérer sur votre blog Canalblog.  Pour rappel, n'étant pas en mode Privilège sur Overblog, je ne peux vous dire si c'est possible ou non.

Je vous donne les deux adresses

http://www.cssmenumaker.com/ (c'est celui que j'ai utilisé pour mon blog de scrap et de bannières)
http://www.mycssmenu.com/

Sur les deux sites, on vous propose quelques exemples de menus (horizontal, vertical ainsi qu'avec menu déroulant).

Sur le premier lien, on ne vous donne pas la possibilité de créer plusieurs niveaux de sous-menu mais avec une connaissance au niveau du CSS, il y a moyen de bidouiller le code reçu comme je l'ai fait pour mon blog de scrap.  Il y a également moyen de changer les couleurs des images mais une fois de plus, il faut s'y connaître en Photoshop.

Pour ce site, vous recevrez un mail avec un fichier au format ZIP (pensez à avoir un programme qui permet de dézipper le fichier comme Winrar ou encore Winzip).

Dans ce fichier, vous aurez un fichier nommé "installation_instruction" qui est à mettre dans toutes les pages. 
Vous aurez des images à insérer sur votre blog (pensez à modifier les adresses dans le fichier "installation_instruction" et dans le fichier "menu-style").  Le fichier "menu-style" est à insérer au niveau de la feuille de style général.

Pour le second site, tout se fait en ligne.  Vous modifiez les titres mis en exemple, vous pouvez les supprimer, ajouter des sous-menus...  Une fois votre hiérarchie terminée, vous cliquez sous "CSS" et le code est à insérer au niveau de la feuille de style général (vous pouvez également changer les couleurs et les adapter à votre blog).  Ensuite vous cliquez sous "HTML" et il s'agit du code à mettre au niveau des pages.

Je vous demanderai de vous référer à mon premier article pour avoir une vue avec image vu que le principe est exactement le même (http://shana0780.over-blog.com/article-inserer-un-menu-horizontal-avec-sous-menu-sous-canalblog-60425727.html).

Bonne soirée et il est encore temps de vous souhaiter une bonne année 2012.

Sonia

Bonjour à toutes et tous,

Je me rends compte au fil de mes mails que beaucoup de personnes ne savent pas comment installer une bannière en mode simple.  Chose facile que je vous montre en tuto.

Il faut tout d'abord aller sous Apparence et ensuite choisir Style.

"n'oubliez pas de cliquer sur les images pour les voir en grand"


A cet endroit, vous aurez la possibilité de télécharger votre bannière (max. 100 ko).  Il suffit d'aller sous Barre du titre du blog et de cliquer sur "Parcourir" qui se trouve à côté de Image de fond.



Et votre bannière sera installée.

Pour installer un fonds, je vous renvoie vers l'article qui se trouve ici.

Pour information, je mets gratuitement à disposition toute une série de bannières avec les fonds.  Vous les trouverez en cliquant ici.

Bonne journée,

Sonia

Bonjour à toutes et tous,

Aujourd'hui, je vais vous expliquer comment j'ai créé le menu avec sous-menu sur mon blog de scrapbooking.

Pour cette opération, il faut être en mode avancé.

Avant tout, pensez à bien garder une copie de votre feuille d'origine en faisant un copier-coller vers un Notepad.  En cas de mauvaise manipulation, il vous sera toujours possible de récupérer votre blog d'origine.

Nous allons éditer la feuille de style général et y insérer tout à la fin, le code suivant (avec en vert ce que vous pouvez changer en fonction de votre blog - couleur, police de caractère, épaisseur des bordures) :

/*--------- Menu horizontal -----------*/
/* Credits: Stu Nicholls */
/* URL: http://www.stunicholls.com/menu/skeleton/skeleton.css */

#nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 12px Arial, Helvetica, sans-serif; border:0px solid #838231; border-color:#838231; border-width:0px 0px 2px 0px; background:#fff; position:relative; z-index:200;}
#nav {height:30px; width: 898px; padding:0;}

#nav li {float:left;}
#nav li li {float:left;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}

#nav li a {display:block; float:center; color:#000; border-right:1px solid #000; border-color:#FFF; margin:0 10px 0 10px; height:30px; line-height:30px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}

#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; top:22px;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#;}

/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:0px; margin-left:100%; top:5px;}

/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:none; color:#838231;} /* Hover sur les liens */

/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#000;} /* Les liens */

#nav img {
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-width: 1px;
 border-color: transparent;

/* ================================================================
The original version  http://www.stunicholls.com/menu/skeleton.html
Copyright (c) 2005-2007 Stu Nicholls.
=================================================================== */

stuHover = function() {
    var cssRule;
    var newSelector;
    for (var i = 0; i < document.styleSheets.length; i++)
        for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
            {
            cssRule = document.styleSheets[i].rules[x];
            if (cssRule.selectorText.indexOf("LI:hover") != -1)
            {
                 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
                document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
            }
        }
    var getElm = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<getElm.length; i++) {
        getElm[i].onmouseover=function() {
            this.className+=" iehover";
        }
        getElm[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" iehover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", stuHover);

*******************************************************

Ensuite, nous allons éditer la page d'accueil (il faudra faire la même opération pour les autres pages).
Il faut trouver la balise <div id="leftbar"> (si vous avez un blog en 3 colonnes) et insérer le code suivant juste avant :

<br>
<center>
<script type="text/javascript">

stuHover = function() {
    var cssRule;
    var newSelector;
    for (var i = 0; i < document.styleSheets.length; i++)
        for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
            {
            cssRule = document.styleSheets[i].rules[x];
            if (cssRule.selectorText.indexOf("LI:hover") != -1)
            {
                 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
                document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
            }
        }
    var getElm = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<getElm.length; i++) {
        getElm[i].onmouseover=function() {
            this.className+=" iehover";
        }
        getElm[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" iehover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>

<ul id="nav">
<li><a href="#nogo">TITRE DU MENU 1<img src="URL IMAGE"></a>
<ul>
<li><a href="#nogo">SOUS TITRE DU MENU 1</a>
<ul>
 <li><a href="URL">NOM DU SITE</a></li>

<li><a href="URL">NOM DU SITE</a></li>
<li><a href="URL">NOM DU SITE</a></li>
</ul>
</li>

<li><a href="#nogo">SOUS TITRE DU MENU 1</a>
<ul>
 <li><a href="URL">NOM DU SITE</a></li>

<li><a href="URL">NOM DU SITE</a></li>
<li><a href="URL">NOM DU SITE</a></li>
</ul>
</li>

</ul>
<li><a href="#nogo">TITRE DU MENU 2<img src="URL IMAGE"></a>
<ul>
<li><a href="#nogo">SOUS TITRE DU MENU 2</a>
<ul>
 <li><a href="URL">NOM DU SITE</a></li>

<li><a href="URL">NOM DU SITE</a></li>
<li><a href="URL">NOM DU SITE</a></li>
</ul>
</li>

<li><a href="#nogo">SOUS TITRE DU MENU 2</a>
<ul>
 <li><a href="URL">NOM DU SITE</a></li>

<li><a href="URL">NOM DU SITE</a></li>
<li><a href="URL">NOM DU SITE</a></li>
</ul>
</li>

</ul>

<li><a href="#nogo">TITRE DU MENU 3<img src="URL IMAGE"></a>
<ul>
<li><a href="#nogo">SOUS TITRE DU MENU 3</a>
<ul>
 <li><a href="URL">NOM DU SITE</a></li>

<li><a href="URL">NOM DU SITE</a></li>
<li><a href="URL">NOM DU SITE</a></li>
</ul>
</li>

<li><a href="#nogo">SOUS TITRE DU MENU 3</a>
<ul>
 <li><a href="URL">NOM DU SITE</a></li>

<li><a href="URL">NOM DU SITE</a></li>
<li><a href="URL">NOM DU SITE</a></li>

</ul>
</li>
</ul>

</ul>
</center>
<br>

Vous pouvez bien sûr ajouter des menus, sous-menus et liens.

Un bloc qui correspond au menu

<li><a href="#nogo">TITRE DU MENU<img src="URL IMAGE"></a>
<ul>

Un bloc qui correspond au sous-menu

<li><a href="#nogo">SOUS TITRE DU MENU 2</a>
<ul>

Un bloc qui correspond aux liens

<li><a href="URL">NOM DU SITE</a></li>

Bonne journée,

Sonia