vendredi 7 mai 2010

Tutoriel : comment ajouter un top menu / des pages à votre blog

u fur et à mesure que mon blog avance, je m'interroge sur les façons de l'améliorer et vous livre mes petites idées au passage.

Je dois dire que même si je voue une grande admiration aux produits Google, Blogger n'est définitivement pas le plus réussi. Il y manque pas mal de choses qui devraient selon moi être natives mais bon voyons la vie du bon côté, ça me donne l'occasion de vous écrire des petits tutoriels ! Et puis, même si d'autres plateformes proposent des interfaces de gestion plus complètes, c'est tout de même bien pratique d'avoir toutes nos applications sous la main avec un seul compte Google (Blogger, Analytics, Feedburner and so on).

Aujourd'hui, à la demande d'un lecteur, je vous explique comment ajouter un top menu à votre blog (désolée pour le retard mais ma semaine a été chargée :). L'intérêt du top menu étant de proposer des liens vers des pages uniques comme par exemple "A propos", "Contact", etc. Elles seront insérées dans la structure globale de votre blog et seront donc consultables à partir de n'importe quel page, contrairement à vos posts qui apparaissent d'abord en page d'accueil puis avec le temps et les nouveaux articles, s'enfoncent dans les méandres du web.

Alors, allons-y gaiement. J'ai créé un blog test pour l'occasion car sur le mien, le top menu est proposé par défaut dans le template donc ça n'avait pas grand intérêt. Mais si c'était votre cas, vous ne seriez pas en train de lire ce tutoriel donc je pars sur un blog qui n'en a pas (Philippe, tu notes que j'ai pris ton template :)

Vous pouvez, comme d'habitude, cliquer sur les images pour les afficher en plus grand.

Bon first of all, il faut commencer par créer les pages que vous voudrez mettre dans votre top menu. Pour cela, dans votre interface Blogger, cliquez ici :


Comme vous n'avez encore aucune page, vous cliquez sur "Nouvelle page" (notez que si vous aviez déjà créé des pages, le processus serait néanmoins le même) :


Puis, comme à votre habitude, vous donnez un titre à votre page (c'est celui qui apparaitra dans le top menu), puis vous insérer tranquillement votre contenu dans le corps de la page (vous avez compris, c'est ce que les gens verront quand ils cliqueront sur le titre de votre page dans le top menu).

Dans les options de la page, les commentaires sont par défaut désactivés. Vous pouvez décider d'autoriser les commentaires, là c'est vous qui voyez.


Une fois votre page terminée, vous cliquez sur "Publier la page". Blogger vous propose alors d'afficher votre page dans un gadget, intelligemment nommé pour l'occasion le gadget "Pages". Vous pouvez décider de le positionner sur la droite (les liens vers les pages s'afficheront verticalement), en haut (les liens s'afficheront horizontalement, sous forme d'onglets) ou au contraire de ne pas afficher vos pages dans un gadget mais de les lier manuellement à l'endroit qui vous plaira.

Ici, nous avons décidé qu'on voulait afficher les pages dans un top menu. on coche donc l'option "onglets du blog" et on valide.



Et voilà, votre page a bien été publiée dans un top menu, ce que vous pouvez vérifier en ligne immédiatement.



La gadget "Pages" a par ailleurs été ajouté à la mise en page de votre blog, ce que vous pouvez vérifier en cliquant sur l'onglet "Mise en page" de Blogger :


Si vous cliquez sur "Modifier" dans votre nouveau gadget "Pages", vous pouvez alors configurer votre gadget.


Vous pouvez changer le titre de votre Gadget (ce qui n'est intéressant que si vous décidez de le positionner sur la droite car le top menu n'affiche pas le titre du gadget)


Vous pouvez décider que les nouvelles pages que vous créerez seront automatiquement ajoutées à ce gadget (ou pas).


Vous pouvez décider d'afficher toutes vos pages ou d'en désactiver certaines temporairement :


Vous pouvez surtout décider de l'ordre d'apparition des pages dans votre gadget :


Voili, voilà, vous êtes prêts et moi je vous prépare un petit tutoriel sur le formulaire de contact pour bientôt :)

D'ici là je vous souhaite un très bon week-end !

11 commentaires:

Kaderick en Kuizinn a dit…

franchement tu m'a vachement aidée avec ton post mais juste une question: j'ai fais les pages mais il y en a une que je voudrais faire est recettes mais comment faire pour que quand on clique sur cet onglet les recettes apparaissent merci de me rep su tu lis ce com.

Copine Débile a dit…

alors si je comprends bien :
- tu as créé une page indépendante en top menu
- et maintenant tu souhaiterais qu'à chaque fois que tu publies une nouvelle recette, l'article aille se classer dans ta page recette ?

J'ai cherché un peu sur le web pour t'apporter une réponse et ai trouvé cette solution ici (http://www.google.com/support/forum/p/blogger/thread?tid=38584566b2e95485&hl=fr) --> merci Prac !!

- Dans Blogger in Draft créez au moins 1 page

- Ajouter le gadget page sur votre Blog

- Parametres / Mise en page / Modifier HTML

Cocher développez des modèles de gadgets

Recherchez le code du gadget liste des pages


<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href' expr:title='data:link.title'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href' expr:title='data:link.title'><data:link.title/></a></li>
</b:if>
</b:loop>

XX

</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
A la place de XX mettre le lien vers un article du blog, accessible par libelle

http://NOMDUBLOG.blogspot.com/search/label/LIBELLE

vous mettez a la place de XX le code suivant ce qui va créer un nouvel onglet

<li>
<a href='http://NOMDUBLOG.blogspot.com/search/label/LIBELLE' title='Titre article'>Texte lien</a>
</li>


Ça devrait t'aider !

Margot / Youmakefashion a dit…

merci beaucoup !!

Arcans a dit…

merci pour ton aide, loin d'être débile.
je suis devenu membre et attends donc avec impatience tes futurs tutoriels.
mon blog: http://domainegranoisdesfrisons.blogspot.com/

Copine Débile a dit…

Merci merci !! Il y a deux autres tutoriels actuellement et pour le reste, je m'y colle dès que j'ai un peu de temps, promis juré :)

Anonyme a dit…

Bonjour chère copine débile,
Je tenais à vous remercier, car je voulais créer un blog avec Blogger et j'ai cherché, cherché (ahgrrr !) des informations simples et limpides pour débuter et créer un Blog avec des onglets ! Il faut admettre que sur le NET, il faut en prendre et beaucoup en laisser. Et j'ai découvert cette copine débile qui m'a fait des révélations ! Grâce à vous, j'ai eu un déclic "débile" et j'ai compris ! Vos explications m'ont été salutaire ! ( même si Blogger a changé la mise en page du système des onglets entre temps ! ) cela m'a permis de saisir la procédure ! Donc, étant fier d'être du Club très sympathique des débiles, je voulais vous remercier mille fois, que vous sachiez que votre Blog est très utile aux autres et cela n'est pas débile ! même extra débilement simple de compréhension pour celui qui rêve de commencer son Blog ! Lorsque j'aurais terminé mon blog, je laisserai un lien de mon Blog vers votre Blog si utile ! ( enfin, quand je serai faire un lien de mon blog vers un autre Blog, Ah ! Ah ! Ah ! ) Il était important pour moi de vous remercier, c'était la moindre des choses qui me tenait à coeur
Pascal, qui se sent pas si débile finalement !

Copine Débile a dit…

Et bien merci Pascal, je suis bien contente de voir que mes tutoriels sont utiles à mes amis blogueurs ! Ça va peut-être me motiver à en ré-écrire de nouveaux :)

Anonyme a dit…

Comme vous voyez, je suis repassé voir votre site et j'aime beaucoup cette ambiance débilement sympathique !

Pascal votre Fan !

Quoi ? j'ai osé dire ça ? Mais... je deviens déb...le ! Allez, ce n'est pas grave, l'important c'est de découvrir des sites ludiques et c'est le cas du votre et c'est si rare ! les autres sont tellement intelligent que l'on n'y comprend rien !!!!
c'est dingue non ?
Merci pour nous...
cordialement
Pascal ( et ce n'est pas un pseudo ! c'est pour dire ma sincérité !
Bonne continuation

Lnnn a dit…

Super, il va falloir que je planche là-dessus !

Copine Débile a dit…

Si tu as besoin d'info supplémentaires, fais-moi signe :)

I wanna be slim a dit…
Ce commentaire a été supprimé par l'auteur.

Enregistrer un commentaire

Vous aimerez peut-être