Que cache un modèle Blogger ? Quel est le lien avec l'éditeur d'éléments de page ? Et comment je m'y retrouve ?
N'ayez plus peur de plonger dans les entrailles de Blogger, lisez la suite...
Le modèle Blogger
La structure complète du blog se définit par un bloc d'information unique, le modèle, ou template.C'est le contenu du champ Modifier le modèle, dans la section Mise en Page > Modifier le code HTML.
Que trouve t'on dans un template ?
- les balises HTML usuelles de structure de page web (html, meta, body)
- les attributs d'apparence du blog, sous forme d'attributs CSS
- le contenu du blog, fait de sections et de widgets, sous forme de balises spéciales Blogger
<?xml version... ?> <!DOCTYPE html ...> <html ...> <head> <!-- Meta données --> <b:skin><![CDATA[/* /* CSS */ ]]></b:skin> </head> <body> <!-- Sections & widgets --> </body> </html>
L'éditeur d'éléments de page
La section Éléments de la page consiste en un éditeur graphique permettant simplement d'ajouter/supprimer des widgets dans la page, de les positionner dans les sections, et de les paramétrer.En revanche, si l'éditeur reproduit la mise en page réélle du blog, il n'est pas capable de modifications profondes de structures, comme l'ajout de colonnes dans une page par exemple.
C'est un moyen offert aux non-initiés de personnaliser leur page sans avoir à toucher une seule ligne de code.
Mais si vous lisez ces lignes, c'est qu'une ligne de code ne vous fait pas peur hein ?
Concrètement, l'éditeur ne fait "que" parcourir votre modèle, localiser les sections et widgets, et en reproduit la mise en page finale.
Ce qui veut dire que si vous modifiez la mise en page avec l'éditeur, vous modifiez votre modèle. Inversement, lorsque vous modifiez directement votre code HTML, l'éditeur répercute les modifications.
Comment s'y retrouver
Forcément, le code source HTML du modèle est moins visuel et moins sexy que l'éditeur d'éléments.
Pourtant, il va devenir votre ami dès que vous souhaiterez faire de vraies modifications sur votre blog.
A ce stade, il serait vraiment dommage de se passer d'un outil bien utile, l'inspecteur HTML. Son but est d'aider à localiser rapidement un élément dans une page web.
Utilisateurs de Firefox, je vous conseille d'installer l'extension Firebug, indispensable compagnon des développeurs web. Les utilisateurs d'Internet Explorer ne seront pas en reste avec la non moins indispensable DebugBar pour IE.
C'est installé ? Alors voyons la suite avec un cas pratique.
Supposons que je souhaite modifier la couleur de mon texte de pied de page, et que le modèle ne me le permet pas par la section Polices et couleurs.
- Ouvrez votre blog dans votre navigateur Internet
- Pointez votre outil d'inspection sur la zone concernée, ici le texte de pied de page
- L'inspecteur nous indique alors quels sont les attributs appliqués à notre élément, mais surtout leurs origines. L'exemple ci-dessus montre par exemple que la couleur du texte est #FEF6EE, et que cette définition provient de l'élément #footer .widget
- Pour changer la couleur de mon texte, je n'ai plus qu'à ouvrir le code HTML de mon modèle, trouvez la ligne déclarant cette couleur (le CTRL+F est votre ami), et la modifier.
Cette méthode peut être utilisée en outre pour localiser les widgets ou les sections de votre page. Repérez d'abord le nom de l'élément HTML, puis recherchez son nom dans le code du modèle.
Pensez que certains éléments ne sont affichés dans le modèle qu'en développant les modèles de gadgets.
flux RSS
3 commentaires:
Bonjour,
Merci beaucoup de toutes ces informations concernant la personnalisation de son blog.
Justement, je suis en train d'y réfléchir et en naviguant dans "discuter", j'ai lu votre réponse à peggy qui m'a emmené donc vers votre blog.
En tout cas, merci beaucoup de vos explications très pédagogiques...
excellent !!!
je viens de tester , ça facilite trop.
sur le gadget liste des derniers messages blogs,
il est possible de cocher l'affichage de la vignette du dernier billet publié. Seules les vignettes de blogs réalisés sur blogger s'affichent. Comment faire pour que les vignettes de toutes les plateformes s'affichent
Mon blog: http://aplemontphoto.blogspot.com
Enregistrer un commentaire