Personnalisez votre blog sous Blogger

Ce billet conclut la présentation de la plate-forme d’hébergement de blog : Blogger. Après avoir vu dans le précédent billet les onglets « paramètres » et « publication d’un message », nous allons nous pencher sur la mise en page. L’objectif de ce billet est de vous aider à personnaliser votre blog, au niveau du design (le template) et des fonctionnalités (widgets et autres modifications).

Le menu « mise en page » de votre tableau de bord est divisé en quatre parties :

1. Elements de la page

blogger-elements

Vous trouverez, comme vous l’indique la capture ci-dessus, une schématisation de votre blog comportant :

  • la barre de navigation Blogger (navbar)
  • l’en-tête (ou header)
  • la partie réservée aux billets (Messages Blog)
  • la barre latérale (ou sidebar)
  • le pied de page (ou footer)

Vous pouvez modifier l’apparence de votre barre de navigation en cliquant sur « modifier ». Vous aurez ainsi le choix parmi quatre coloris, mais nous verrons aussi, plus tard dans ce billet, comment la supprimer.

 

blogger navbar

Modifier le header permet (comme le montre l’image de gauche) de :

  • modifier le texte qui sera le titre de votre blog ainsi que la description
  • introduire une bannière en titre
  • afficher une image en background derrière le titre de votre blog

La partie réservée aux billets permet de définir le nombre de messages par page, le format d’affichage de la date, etc. Remarque : Blogger fait apparaître la date de publication sous le format « publié par nom-de-l’auteur à l’adresse 25.04.08″. Pour corriger le problème, remplacez la mention « à l’adresse » par « le » comme le montre l’image de droite.

blogger headerblogger message

Modifier la sidebar permet de rajouter des modules. Par défaut, vous aurez :

  • Blog Archive : classement de vos billets par mois (paramétrable)
  • Qui êtes vous? (qui permet d’accéder à votre profil)

Vous pouvez changer l’ordre des éléments intuitivement (clic gauche enfoncé sur le cadre de l’option que vous souhaitez déplacer, et faites-la glisser à la place souhaitée).
Mais d’autres options sont disponibles en cliquant sur « Ajouter un élément à la page » dans la partie supérieure de votre barre latérale. Vous pourrez, entre autres, y trouver :

  • des sondages
  • les archives
  • une liste de liens
  • un ou des flux (pour afficher les flux d’autres sites)
  • une partie HTML/JavaScript : pour rajouter des widgets en collant leur code dans le module

Beaucoup de services tiers proposent les codes de leurs widgets, comme Mybloglog, Last.fm, etc… (à voir en fonction des services que vous utilisez).Certains sites proposent de rajouter automatiquement leurs widgets à votre blog, c’est le cas notamment pour afficher les derniers messages et les derniers commentaires :

Dernier point, en vous rendant sur le site Draft Blogger et une fois connecté avec votre identifiant Blogger, vous aurez accès à plus de fonctionnalités (après avoir sélectionné votre blog, retournez à l’endroit où nous étions précédemment : « mise en page => éléments de la page », et cliquez sur « ajouter un gadget » pour choisir vos nouveaux widgets parmi un choix plus complet). Parmi eux, un module de recherches, ainsune fonction blogroll très développée qui permet d’afficher les premières lignes des derniers billets de votre liste, ainsi qu’un widget de recherches.

2. Polices et couleurs

blogger couleur
Cette partie vous permet, comme son nom l’indique de modifier les couleurs et polices de votre blog. Un aperçu en bas de page vous aide dans cette étape de personnalisation.

3. Modifier le code HTML

C’est très certainement la partie qui offre le plus de possibilité dans la personnalisation de votre blog. Contrairement aux idées reçues, un blog sous Blogger ne ressemble pas forcément à cela :

blogger homepage

En effet, il est possible de changer complètement le thème. Pour cela, vous devrez d’abord télécharger un fichier de thème (terminé par l’extension .XML) sur un site comme :

Ensuite, dans Blogger, allez dans le champ « Envoyez un modèle depuis un fichier de votre disque dur » (comme sur l’image) et indiquez l’emplacement du fichier.

blogger modele

Pour vous donner une meilleure idée, quelques exemples de thèmes disponibles sur ces blogs :

redwhitecolibri
blogy-illacrimominyxjs

Certains thèmes ne vous sont sûrement pas inconnus puisqu’ils sont adaptés d’autres plate-formes de blogs.

Pour enlever la barre de navigation de Blogger, trouvez dans le code la partie propre au header, souvent indiquée de :

/* Header
———————————————–
*/

et insérez le code suivant :

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

La preuve en image (avant et après) :

blogger navbar visibleblogger navbar invisible

Avant de supprimer la barre de navigation, pensez à enregistrer dans vos favoris l’adresse pour vous connecter à votre tableau de bord.

Enormément d’astuces sont disponibles sur le blog de Rodney SANKINKA parmi lesquelles :

templateperso

basdepage

Cette partie ne se limite pas qu’aux changements de thèmes puisque vous pourrez enrichir vos fonctionnalités.
Rodney propose également quelques astuces pour pouvoir :

4. Sélectionner un nouveau modèle

Cette partie vous permet d’utiliser les modèles proposés par Blogger. Compte tenu des conseils précédents, choisir un thème plus en adéquations avec vos envies et offrant plus de possibilités est préférable.

N’hésitez pas à nous faire part de vos remarques et suggestions pour enrichir ce billet!

Remarque : Pour ne pas perdre vos modifications, pensez à sauvegarder votre modèle actuel et vos widgets avant de remplacer ou modifier votre modèle (en cliquant sur « télécharger le modèle dans son intégralité », en haut de la page « modifier le code HTML »)!

ABONNEZ-VOUS à la mailing list, c'est GRATUIT !

Abonnez-vous à la mailing list et recevez plein d'infos intéressantes !

NB : Nos articles peuvent, éventuellement, contenir des liens affiliés, cela ne vous coûte rien et nous permet de récupérer une petite commission si le produit vous a séduit et que vous l'achetez. Notez que nous ne faisons des liens affiliés que vers des produits de grande qualité que nous avons déjà acheté et testé.

80 Réponse

  1. Emarceult
  2. Agencecrenn
  3. corinne
  4. jason
  5. jason
  6. evelyne
  7. evelyne
  8. Jeffanne
  9. miako
  10. Sandrine
  11. bob
  12. Nam Denogean
  13. tontonphil
  14. seb

Ajouter Commentaire

Avant de partir

Abonnez-vous à la mailing list et recevez plein d'infos intéressantes !