Comment corriger un template

obtenir ces boutons

Comment corriger un "template" ("modèle")

Pour corriger un template (modèle) avec la nouvelle interface de Blogger, il faut :
1) dans le menu principal, cliquer sur le nom du blog ;
2) dans la colonne de gauche, cliquer sur "Modèle" ;
3) cliquer sur "Modifier le code HTML" ;
4) corriger ;
5) cliquer sur "Aperçu" (IMPORTANT : cela permet non seulement de ne pas sauvegarder des modifications non désirées, mais encore d'effectuer plus rapidement des corrections) ;
6) fermer ;
7) corriger éventuellement (et retour au point 7 ci-dessus) ;
8) enregistrer seulement si cela convient.

Rappel : un lexique des principaux éléments constituant le blog, qui sont répertoriés dans la partie "mise en page" ("CSS") du "template" ("modèle") de blog, figure ici.

* * * * *
Depuis le 10 avril 2013, il n'est plus possible de modifier facilement la version HTML du template : en cliquant sur "Modèle" puis sur "Modifier le code HTML", le code peut ne plus s'afficher.

Pour y remédier, il faut :
- retourner ("Retour") à l'écran précédent ;
- recliquer sur "Modifier le code HTML" : le code apparaît.

* * * * *
Depuis le 10 avril 2013, il n'est plus possible d'afficher intégralement la version HTML du template : en cliquant sur "Modèle" puis sur "Modifier le code HTML", des parties du code sont cachées et accessibles uniquement en cliquant à gauche sur des petites flèches noires.

Pour visualiser tout le code il faut :
- cliquer dans le code ;
- cliquer simultanément sur les touches Ctrl + A pour sélectionner le code ;
- cliquer simultanément sur les touches Ctrl + C pour copier le texte intégral;
- cliquer simultanément sur les touches Ctrl + V pour coller le texte intégral.

Remarque : la case à cocher "Développer des modèles de gadgets" a été supprimée en haut de l'écran.

* * * * *
Le nouvel éditeur (interface) de Blogger corrige désormais, même en version HTML, le code des messages ... : il ajoute notamment des sauts de ligne après les balises ouvrantes (<div ...>, <p ...>).

Cela modifie la présentation. Mais, surtout, cela peut rendre inutilisable un code ajoutant un gadget dans un message.

Pour éviter cela, on peut supprimer la prise en compte des retours à la ligne, et ajouter à la place, des codes <br /> Il faudra préalablement, dans la colonne de droite, cliquer sur "Options", cocher la case devant "Utiliser la balise <br>" et enregistrer.

Si on ne le fait pas, on peut ajouter le code d'un gadget, mais sans le corriger, pour que l'éditeur ne modifie rien. Lors d'une modification ultérieure du message, il faudra utiliser le bloc-notes ou notepad et coller dans le message le code modifié.

* * * * *
Pour pouvoir modifier et tester un "template" ("modèle") sans perturber le blog en ligne, il est conseillé de créer (en quelques secondes) un blog avec un autre nom qui servira à tester les modifications : au "template" ("modèle") ou aux messages.

Quand ces modifications conviendront, il suffira de copier (Ctrl+A Ctrl+C) le template (modèle) ou le message modifié et de le coller (Ctrl+A Ctrl+V) dans le blog en ligne.


* * * * *
La mise en page du blog est déterminée par la partie centrale du template (modèle), écrite en langage "CSS" et comprise entre <b:skin><![CDATA[ et ]]></b:skin>.

Elle détermine la présentation des éléments du blog : couleurs, police de caractères, dimensions, ...

3 méthodes sont utilisables pour corriger cette partie centrale de mise en page (CSS) du template (modèle).

1) On peut tout d'abord corriger directement les instructions concernées.

2) On peut aussi ajouter des codes juste avant ]]></b:skin>. Comme les codes sont lus par l'ordinateur les uns à la suite des autres, les derniers codes seront appliqués même si des instructions contraires se trouvent avant.

3) On peut aussi corriger la mise en page d'un template en ajoutant des codes dans un gadget HTML/JavaScript. Les avantages de cette méthode et un exemple figurent sur cette page : placer un code css de mise en page dans un gadget HTML/JavaScript.

REMARQUE IMPORTANTE : on peut donner la priorité à l'exécution d'une instruction, même si une instruction postérieure contraire existe : il suffit d'ajouter !important à la fin de cette instruction. Exemple : font-weight: bold; devient : font-weight: bold !important;.

Si une instruction ne fonctionne pas, il faut toujours penser à ajouter !important à la fin de cette instruction.

* * * * *
Consulter également : Navigateurs : créer une compatibilité avec les navigateurs Internet Explorer et Firefox

* * * * *
Pour élargir facilement les colonnes (messages et colonne latérale) des "template" ("modèles") classiques de Blogger, consulter cette page.

* * * * *
Il est aussi possible d'UTILISER UN LOGICIEL QUI VA TESTER LES CORRECTIONS apportées à un blog : cliquer ici.

3 commentaires:

annnita__ a dit…

Bonjour,
J'ai un problème avec vos explications.
J'ai tout suivi à la lettre sauf que juste après avoir cliqué sur "enregistrer" le message d'erreur suivant s'affiche :
"fournissez le code d'erreur suivant :
bX-ke7ovd
ces informations nous permettront de déterminer la cause de votre problème et de le régler. Veuillez nous excuser pour les désagréments occasionnés."
Je suis un peu perdue, si vous pouviez m'aider ce serait super...
Merci d'avance
Anita

Meiser a dit…

Il est impossible de vous aider sans savoir quel code a été utilisé et dans quel but.

A priori, tous les codes proposés par ce site ont été testés et des exemples montrent qu'ils fonctionnent.


Troisième Décennie a dit…

Bonjour,
Je rencontre un énorme problème depuis une heure et demie environ.
Je suis sous le modèle Simple.
Simplement dès que je modifie le code, peu importe où et quoi dans le code, tous mes articles disparaissent et ma sidebar va à gauche.
La seule solution que j'ai trouvé pour faire réapparaître mes articles est de passer sous un modèle dynamique, puis de revenir à un modèle simple. Mais le problème persiste dès que je touche au code.
(ce beug d'affichage survient aussi bien sur Chrome que sur Explorer)

J'implore votre aide car je ne peux rien faire !

Merci par avance !