Modèles blog blogger: des onglets faciles et un design modernisé (tutoriel)

Nouveaux modèles chez blogger! Inspiration Wordpress et onglets:

Il y a du changement dans l'air chez Blogger! Après l'introduction d'une nouvelle fonctionnalité il y a quelques mois: la possibilité de créer des pages fixes différentes des articles, voilà que Blogger renouvelle aujourd'hui totalement ses modèles!

Des modèles attractifs, aussi faciles à créer que les précédents, et inspirés des modèles qui ont fait le succès des blogs Wordpress.

Cliquez sur les captures d'écran pour afficher en grand:

Un test des nouveaux modèles blogger: créer ce "blog-brouillon" m'a pris moins de 10 minutes...

En quoi ces nouveaux modèles sont-ils différents?

• Ils affichent un design résolument plus "moderne" qui fait oublier la réputation austère, voire tristounette de la plateforme blogger.
• A l'image des modèles qui ont fait le succès de Wordpress, ces nouveaux modèles permettent une personnalisation fine des menus latéraux: 1, 2 ou 3 colonnes en un clic.
• Et enfin, une fonction très intéressante pour alléger le menu latéral du blog: ils permettent de se créer un modèle de blog "à onglets" sans avoir à mettre le nez dans le HTML.

Comment relooker le modèle de son blog?

Avant de vous lancer dans la création d'un nouveau modèle, pensez à faire une double sauvegarde de votre blog:

• Sauvegarde du modèle
• Sauvegarde des articles (c'est l'occasion: on ne le fait jamais assez souvent!)

Voir comment sauvegarder ses articles et son modèle en suivant le lien (en fin d'article)

Si vous avez envie de passer d'un "vieux" modèle blogger classique à ces nouveaux modèles, rendez-vous dans l'administration de votre blog, et cliquez sur l'onglet "Présentation". Puis cliquez sur le lien "Outil de création de modèle"

Là, vous vous laissez guider:

• choix du modèle
• choix de la présentation (menu à gauche ou droite, nombre de colonnes...)
• choix de l'image d'arrière-plan parmi une sélection d'images imposées
• choix des couleurs et fontes: fond, titre, lien... (Là encore, blogger facilite la tache de ceux qui ne sont pas à l'aise avec l'assortiment des couleurs: en fonction d'un premier choix de couleurs, il propose une palette assortie pour les autres éléments de la page.)

Vous pouvez à tout moment revenir sur vos choix précédents.

Une fois votre modèle créé, vous pouvez retourner dans l'onglet "Eléments de page" pour déplacer certains gadgets. Profitez-en pour modifier la couleur de votre navbar si elle n'est plus assortie.

• Les images d'arrière-plan de ces nouveaux modèles sont imposées. Pour mettre en arrière-plan une image de votre disque dur, pas d'autres solutions que de passer par le code HTMl du modèle (mais je crois que blogger va bientôt offrir cette possibilité aux réfractaires au HTML)
• Par contre, vous pouvez conserver une image personnelle en tête (bannière) de blog.

Je ne détaille pas d'avantage, car l'utilisation de ce nouvel éditeur de modèles est très simple, et certains d'entre vous ont déjà testé. Par contre, je consacre la fin de ce tutoriel à une fonction qui peut passer inaperçue: l'introduction d'une barre d'onglets dans son modèle blog.

Comment intégrer une barre d'onglets dans son nouveau modèle blog blogger?

L'un des gros avantages de ces nouveaux modèles, c'est la possibilité de créer une barre d'onglets. Chaque onglet renvoie à un lien.

Pour activer cette barre d'onglets, deux possibilités s'offrent à vous:

• Les liens de la barre d'onglets renverront exclusivement à des pages de votre blog (liens internes)

• La barre d'onglet renverra à des liens divers: vers d'autres sites (liens externes) et/ou vers certains de vos articles ou pages (liens internes).

1- une barre d'onglets pour les pages d'un blog blogger

Si vous avez déjà créé des pages (contact, table des matières, auteur...), il vous suffit d'aller dans la section "éléments de page" de l'éditeur.

Remarque: l'option "onglets" pour les pages blogger n'est pas réservée aux "nouveaux modèles" blog. Ces onglets apparaissent aussi avec les anciens modèles.

• Sous l'entête de votre blog, cliquez sur "ajouter un nouveau gadget" et sélectionnez le gadget "Pages".

• Vous pouvez choisir les pages à afficher ou non dans ce gadget.

• Cliquez sur "enregistrer"... et c'est tout! Automatiquement, toutes les pages que vous avez cochées apparaissent dans les onglets de votre modèle.
  

Les pages d'un blog blogger en onglets dans le modèle

Si vous n'avez pas encore créé de pages:

• Rendez-vous dans "Publication d'un message", puis cliquez sur "Modifier les pages" et "Créer une nouvelle page".

• Après avoir rédigé votre page, cliquez sur "Publier": vous arrivez sur la capture d'écran ci-dessous.

• Choisissez l'option "Onglets du blog" et une barre d'onglets apparaitra automatiquement dans votre blog, avec un lien vers cette nouvelle page.

Publier une page blogger directement dans un onglet

2- une barre d'onglets vers des liens extérieurs:

Si vous souhaitez que la barre d'onglets de votre blog renvoie à des adresses web externes, oubliez le gadget "page".

• Rendez-vous dans l'éditeur, option "éléments de page" et cliquez sur "Ajouter un gadget" sous l'entête blog.

• Choisissez le gadget "liste de liens".

• Éditez tous les liens de votre choix (Remarque: vous pouvez mélanger des liens vers d'autres sites, et des liens vers des articles ou pages de votre propre blog).

• Enregistrez, et la barre d'onglets apparait automatiquement.

• Vous pourrez à tout moment modifier cette liste (et donc modifier vos onglets) en un clic.

Un modèle blogger à onglets pour des liens externes au blog

faire ses expériences "au brouillon":

Si vous voulez tester ces nouveaux modèles sans prendre de risque, vous pouvez gratuitement vous créer un "blog brouillon":

• Rendez-vous dans votre tableau de bord blogger
• Cliquez sur "créer un nouveau blog" et suivez les consignes pour créer un blog.
  
• Une fois votre blog-brouillon créé, n'oubliez pas d'aller ensuite dans "paramètres" et décochez l'option "Laisser les moteurs de recherche trouver votre blog".
  
• Vous pouvez également aller dans votre profil: cliquez sur "modifier le profil" puis sur "blogs à afficher" et décochez là aussi ce blog brouillon pour que vous puissiez mener vos expériences en toute intimité.

Quelques remarques en vrac:

Je n'ai pas encore mis en application ces nouveaux modèles en dehors de ce test (et je n'envisage pas de le faire pour l'instant dans mon blog photos, mais sans doute prochainement pour mon blog enseignement). Si vous avez déjà utilisé ces nouveaux modèles, n'hésitez pas à partager votre expérience et vos premières impressions en commentaire (satisfaits? temps de chargement du blog? avantages et inconvénients?): je crois que nous sommes tous intéressés par le sujet.

Je crois que ces nouveaux modèles très "web2" peuvent poser des problèmes d'affichage dans IE6 (une vieille version d'internet explorer). Étonnant, non?...

Si vous souhaitez conserver votre modèle classique, vous pouvez toujours accéder à l'ancien éditeur de modèles. Mais il se cache maintenant en dessous de votre code HTML (en bas de la page "Modifier le code HTML")

Mise à jour: j'ai testé le nouvel éditeur pour mon autre blog. Facile à utiliser, et les modèles demeurent personnalisables (image de fond, couleurs d'onglet...) à condition de travailler directement dans le code HTML CSS. Par contre, attention aux modèles à coins arrondis (et peut-être à d'autres modèles: je ne les ai pas tous testés): ils ne sont pas compatibles à 100% avec Internet Explorer (il y a des "flottements" dans l'affichage, les arrondis vont et viennent.)
En savoir plus dans l'article: J'ai testé le nouvel éditeur de blogs blogger.