Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

18.09.2009

Proposez une navigation entre les éléments de colonne

Depuis quelques temps, la colonne de droite de ce blog affiche quelques icones permettant un accès rapide à la plupart des éléments, tels que "Dernières notes". Je vous propose de voir quelles sont les bases de cette forme de mini-menu.

Chaque élément de colonne possède un identifiant propre que l'on peut retrouver dans le code Html de la page. Si vous utilisez l'un au moins des éléments standards, vous devriez retrouver dans le code de vos pages, l'un des identifiants suivants :
box-recentposts | box-recentcomments | box-categories | box-archives | box-populartags | box-search | box-aboutme | box-youremail | box-yourphoto | box-photoalbum | box-syndication

Si vous avez créé un élément de colonne personnalisé, ce dernier porte un identifiant aussi du type :
id="box-mybox1700243"

Il suffira d'ajouter à l'adresse du blog, un signe dièse, puis l'identifiant pour établir un accès direct à un élément comme ici : http://geemee.hautetfort.com/#box-recentposts, et puisqu'il s'agit d'un lien interne à la page, on peut se contenter de #box-recentposts (quand on insère un lien hypertexte avec l'éditeur de note  H&F).

Le mini-menu, ne fait rien d'autre que de pointer vers les éléments de colonne que j'ai choisi. Vous pouvez le vérifier vous-même dans le code Html. Celui que je vous propose ci-dessous est directement utilisable chez vous. Il ne peut fonctionner que pour les éléments standards, vous aurez à le personnaliser pour pointer vers des éléments personnalisés. Et puis de toutes façons, il vous faudra bien utiliser des images qui vous conviennent plutôt que les miennes.

Vous noterez, si faites moi plaisir, que le lien "À propos" pointe directement vers la page plutôt que d'aller vers l'élément de colonne.


<a id="menu"></a>
<a href="#box-recentposts" title="Notes récentes">
<img alt="Notes |" src="http://geemee.hautetfort.com/images/UI/note.gif"></a>
<a href="#box-recentcomments" title="Derniers commentaires">
<img alt="Comm |" src="http://geemee.hautetfort.com/images/UI/comm.gif"></a>
<a href="#box-archives" title="Archives">
<img alt="Arch |" src="http://geemee.hautetfort.com/images/UI/arch.gif"></a>
<a href="#box-categories" title="Catégories">
<img alt="Catg |" src="http://geemee.hautetfort.com/images/UI/catg.gif"></a>
<a href="#box-populartags" title="Tags">
<img alt="Tags |" src="http://geemee.hautetfort.com/images/UI/tags.gif"></a>
<a href="{$blog.url}" title="Acceuil">
<img alt="Accueil |" src="http://geemee.hautetfort.com/images/UI/home.gif"></a>
<a href="{$blog.url}/about.html" title="Contact, &Agrave; propos">
<img alt="&Agrave; propos |" src="http://geemee.hautetfort.com/images/UI/about.gif"></a>

Quand vous aurez copié ce code :
- Rendez-vous dans l'interface d'administration
- Propriétés, Contenu des colonnes, descendez jusque "Ajouter un élément personnalisé"
- Vous noterez que cela vient de changer, l'annonce officielle ne devrait pas tarder.
- Cliquez sur "Ajouter le code HTML / Javascript"
- Nommez l'élément "Menu" par exemple
- Collez le code dans lla zone principale
- Pour "Afficher le nom" choisissez "non"
- Pour "centrer l'élément" choisissez ce que vous voulez
- Validez
- Ajoutez l'élément dans une colonne, ajustez son positionnement, et enregistrez les modifications.
- Renouvelez l'opération autant de fois que vous souhaitez afficher un menu.

À vous d'appliquer à ce mini-menu des modifications à la carte.

Les commentaires sont fermés.