Les Nouvelles Ficelles d'Anna K.: menu

Affichage des articles dont le libellé est menu. Afficher tous les articles

3 sept. 2010

(Blogger) Créer un fil d'Ariane

Publié par Annak Libellés : (Blogger) Suggestions de publication et de navigation, Blogger, menu

Le fil d'Ariane représente l'arborescence du blog. Il se place en haut de la colonne article et décrit le chemin qui mène à cet article : Accueil > libellés de l'article > nom de l'article.

J'ai trouvé la solution chez AideBlog et j'ai ensuite personnalisé les codes.

Ceux-ci s'installent dans le CSS : allez dans Présentation > Modifier le code HTML

1/ Recherchez ]]></b:skin>, en faisant Edition > Rechercher et collez juste avant :

.breadcrumbs{padding:5px;margin:0;margin-bottom:10px;font-size:85%;line-height:1.4em;background-color:#f5f5fdc;}

Il s'agit de la mise en forme de la ligne. Vous pouvez personnaliser :

la police : couleur, font, taille ...
le fond : background
les bordures : border
etc

2/ Ensuite, vous installez le code en lui-même. Recherchez <div class='post hentry'> et collez juste après :

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Accueil</a> »
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>, </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>

J'ai supprimé la mention Browser et francisé Home/Accueil

26 août 2010

(OverBlog) Modifier le menu OB

Publié par Annak Libellés : (OverBlog) Modifications de design, (OverBlog) Suggestions de publication et de navigation, menu, OverBlog

Le menu horizontal proposé par OverBlog est placé en début de colonne articles. Il est accessible par Configurer

Pour afficher ce menu sur une ligne, vous cliquez sur le petit marteau à droite du pavé "Menu personnalisé", vous complétez le tableau : nom et adresse du lien dans la limite de 6 liens

Nous allons en modifier le design : police, background et encadrements.

Vous devez vous rendre dans votre (ou vos) CSS : Design > Mode CSS
Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

MODIFICATION DES POLICES

Les liens

#menuob a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Les liens au survol

#menuob a:hover {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que

text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police

font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police

MODIFICATION DES FONDS

Un fond dans chaque lien

#menuob a {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Un fond dans chaque lien au survol

#menuob a:hover {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Un fond dans le module en entier

#menuob {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Vous effacez ce qui ne vous convient pas, sachant que

background-color : red met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas

Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

Pour encadrer les liens

#menuob a {border:solid 1px #D8D7D7}

Pour encadrer les liens au survol

#menuob a:hover {border:solid 1px #D8D7D7}

Pour encadrer le menu en entier

#menuob {border:solid 1px #D8D7D7}

Pour en savoir plus sur les bordures : créer vos encadrements

Si vous avez envie d'un menu plus évolué, pensez à regarder les articles de cette catégorie

9 août 2010

Créer un tagcloud

Publié par Annak Libellés : (Tous les blogs) Astuces de navigation, menu, tagcloud, Tous les Blogs

Un tagcloud est un nuage de mots-clés. Selon l'importance du mot-clé sur votre blog, la taille de la police de celui-ci variera. Sous chaque mot-clé, un lien renvoie vers l'article concerné.
C'est un très bon outil complémentaire de navigation et si vous soignez son design, il peut être décoratif.

Plusieurs possibilités :

TagCloudGenerator vous propose de générer un nuage de tags en quelques clics.

Vous saisissez l'adresse du blog, définissez son design et cliquez sur générer.

Vous obtenez un code HTML contenant du javascript que vous collez en ... HTML

Créer un menu vertical défilant orienteur

Publié par Annak Libellés : (Tous les blogs) Astuces de navigation, défilement, menu, Tous les Blogs

Ce menu a la spécificité de s'arrêter au survol de la souris et est assez simple à réaliser.

Nous allons utiliser les balises marquee pour la réaliser.

Vous collez en HTML

<marquee behavior="scroll" direction="up" height="100"width="400"
scrollamount="1" scrolldelay="1" onmouseover="this.stop()"onmouseout="this.start()">
<p>
<a href="Adresse">Nom du lien</a>
<a href="Adresse">Nom du lien</a>
<a href="Adresse">Nom du lien</a>
<a href="Adresse">Nom du lien</a>
<a href="Adresse">Nom du lien</a>
<a href="Adresse">Nom du lien</a>
<a href="Adresse">Nom du lien</a>
</p>
</marquee>

Vous pouvez modifier

la hauteur : height="100"
la largeur : width="400"
et personnaliser les liens : <a href="Adresse">Nom du lien</a>

Ensuite, vous rajoutez ou supprimez les lignes selon vos besoins.

Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien
Nom du lien

Créer un menu dans le clic droit de la souris

Publié par Annak Libellés : (Tous les blogs) Astuces de navigation, clic droit, menu, Tous les Blogs

Normalement, si vous faîtes Clic droit de la souris sur votre blog, vous obtenez une fenêtre qui s'ouvre sur un menu de la sorte :

Avec ce programme, vous obtenez votre propre menu personnalisé.

Cliquez sur ce lien : Mon menu personnalisé puis sur le clic droit

Première étape :

Le site DDmenu sur lequel j'avais trouvé ce programme est fermé. Je vous donne donc l'adresse de mes fichiers à copier :

moo.ddmenu.0.21.js : http://ddata.over-blog.com/xxxyyy/0/37/17/67/ddMenu/js/moo.ddmenu.0.21.js
ddmenu.css : http://ddata.over-blog.com/xxxyyy/0/37/17/67/ddMenu/css/ddmenu.css

Il vous suffit :

de mettre chacune de ces adresses dans la barre de navigation
de copier le contenu qui apparaît
d'ouvrir le bloc-note sur votre PC
de copier ce contenu
d'enregistrer sous le même nom les fichiers.

Deuxième étape :

Allez sur MooTools

Assurez-vous de bien télécharger une version Mootools inférieure à mootools 1.2 beta 2

Cliquez sur Download MooTools 1.2

Une page s'ouvre sur le contenu de mootools-1.2.js
Faîtes Edition - Tout Sélectionner
puis Edition - Copier
Ouvrez le bloc-Notes sur votre PC
Faîtes Edition - Copier
Sauvegardez sous le même nom

Troisème étape :

Il vous faut 3 images de 16*16px pour mettre dans votre menu.

Dans l'administration de votre blog - Mes Documents - Autres Fichiers :

vous créez un répertoire nommé ddMenu
- dans lequel vous créez un sous-répertoire nommé images
  - dans lequel vous enregistrez vos 3 images
  - vous notez leur adresse

Quatrième étape :

Sur votre PC :

Ouvrez le Bloc-Notes
appelez le fichier ddMenu.css
modifiez les adresses des images : vous les avez noté lors de la troisième étape

.ddmenu.def a.objects {padding-left: 24px; background: url(../images/objects-16x16x32b.png) 4px 50% no-repeat;}

.ddmenu.def a.letter {padding-left: 24px;background: url(../images/text-16x16x32b.png) 4px 50%
no-repeat;}

.ddmenu.def a.umbrella {padding-left: 24px;background: url(../images/umbrella-16x16x32b.png) 4px 50% no-repeat;}

enregistrez le fichier sous le même nom

Cinquième étape :

Dans votre Administration - Mes Documents - Autres Fichiers - ddMenu :

vous créez un autre sous-répertoire nommé css
- dans lequel vous enregistrez ddMenu.css
- vous notez son adresse
vous créez un troisième sous-répertoire nommé js
- dans lequel vous enregistrez les fichiers moo.ddmenu.021.js et mootools-1.2.js
- vous notez leur adresse

Sixième étape :

En HTML, de votre entête, vous collez

<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ddMenu/css/ddmenu.css" type="text/css" media="screen" />
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ddMenu/js/mootools-1.2.js" type="text/javascript"></script>
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ddMenu/js/moo.ddmenu.0.21.js" type="text/javascript"></script>

en personnalisant les adresses des fichiers en rouge : vous les avez noté à la cinquième étape

Toujours en HTML de votre entête, vous collez

<body onload="iniz()">
<div class="ddmenu def" id="ddmenu2" style="display:none">
<ul>
<li class="title">Menu Title</li>
<li class="item" id="menu_item1"><a href="http://annak.over-blog.com/article-4719536.html">Top
Liste</a></li>
<li class="item" id="menu_item2"><a href="http://annak.over-blog.com/article-4717928.html">Plugboard</a></li>
<li class="item" id="menu_big_item"><a href="http://annak.over-blog.com/article-14754421.html">PlugScroll</a></li>
<li class="sepline"></li>
<li class="item" id="menu_item_with_icon1"><a class="objects" href="http://annak.forumparfait.com/portal.php">Forum</a></li>
<li class="item" id="menu_item_with_icon2"><a class="letter" href="http://decoannak.over-blog.fr">La déco d'Anna K.</a></li>
<li class="item" id="menu_item_with_icon3"><a class="umbrella" href="http://ann.over-blog.com/blog-contact.php?ref=371767">Contact</a></li>
<li class="sepline"></li>
<li class="item" id="menu_spec_links"><a href="http://ann.over-blog.com/recommander.php?ref=371767">Recommander</a></li>
<li class="item" id="menu_spec_texts"><a href="http://ann.over-blog.com/blog-newsletter.php?ref=371767">Newsletter</a></li>
<li class="item" id="menu_spec_images"><a href="http://annak.over-blog.com/articles-blog.html">Publication</a></li>
</ul>
</div>
</body>

En personnalisant les URL en bleu et ce qui apparaît dans le menu en vert

Et pour finir, à la suite, toujours en HTML, vous collez

<script>
function iniz () {
    pagemenu = new DDMenu ('ddmenu2', document, {            //document can be the whole page,
//an element or a parent of elements
        onOpen: function (e) {
this.enableItems(true);                          //enable all
            this.enableItems('menu_item_with_icon2',false); //disable menu_item_with_icon2
        },
        onItemSelect: function (act_id, act_el, menu_bindon) {
            console.info("menu action -> item id: "%s" from: %o in %o", act_id, act_el, menu_bindon)
        }
    });
}
</script>

Créer un mapping

Publié par Annak Libellés : (Tous les blogs) Astuces de navigation, map, menu, Tous les Blogs

Un map est une image comprenant plusieurs zones. Sur chacune de ces zones, on crée un lien qui renvoie à une page. C'est essentiellement utilisé pour faire des menus, des cartes géographiques...

Dans ce cas précis, on va créer un menu.

L'exercice n'est pas très difficile, il faut seulement être minutieux et attentif.

Première étape : concevoir votre menu.

Je travaille sous Paint Shop Pro, mais vous pouvez utiliser tout logiciel de dessin un peu évolué (photophiltre, photoshop, etc...)

Je réalise mon menu : Il s'agit d'une image avec fond transparent.

Deuxième étape : trouver les coordonnées de chacune des zones

Sur PSP : Fichier - Exporté - Image cliquable

Une fenêtre s'ouvre

Avec la flèche, le carré ou le rond (selon la forme du dessin à entourer) du menu outils, je délimite le 1er encart de mon menu (on le voit en vert) qui mène vers Les premiers pas en confiance.

Vous pouvez observer sur cette fenêtre les coordonnées de cet encart

Gauche	12	Haut	11
Droite	193	Bas	114

On va les noter sous cette forme :

12,11,193,114

Pour réitérer l'opération sur le sommaire suivant, je clique sur le + dans la 1ère ligne à droite pour faire glisser le dessin vers le bas.

Dans mon exemple, les coordonnées précises de chaque encart sont

Les premiers pas en confiance	11,9,193,112
Ajouter, enlever, déplacer ou masquer	13,150,194,250
Ascenseurs	11,290,193,393

3ème étape : sur le blog

Vous avez hébergé votre image et obtenu une adresse.

La mienne est http://www.casimages.com/img/gif/0707200724166265884263.gif

En HTML, vous copiez ce pavé

<img border="0" alt="texte au survol de la souris" src="adresse de l'image" usemap="#nom
du Map" /> <map id="nom Map" name="nom Map ">
<area alt="Nom lien 1" href="URL 1" coords="11,9,193,112" shape="RECT" />
<area alt="Nom lien 2" href="URL 2" coords="13,150,194,250" shape="RECT"/>
<area alt="Nom lien 3" href="URL3" coords="11,290,193,393" shape="RECT" />
</map>

Vous pouvez rajouter autant de lignes

<area alt="Nom lien 3" href="URL3" coords="11,290,193,393" shape="RECT" />

que besoin est, avant le </map> final

Vous personnalisez ensuite les mots en couleur.

Dans mon cas, j'obtiens

<img border="0" alt="Menu des ficelles" src="http://www.casimages.com/img/gif/0707200724166265884263.gif" usemap="#Menu" />
<map id="Menu" name="Menu ">
<area alt="Les premiers pas en confiance" href="http://annak.over-blog.com/article-3254809.html" coords="11,9,193,112" shape="RECT" />
<area alt="Ajouter, enlever, déplacer ou masquer" href="http://annak.over-blog.com/article-3250730.html" coords="13,150,194,250" shape="RECT" />
<area alt="Ascenseur" href="http://annak.over-blog.com/article-3250425.html" coords="11,290,193,393" shape="RECT" />
</map>

Et voici le résultat : en cliquant sur chaque case, on arrive sur le sommaire correspondant

Menu des ficelles

1 août 2010

Créer un menu vertical orienteur en rollover

Publié par Annak Libellés : (Tous les blogs) Astuces de navigation, menu, Tous les Blogs

Au survol de la souris, le fond de ce menu change.
Pour le réaliser, allez sur GRSITES

PREMIERE ETAPE :

Créez votre menu

Dénominations et URL des liens
taille, couleur et type de police
fond du bouton : couleur ou texture

Cliquez sur Make the countinuous Texture navigation Menu

DEUXIEME ETAPE :

Cliquez sur Download the menu and instructions

Vous obtenez un fichier .zip : un ensemble de fichiers compressés.
J'utilise WinRAR, Options Extraire Vers pour décompresser ce fichier.

Vous obtenez une image

Que vous sauvegardez dans votre administration de blog.

Vous notez son adresse.

TROISIEME ETAPE :

Sur le site, vous copiez le code

<style type="text/css">
.b1745256 {
height: 28px;
width: 200px;
background: url(button25469224.jpg);
background-position: 0px 0px;
}

</style>
<table cellpadding=0 cellspacing=0 border=0><tr>
<td valign=center>
<a href="http://annak.over-blog.com/categorie-10157743.html">
<div id="b17452561" class="b1745256"
style="background-position: -0px -0px; "
onmouseover = "mOv1745256(1); " onmouseout = "mOut1745256(1); "
></div>
</a>
</td>
</tr><tr>
<td valign=center>
<a href="http://annak.over-blog.com/categorie-10150341.html">
<div id="b17452562" class="b1745256"
style="background-position: -0px -28px; "
onmouseover = "mOv1745256(2); " onmouseout = "mOut1745256(2); "
></div>
</a>
</td>
</tr><tr>
<td valign=center>
<a href="http://annak.over-blog.com/categorie-10157775.html">
<div id="b17452563" class="b1745256"
style="background-position: -0px -56px; "
onmouseover = "mOv1745256(3); " onmouseout = "mOut1745256(3); "
></div>
</a>
</td>
</tr><tr>
<td valign=center>
<a href="http://annak.over-blog.com/categorie-716529.html">
<div id="b17452564" class="b1745256"
style="background-position: -0px -84px; "
onmouseover = "mOv1745256(4); " onmouseout = "mOut1745256(4); "
></div>
</a>
</td>
</tr><tr>
<td valign=center>
<a href="http://annak.over-blog.com/categorie-10170635.html">
<div id="b17452565" class="b1745256"
style="background-position: -0px -112px; "
onmouseover = "mOv1745256(5); " onmouseout = "mOut1745256(5); "
></div>
</a>
</td>
</tr><tr>
<td valign=center>
<a href="http://annak.over-blog.com/categorie-10157837.html">
<div id="b17452566" class="b1745256"
style="background-position: -0px -140px; "
onmouseover = "mOv1745256(6); " onmouseout = "mOut1745256(6); "
></div>
</a>
</td>
</tr><tr>
<td valign=center>
<a href="http://annak.over-blog.com/categorie-10157795.html">
<div id="b17452567" class="b1745256"
style="background-position: -0px -168px; "
onmouseover = "mOv1745256(7); " onmouseout = "mOut1745256(7); "
></div>
</a>
</td>
</tr><tr>
</tr></table>
<script language="JavaScript" type="text/javascript">
function mOv1745256 (num) {
document.getElementById("b1745256"+num).style.backgroundPosition = "-200px -"+(num-1)*28+"px";
}
function mOut1745256 (num) {
document.getElementById("b1745256"+num).style.backgroundPosition = "-0px -"+(num-1)*28+"px";
}
</script>

et le collez en html en personnalisant l'adresse de l'image que vous avez sauvegardé à l'étape précédente.

Créer un menu horizontal orienteur

Publié par Annak Libellés : (Tous les blogs) Astuces de navigation, menu, Tous les Blogs

Un menu très joli et vraiment pas difficile à réaliser.

Cliquez pour voir le menu

Première étape :

Allez sur Stu Nicholls

Choisissez le menu qui vous plait et cliquez sur Download Pro Menu

Vous venez de sauvegarder un fichier .zip : un ensemble de fichiers compressés.
Pour les décompresser, j'utilise WinRAR, extraire vers.

Deuxième étape :

Dans votre administration - Mes images :

créez un répertoire : Menu
- sauvegardez dedans les fichiers :
  - button1.gif
  - button2.gif
  - button3.gif
- notez leur adresse

Troisième étape :

Dans ce fichier .zip, il y a avait aussi le fichier pro_one.html, il faut cliquer dessus. Il vous mène sur une page Web dont il faut regarder la source.

Cette source, il va falloir la copier et la personnaliser ainsi :

<style type="text/css">
    /*Credits: CSSpplay */
    /*URL: http://www.cssplay.co.uk/menus/pro_one */
    .menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px;
    background:#fff url(button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
    .menu1 li {float:left;}
    .menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa;
    text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif;
    font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
    .menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
    .menu1 li.current a {color:#fff; background:url(button3.gif);}
    .menu1 li.current a b {background:url(button3.gif) no-repeat right top;}
    .menu1 li a:hover {color:#fff; background:#000 url(button2.gif);}
    .menu1 li a:hover b {background:url(button2.gif) no-repeat right top;}
    .menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
    .menu1 li.current a:hover b {background:url(button3.gif) no-repeat right top;}

    </style>
    </head>
    <body>
    <ul class="menu1">
    <li><a href="http://annak.over-blog.com/"><b>Home</b></a></li>
    <li class="current"><a href="http://annak.over-blog.com/"><b>Privacy Policy</b></a></li>
    <li><a href="http://annak.over-blog.com/"><b>Products</b></a></li>
    <li><a href="http://annak.over-blog.com/"><b>Where to find us</b></a></li>
    <li><a href="http://annak.over-blog.com/"><b>Contact us</b></a></li>
    <li><a href="http://annak.over-blog.com/"><b>Search</b></a></li>
    </ul>

En rouge : vous collez les adresses de vos propres boutons (étape2)
En bleu : vous collez les adresses des liens
En vert : ce qui apparaît sur le menu

Avouez que ce n'est pas très difficile pour un résultat très sympa.