Générateur HTML module complémentaire menu vertical

 

 

Création d'un bloc liste "Menu"

 

Ce générateur crée le code HTML d'un bloc qui contiendra une liste de liens, pour composer un menu et ainsi créer un nouveau module personnel.

Vous pourrez l'insérer dans le menu vertical, entre les autres modules ou à la fin de la colonne "Menu". C'est à dire dans la structure entre les divers blocs ou après le dernier {bloc gauche} qui est résevé pour les "Médias sociaux".
Consultez cette rubrique d'aide de la Base de connaissances pour modifier l'ordre d'affichage des modules, l'exemple est sur un modèle graphique, pour le DizPerso c'est pareil.

Le but de ce générateur est de vous aider à créer un menu, avec son titre, comme les autres modules du menu vertical. Au niveau du style il sera géré de la même façon, il s'intégrera dans le design.
Il est possible de lui appliquer un style particulier, tout comme les autres modules, en créant une règle avec son identifiant, comme par exemple celui que j'ai mis menu_generateurs, la règle aura comme sélecteur #menu_generateurs.
Vous pouvez lire cet article pour voir la structure du menu de gauche avec les modules et les identifiants, utilisés dans le CSS pour mettre des style différents à chaque module. lien

 

 

Début du bloc module

Au début d'un bloc il faut mettre la balise d'ouverture et l'identifiant (id) par exemple "menu_generateurs", c'est à vous de choisir comme pour le titre un texte en fonction de ce que ce module contiendra, exemples : menu_creations et comme titre "Mes créations" ou menu_voyages et comme titre "Mes voyages".

Après avoir renseigné les 2 champs, en cliquant sur le bouton en dessous, ce générateur créera le code, qui s'affichera dans le champ texte en bas du formulaire.




 

Après il faut rentrer tous les éléments de la liste, pour chaque élément, 2 champs à renseigner.


    1. Le texte du lien, si possible pas trop long, selon la largeur de la colonne menu.
    2. L'URL de la page que vous voulez ouvrir, son adresse complète internet, comme par exemple : "http://diztest.blog4ever.com/blog/index-205392.html"

Puis cliquez sur le bouton en dessous à chacun des liens, pour rajouter le code dans le champ texte en bas du formulaire.

 

Création de chaque élément de la liste

:
:

 

 

Fin du bloc

Quand vous avez ajouté tous les liens, cliquez sur le bouton ci-dessous pour terminer le code.

 

Code HTML créé

   

 

Copier ce code et insérez le où vous voulez, entre les blocs du menu, dans  la structure de votre blog...
voir dans les captures surligné en jaune :

 

Capture Structure menu

 

 

Capture Structure menu

 

 

Exemple d'insertion d'un bloc :
Capture Resultat menu

 

 



29-11-2011 | 623 vues

Partager


Commentaires


Fanfan
site/blog
le 02-02-2012 à 15:05:58
Coucou Papyclic,

Un grand merci pour ce générateur qui m'a permis d'uniformiser les modules ajoutés dans la colonne de gauche avec la présentation de base de mon blog. Pour le menu droit, je galère encore un peu...

Gros bisous,
Fanfan
Poster un commentaire
Merci de recopier le nombre de gauche dans la case ci-dessous (Pourquoi?)

Liens

Voir les articles de la catégorie " Menu vertical gauche "
Imprimer cet article

Rechercher sur Diztest ? :

Recommander ce blog | Contacter l'auteur | Signaler un contenu | S'abonner au blog Flux RSS du blog | Espace de gestion | Annuaire des blogs