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
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.
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.
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
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 :
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.
Pour vous donner une meilleure idée, quelques exemples de thèmes disponibles sur ces blogs :
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) :
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 :
- une personnalisation plus poussée de votre template comme sur l’image ci-dessous
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 :
- rajouter les articles similaires en fin de billet
- afficher la liste de vos meilleurs commentateurs
- ajouter un nuage de tags dans votre barre latérale
- enlever l’attribut no-follow sur vos trackbacks
- programmer la publication d’un article à l’avance
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”)!
Dernière mise à jour : Samedi 26.04
Vous avez aimé cet article :
abonnez-vous au flux RSS
!
Loading ...
damospace le 26 avril 2008:
Bravo pour ce billet très complet. Je voudrais juste rajouter deux choses :
1) Personnellement, je suis contre le fait de supprimer la barre de navigation. Je trouve que ce n’est pas très correct par rapport à Blogger qui nous offre un très bon service gratuit et sans publicité.
2) Pour les changements de modèle, pensez à sauvegarder votre modèle actuel et vos widgets avant de remplacer ou modifier votre modèle !
Aurelien le 26 avril 2008:
Merci pour ton commentaire.
Enlever la barre de navigation est, je pense, un choix animé par le désir de casser le “format” Blogger afin d’apporter un design non standardisé par les plate-forme d’hébergement de blogs (bien que nous verrons, dans les prochains billets de présentation des autres hébergeurs, que Blogger a fait de gros efforts dans ce sens). Il est vrai que la barre de navigation peut très bien se fondre dans le design, je trouve par ailleurs que ton blog en est un parfait exemple.
Je vais éditer mon billet pour apporter les précisions de ton commentaire, qui éviteront de perdre les personnalisations en cas de test de thème.
Matthieu M. le 26 avril 2008:
J’ignorais que l’on pouvait à ce point modifier son design sous blogger, bravo pour ce très bon article !
Seb le 27 avril 2008:
Très bon article merci, même si je partage l’avis de Damospace sur la barre de navigation.
Aurelien le 27 avril 2008:
@Seb : merci, je voulais juste pousser la personnalisation sous Blogger au maximum
annak le 3 mai 2008:
Bonjour
je te réponds ici, impossible par mail.
Je te prépare la suite.
Bon courage pour les réparations
Aurelien le 3 mai 2008:
@AnnaK :Merci
DarkCandellera le 13 mai 2008:
Merci pour ce billet ! En tant qu’utilisatrice de Blogger, je suis bien contente d’avoir découvert toutes ces fonctionnalités ! (surtout pour la mise en page du blog car je ne savais pas qu’on pouvait faire tout ça !)
Aurelien le 13 mai 2008:
@DarkCandellera : De rien
Flo le 14 mai 2008:
Bonjour et merci pour toutes ces infos.
Une question : y a t’il une possiblité pour avoir un outil de stat plus efficace ?
Aurelien le 15 mai 2008:
@Flo : pour avoir plus d’informations sur les statistiques, nous avons fait un billet il y a quelques temps dessus : http://www.lejournaldublog.com.....-gratuits/
(avec la présentation de plusieurs outils que tu pourras intégrer dans ton blog Blogger)
Flo le 21 mai 2008:
Merci !
Flo
De nombreux thèmes gratuits pour Blogger : Le Journal du Blog le 22 mai 2008:
[...] vous avoir conseillé les thèmes de BlogCrowds et de Geckoandfly lors de notre billet sur la personnalisation de votre blog sous Blogger, nous revenons aujourd’hui avec deux nouvelles sélections de thèmes. La première est faite [...]
AR le 23 mai 2008:
Merci de nous apprendre à supprimer la barre de navigation !
Aurelien le 23 mai 2008:
@AR : de rien
Fab le 29 mai 2008:
bonjour, merci pour tes infos. Je sors un peu du sujet mais j’ai besoin de ton aide car j’ai partagé une vidéo (seulement la vidéo, ce n’est pas un lien de page où se trouve la vidéo) de youtube sur mon blog, mais cette vidéo s’affiche en première page (billets)alors que je ne voulais pas ça. Il n’y a pas moyen de la “bouger” et la mettre ailleurs ? (sur le coté par exemple dans un nouvel “élément de page”). Et si je veux la supprimer je fais comment ?
J’ai tenter de changer l’ordre chronologique de ma première page (dans “messages du blog” ou billets) en pensant que la vidéo serait déplacée aussi (du moins récent au plus récent) mais elle ne bouge pas !
Tu peux m’aider stp ? Merci beaucoup.
damospace le 29 mai 2008:
@Fab :
Pour enlever une vidéo d’un billet, tu peux d’abord te connecter sur le tableau de bord Blogger, pour ensuite choisir la modification du billet concerné. Maintenant, tu peux cliquer sur modifier html pour voir le code html de la vidéo. Là, il suffit d’effacer le code html pour enlever la vidéo, ou de faire un couper/coller si tu veux la mettre ailleurs.
Tu devrais même pouvoir mettre ce code html dans un élément de page, mais celui-ci devrait être assez large… Attention cependant à ne pas surcharger ton blog
Fab le 29 mai 2008:
merci damospace, …..mais si je te dis que je ne comprend pas le code HTML !
C’est mal barré je sais. Et donc, je n’arrive pas à voir où elle se situe cette vidéo dans le code. Un exemple de code vidéo à me montrer ? merci
damospace le 29 mai 2008:
Du code hmtl, c’est généralement avec des parenthèses carrés “” et après, il a y des mentions genre object width etc.
Efface tout simplement toute la partie entre le premier “”.
Bien sûr, il ne faut jamais modifier ou effacer le code html ailleurs que dans un billet, si tu ne t’y connais pas !
Aurelien le 29 mai 2008:
@Fab : le code de ta vidéo youtube doit normalement commencer par :
< *object width="425" height="355"> (avec des chiffres peut-être différents cela dit)
et finir par
< */embed>
sans les “*”
si tu nous laisse l’adresse de ton blog, on pourra peut-être mieux te renseigner où chercher le code pour l’enlever ;).
Beljalex le 2 juin 2008:
Bonjour,
Tes conseils sont super intéressants et instructifs. Peut-être que je fabule mais j’aimerais que l’affichage des messages archivés soit par libellés et non par dates. Est-ce possible? J’ai horreur des blogs où nous n’avons aucune idée des sujets qui ont été traités pendant parfois des années. Et, je ne connais absolument rien à la programmation par code HTML.
Merci et bravo.
Beljalex
Aurelien le 3 juin 2008:
@Beljalex : j’ai regardé dans les options, et ce n’est pas proposé. Mis à part de tomber sur un plugin le proposant (que je n’ai pas trouvé :/), je ne vois pas comment faire. Désolé.
damospace le 3 juin 2008:
@Beljalex :
Blogger permet par contre d’afficher les libellés d’un blog (par exemple dans une sidebar) et en cliquant dessus, on peut faire afficher tous les messages avec les libellés concernés.
Beljalex le 3 juin 2008:
Merci à Aurélien et Damospace pour vos réponses. Je vais vérifier pour une «sidebar».
Beljalex
Ulysse le 6 juin 2008:
Merci pour ces conseils et le temps que tu y passes. J’ai un problème sur blogspot : c’est tout bête mais peut-on créer des liens en cliquant sur un nom ou une ligne, comme sur la plupart des sites?
Comment faire? Ou en cliqunat sur une image?
Aurelien le 6 juin 2008:
@Ulysse : Pour faire un lien vers un mot ou un bout de phrase, il faut sélectionner ce que tu veux mettre en lien et cliquer (à partir de la fenêtre “rédiger” de ton message) sur l’icône à gauche des icônes d’alignement de texte (et donc à droite de l’icône pour changer la couleur du texte). Une fenêtre apparaîtra alors en pop-up et tu pourras indiquer le lien que tu souhaites mettre sur ton mot ou ta phrase.
Pour une image, c’est la même chose, tu sélectionnes l’image, et tu cliques sur la même icône.
J’espère que mes explications sont assez claires. Si tu as d’autres questions, n’hésites pas.
Florence le 24 juin 2008:
Bonour,
Y a t’il un moyen de mettre des images dans un commentaire ?
Merci pour votre réponse
Florence le 24 juin 2008:
Comment faire pour avoir plus des 10 adresses prévues de notification de nouveaux messages et commentaires dans Paramètres > e-mail > Blogsend ?
Crames21 le 26 juillet 2008:
Bonsoir,
Je commence à comprendre le système grâce à vos excellents conseils et suggestions.
Sur mon blog j’ai 4 billets, dont l’un occupe plusieurs pages (trop long). Je désir savoir s’il est possible d’introduire au bon endroit, un code genre : lire la suite…
D’autre part, j’ai placé 4 boutons juste en dessous du titre principal avec description chaque bouton représente le titre d’un billet. Comment établir un lien?
Enfin, je souhaite pouvoir donner la possibilité à mais visiteurs d’agrandir des dessins humoristiques de mon cru. Existe-t’il un moyen?
Grand merci d’avance et bonne soirée
Aurelien le 26 juillet 2008:
@Florence : je n’avais pas vu tes questions du mois dernier, vraiment désolé.
Je ne connais pas de moyen de mettre une image dans un commentaire (sur blogger). Si tu parles des avatars qui sont présents dans les commentaires sur ce blog, c’est un plugin (pour Wordpress) qui n’existe pas sur Blogger, à ma connaissance.
Pour les notifications des billets tu as un flux Atom (qui est lisible via Firefox, Thunderbird, et des lecteurs/agréagateurs de flux comme netvibes ou encore Google Reader). L’adresse pour ton blog est : http://instantsdevoyages.blogs.....ts/default
Sinon tu peux faire une liste de diffusion (via gmail ou autres), inscrire toutes les personnes qui doivent recevoir les notifications et mettre cette adresse parmi les 10 adresses possibles.
@Crames21 : Bonjour à toi, et merci pour les compliments, ça fait toujours plaisir!
Pour ton billet très long, tu peux le faire en plusieurs parties, et mettre en fin de chaque billet : Lire la partie 2 (ou alors “le titre du billet - partie 2), Lire la partie , etc… avec les liens des urls de ces billets (en écrivant de la fin au début pour les avoir dans l’ordre sur ton blog).
Pour tes boutons, il faut aller dans Paramètres -> Mise en Page ->Modifier le code HTML.
Normalement ton bouton s’affiche si tu as tapé un code du type (sans les espaces avant les /):
< img src=”http://adresse-de-ton-blog.blogspot.com/bouton1.jpg”>
Pour mettre un lien, il te suffira de mettre < a href=”http://le-lien-que-tu-souhaites.com”>< img src=”http://adresse-de-ton-bouton/bouton1.jpg>< /a> (toujours sans les espaces avant les “/” ). En mettant l’adresse des tes libellés à la place de “adresse-de-ton-choix.com” bien sûr.
Pour agrandir les images, je ne vois qu’une “astuce”, à savoir mettre l’image sur ton blog comme tu fais actuellement, et qu’elle soit liées à la même image en plus grand, ainsi, en cliquant dessus, tes visiteurs verront mieux l’image. Il te faudra donc hébérgées deux version de l’image sur le net, une pour l’affichage direct dans ton billet, et une autre plus grande. Pour le lien, il faut procéder comme pour les boutons, mais directement depuis l’éditeur HTML de ton billet. Ou alors, mais je n’ai pas testé, utiliser le diaporama des photos (Paramètres toujours -> Mise en page -> éléments de la page -> Ajouter un élément à la page (dans le menu latéral). En proposant les images en grand, il y a peut-être moyen de pouvoir les afficher un peu mieux… Enfin je n’ai pas testé, mais c’est une piste à explorer.
Crames21 le 27 juillet 2008:
Merci pour avoir répondu si rapidement à mes demandes.
J’ai bien noté & sauvegarder vos informations qui doivent être pertinentes pour un connaisseur en html, ce que je suis loin d’être, comme en anglais d’ailleurs!
Alors je tâtonne, tourne en rond, pique des crises et finalement redémarre comme en 40, la fleur au fusil !
En deux mots, je comprend vite, mais il faut m’expliquer longtemps et comme je suis retraité, je passe mes journées et souvent mes nuits à tenter de fabriquer un blog qui ressemble à un de ces sites agréables à parcourir et qui, sait on jamais, pourrait arrondir légèrement mes fins de mois avec AdSense. Merci encore et bon dimanche. Marc
Maramélie le 27 juillet 2008:
Je suis tombée sur cette page très instructive, merci pour tous ces conseils
Moi je suis en recherche d’une manière de mettre un forum ou un chat sur mon Blogger…
As tu une astuce Aurelien ?
Merci d’avance en tout cas.