Rechercher dans le blog

lundi 9 novembre 2015

Compléter le menu de navigation d'un template importé (blogger)



J'ai reçu quelques commentaires et mails pour me demander comment compléter le menu suite à l'import d'un template. (voir le tuto)

Tout d'abord, sachez qu'il y a 3 principaux types de menus :
  • Le menu de base blogger
  • Le menu widget 
  • Le menu intégré au code html


Le menu de base blogger

Au départ, je ne souhaitais pas parler de ce menu de base qui me paraissait tellement évident. Les derniers mails reçus me font comprendre que non, ce n'est pas si évident pour tout le monde ! 
Pour créer un menu sur un template de base, il suffit dans la partie "Mise en page" d'ajouter le widget "Pages".
Ensuite, il faut cocher les pages que l'ont souhaite voir s'afficher et ajouter les liens externes qui correspondent pour la plupart d'entre nous aux articles regroupés sous un même libellé.
Bien évidemment, les pages auront été créées au préalable !

Les liens sont construits de la manière suivante :
  • pour une page :
http://www.nomdemonblog.blogspot.fr/p/nomdelapage.html

pour la page dédiée au design de blog sur MamzellGwen:
http://www.mamzellgwen.com/p/pimp-ton-blog.html

  • pour une catégorie (libellé)
http://nomdemonblog.blogspot.fr/search/label/libellé

par exemple pour voir tous les articles DIY sur MamzellGwen :
http://www.mamzellgwen.com/search/label/DIY


MENU DE BASE BLOGGER





Le menu widget.

Il s'agit d'un code fourni à part du fichier xml et inclu dans le fichier .zip. Il est à copier dans un widget à partir de l'onglet "Mise en page" de blogger.

Il se présente généralement sous la forme :
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>


Pour le modifier en menu : Accueil / Mode / Contact
Il suffit de modifier le texte et d'insérer les liens à la place de #

Ainsi si on imagine :
Accueil = accueil du blog
Mode = articles dont le libellé est "Mode"
Contact = page


On modifiera le code de la sorte :
<div class="menu">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/search/label/Mode">Mode</a></li>
<li><a href="/p/contact.html">Contact</a></li>
</ul>
</div>


ou si on préfère mettre l'url complète :
<div class="menu">
<ul>
<li><a href="http://www.monblog.blogspot.fr">Accueil</a></li>
<li><a href="http://www.monblog.blogspot.fr/search/label/Mode">Mode</a></li>
<li><a href="http://www.monblog.blogspot.fr/p/contact.html">Contact</a></li>
</ul>
</div>


Pour les menus-déroulants, le code se compose ainsi :
Si on veut :
Accueil / Mode / Contact
                 >Look du Jour
                 >Look du Soir

Pour cela il faut que vos articles aient 2 libellés de catégorie : Mode + LookduJour par exemple
<div class="menu">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/search/label/Mode">Mode</a></li>
       <ul class='sub-menu'>
       <li><a href="/search/label/LookduJour"</a></li>
       <li><a href="/search/label/LookduSoir"</a></li>
       </ul>
<li><a href="/p/contact.html">Contact</a></li>
</ul>
</div>

MENU WIDGET BLOGGER





Le menu intégré au code html

Pour le code intégré au html, il suffit d'ouvrir "Modèle" puis "Modifier le code html"
cliquer n'importe où dans le code html
faire CTRL+F
rechercher un des mots déjà présent sur le template importé. Par exemple : "Home" jusqu'à trouver ce type de code :
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

et le modifier comme précédemment.
Il faudra répéter l'opération autant de fois qu'un menu apparaît (parfois il y en a un en haut de page et un en pied de page).
Attention ! Si le template ne prévoit pas déjà de menu déroulant, il est possible que si vous ajoutez des sous-menus ceux-ci ne s'affichent pas !


MENU HTML BLOGGER







Voilà, maintenant vous savez tout (ou presque !)

comme d'hab' la télé en fond sonore des vidéos ! (la grande classe Gwen ^^)

J'ai essayé d'être un peu plus lente dans les enregistrements car la vidéo enregistre 1 image sur 2 ou 3 (je sais pas trop) et de fait accélère la réalité !

J'espère que c'est quand même clair et que cela vous aidera !

3 commentaires:

  1. Merci pour ces astuces, ça aide beaucoup =)

    RépondreSupprimer
  2. Merci pour ton partage ! Je vais m'y mettre pour améliorer mon blog.

    RépondreSupprimer
  3. JY SUIS ARRIVEE TOUTE SEULE (enfin grâce à toi)
    DANSE DE LA JOIE

    RépondreSupprimer

N'hésitez pas à me laisser un commentaire !
Merci de votre passage sur le blog
A très bientôt j'espère ;)