Blogger / Blogspot, Design, Tutoriaux

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 !

87 Comments

  1. Bonjour
    Je souhaite pas tout changer dans mon modèle, juste changer la couleur du fond. J’ai fait un essai de facon atisanal, mais j’obtiens une simple couleur.
    Je désirerai un motif, est-ce possible??????

  2. bonjour,
    je bataille pour mettre de la musique sur mon blog lorsque quelqu’un le visite, j’ai essayé avec deezer, je ne comprends rien, dans les gadgets, quand on veut insérer un gadget soi même, il refuse tout le temps les liens qu’on propose, dit que les caractères ne correspondent pas. pouvez vous me donner un ti coup de main ? et bravo pour l’aide c’est bien sympatoche

  3. Bonjour,
    Dans blogspot, je veux mettre une vidéo, non pas dans un message mais un truc genre gadget. La vidéo est déjà sur you tube.
    Je ne sais pas s’il existe un gadget de ce genre.

    Merci pour tous vos messages forts intéressants.

  4. Bonjour,

    Je suis en train de créer un blog à usage professionnel et je voudrais faire la présentation de mon entreprise dans une fenêtre qui s’ouvrirais en pop up en cliquant sur un bouton “about us”… c’est possible?

    Merci de votre réponse

    cdt

  5. Bonjour,

    je ne comprends pas, lorsque je vais dans paramètre, je n’ai pas “Ajouter un élément à la page” qui s’inscrit. Du coup je ne peux rien modifier, c’est normal ?

  6. bonjour,
    quand j’ajoute un nouveau message il s’affiche en haut,
    comment faire le contraire? c’est a dire que les nouveaux
    messages soient en bas, je sais que ce n’est pas logique
    mais j’ai besoin de le faire comme ca,merci

  7. re bonjour

    je me rends compte que les dernières questions
    restent sans réponses … y a t’il encore quelqu’un
    qui gère ce site ?

  8. Ping : blogaetan_test » Archive du blog » Fragments de blogosphère #1
  9. Ping : Blogaetan » Archive du blog » Fragments de blogosphère #1
  10. Olivier j’ai besoin de toi !! Help !!
    J’ai créer un blog de vide dressing et j’aimerai changer la mise en page, le fond et tout et tout !!! 😉
    Je sais pas comment faire, comment changer le code htlm. Peux tu m’aider ?
    N’hésite pas à m’envoyer un mail !!

    Bonne soirée !!

    Lucie

  11. bonjour,

    Est-il possible de supprimer les intitulés “message plus ancien” “message plus récent” dans un blog de blogger ;
    Merci beaucoup de votre aide

  12. bonjour,

    je voulais savoir si dans blogger on peut enlever les mentions “message récent et message ancien” qui apparaisent à chaque page et qui ne sont pas nécessaire quand il y a un menu
    (je suis novice c’est mon premier blog) merci

  13. Bonjour,

    J’aimerai pouvoir attribuer une image pour chaque libellé et ainsi retrouver les liens visuels vers les libellés dans la colonne de droite, pour illustrer de manière plus immédiate les rubriques ou catégories, est-ce possible ??
    Je débute…… ! Merci de votre réponse

    Audrey

  14. J’ai lu avec beaucoup de plaisir votre article,
    Je cherche à créer un blog sur blogger justement…qui pourrait être à ma portée. Cependant j’avoue que j’angoisse un peu pour le créer… simplement peut-êre parce qu’il je n’ai personne derrière moi à qui poser mes questions quand j’ai des doutes…
    En tout cas, merci, je vais lire et relire attentivement.

  15. bonjour je me demande si quelqun pouvait me venir en aide car je viens tout juste de me créer un blog et j’aimerais en modifier les aprametre mais JE NY COMPREND RIEN. tous ces codes ces ligne je ne sais pas par ou commencer …

  16. je vous présente mon blog exemple de ce qu’on peut changer!
    en fait on peut tout faire
    la seule chose que je n’ai pas réussit c’est une page statique d’acceuil

  17. Bonjour,

    Je cherche à restructurer mon blog façon “site” à l’image de votre blog “journal du blog”. Je sais comment insérer une barre de navigation… mais pas comment y mettre des articles.

    Mes essais me donnent : l’accès à une page que j’aurais créée qui n’affichera que le message unique (créé en même temps) après avoir cliquer sur l’onglet de la barre de navigation. Cette fonctionnailté existe sur Blogger mais se contente d’un seul message pour la page.

    Ce que je recherche comme solution. Faire comme vous, avoir les différents onglets qui redirigent vers la page où se trouvent l’ensemble des articles dédiés à l’onglet, les uns après les autres, date par date. Votre blog est LA SOLUTION recherchée !!!

    Je ne sais pas comment faire pour que l’article de ma page d’accueil puisse se retrouver dupliqué dans l’onglet concerné.

    Je ne sais pas non plus comment un autre article à une autre date puisse aussi suivre le précédent article et cela indéfinimment.

    Je ne souhaite qu’une chose : connaître la technique, la manipulation qui me permette de réussir ce que tout le monde semble réussir… sauf moi !

    Je n’ai pas trouvé la solution dans les blogs d’aide, aucune réponse ne m’est faite et aucun article dédié à cela ne semble exister.
    Suis-je vraiment le seul ne à pas comprendre ?

    Donc dans tous les cas, merci car mon projet est bloqué alors que je suis certain que la solution est si simple.

    Bien cordialement,

  18. Bonjour!

    j’aurais une question à vous poser car je m arrache les cheveux d ne pas savoir quoi faire…

    J ai reussi à agrandir les photos publliées sur mon blog mais j ai perdu toute la qualité… savez vous comment pourrais je améliorer cela?

    Ensuite , comme vous le verrez sur mon blog, j ai reussi à le personnaliser mais voilà : je suis partie sur une base de modele ” minima” et je me rend compte maintenant que le modele “minima lefty” serait beaucoup plus adapté à le présentation que je voulais donner de mes messages…

    Avez vous des solutions pour que je puisse passer à un modele lefty sans perdre mes modifications précédentes?

    Par avance Mille merci….
    Dominique

  19. hello ,,how to write another message on the new page?
    comment ecrire multi message sur mon nouvelle page dans mon blog?

    i can write only one message on that page !!!

  20. hello ,,how to write another message on the new page?
    comment ecrire multi message sur mon nouvelle page dans mon blog?

    i can write only one message on that page !!!

  21. Bonjour
    comment puis-je ajouter un espae 468 X 60 dans l’entete d blogger pour mettre des annonces
    Merci

  22. Greetings from Ohio! I’m bored to tears at work so I decided to check out your site on my iphone during lunch break. I really like the knowledge you provide here and can’t wait to take a look when I get home. I’m amazed at how fast your blog loaded on my cell phone .. I’m not even using WIFI, just 3G .. Anyhow, awesome blog!

  23. Bonjour,
    j’ai fais une fausse manipulation et cela m’a enlevé le nom de mon blog (qui était une photo) et je n’arrive plus a la remettre. Aidez moi!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Avant de partir

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