Je m'en sers systématiquement depuis que j'utilise le nouvel éditeur de Blogger, mais ces bidouilles peuvent être utiles à tous.
- Si vous avez trop de sauts de ligne, il faut chercher dans l'onglet
"Modifier le code HTML" s'il n'y a pas des <br /> en trop...
Pour obtenir un saut de ligne, l'éditeur Blogger génère deux <br /> à la suite dans le code html (un seul <br /> correspond à un retour à la ligne). De temps en temps, il en génère trop, provoquant ainsi des sauts de ligne trop importants. On ne les voit pas toujours dans l'onglet Rédiger, par contre ils apparaissent à la publication et dans l'Aperçu. Quelques fois il faut les chercher un peu car ils peuvent être séparés par des éléments tels que </a> ou </div>...
De temps en temps, l'éditeur génère aussi des (espace insécable) qui peuvent également créer un saut de ligne après un <br /> alors qu'on ne voudrait qu'un retour à la ligne simple... - Si vous trouvez la police "Petit" de l'éditeur trop petite, il faut chercher dans le code html la fonction <span style="font-size: x-small;">texte</span> et remplacer x-small par 85% ou la valeur que vous trouverez correcte
Les autres polices proposées correspondent dans le code html à xx-small pour "La plus petite", small pour la police normale, large pour "Grand", et x-large pour "La plus grande", à remplacer de la même manière par une autre valeur si celle-ci ne vous convient pas. - Pour éviter que vos images insérées en "grand format" ne débordent de la colonne centrale, il faut supprimer les marges générées par l'éditeur.
Rien à voir avec l'article, c'est juste pour montrer le décalage...
(cette photo était publiée dans cet article)
(cette photo était publiée dans cet article)
D'abord le résultat cherché :
L'image "rentre" dans la colonne et, au passage, j'ai supprimé le lien
(l'image n'est plus "cliquable")
(l'image n'est plus "cliquable")
Ensuite c'est un peu barbare mais c'est juste parce que les adresses des images générées par Blogger sont à rallonge.
La syntaxe de base est toute simple...
<a href="url du lien sur l'image"><img src="adresse de l'image"></a>
Code html qu'insère Blogger quand vous téléchargez une image...
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMJ1TduJhwaN_aRddJmMdfT4RCdgAUkVuioesj00tt7hONArWozJufZ0FOin9ynwlDAZYNaH8VlQ1pRUTZJ6QRG9hsqKNixqjUXUNHEuexBVEaJL-5x2KbRUkdBL11gL8OeuAzh1lD5jo/s1600-h/cornerview2009-09-30_white05.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMJ1TduJhwaN_aRddJmMdfT4RCdgAUkVuioesj00tt7hONArWozJufZ0FOin9ynwlDAZYNaH8VlQ1pRUTZJ6QRG9hsqKNixqjUXUNHEuexBVEaJL-5x2KbRUkdBL11gL8OeuAzh1lD5jo/s400/cornerview2009-09-30_white05.jpg" /></a><br /></div>
En bleu, la fonction pour insérer une image dans la page avec l'adresse de l'image redimensionnée (générée par Blogger)
En jaune, la fonction pour faire un lien sur une image avec l'url vers laquelle pointe l'image (par défaut l'image en taille réelle avec toujours le nom à rallonge généré par Blogger)
Les marges à corriger sont à l'intérieur de la fonction lien <a href=...> : il faut remplacer style="margin-left: 1em; margin-right: 1em;" par style="margin:0;"
L'astuce en plus...
Si vous voulez supprimer le lien sur l'image, il suffit de supprimer toute la partie de code en jaune (sans oublier le </a>)
Désolée pour cet article un peu (beaucoup) rébarbatif, j'espère que c'est un peu clair quand même.
Et c'est promis, bientôt je re-parle des lectures préférées de mes enfants ou je vous donne quelques sublimes recettes pour les pas douées comme moi...
Lire aussi :
Un nouvel éditeur de message dans Blogger
Lire la suite... (enfin dans Blogger)
Trouver un texte dans une page web (ou un code html)
(tous mes tutoriels et mes bidouilles sont dans l'index "informatique")
Tu l'as vu chez moi l'image grand format qui déborde de la colonne ? ;-)
RépondreSupprimerEn tous cas, j'ai rectifié le tir grâce à ta manip' !
Merci !
PS : dis-moi ce que tu penses de mes fonds colorés. Il me reste un problème de décalage entre le back-ground de l'en-tête et celui de mes colonnes.
RépondreSupprimerEt puis pour mes side-bar, je ne peux pas mettre un padding supérieur à 2, sinon ma colonne de droite se retrouve de nouveau en bas !
@Céline : même pas fini de modifier mon article que tu l'as déjà lu ;-)
RépondreSupprimerC'est pour toi que je l'ai écrit en vrai, parce que je sais que j'ai au moins une lectrice pour ce genre d'article un peu, comment dire?...
un peu indigeste ... ben oui mais c'est gentil d'essayer de trouver des solutions et de faire preuve de pédagogie
RépondreSupprimerenfin là il faudra que je regarde de plus près
Merci Myrtille
Bon, pour les images, c'est fait! Mais est ce que tu crois que cette histoire de marge, ça marche aussi pour les insertions "youtube"? A chaue fois elles apparaissent tronquer sur la droite dans mon blogger...
RépondreSupprimer@Kiki&Zaza : par défaut la largeur du lecteur exportable de YouTube est de 425 alors que celle de ton blog doit être de 400.
RépondreSupprimerA droite de l'endroit où tu copies le code dans YouTube, tu as une petite icône qui te permet de personnaliser le lecteur et en particulier de choisir sa largeur.
Tu peux aussi modifier les dimensions directement dans le code html, mais attention de garder les proportions sinon ton image sera déformée...
@Didi : pas très sexy comme article je le reconnais ;-)
Merci! Je vais voir si j'arrive à bidouiller!! :-D
RépondreSupprimerFaut vraiment que je m'y coll.
RépondreSupprimerCela ne doit pas être SI compliqué ;-}
Coll? Pffffffffffffff COLLE!!
RépondreSupprimerTu es une accro de l'informatique????
RépondreSupprimer@Kiki & Zaza : N'hésite pas à poser des questions
RépondreSupprimer@Alice : Il ne faut pas se laisser effrayer par le code html, Céline l'a dit aussi "le HTML? Faaaaacile!", et certaines choses sont effectivement simples.
Lis aussi son article "En apprentissage de Webmaîtresse"
@Chrys : J'aime bien comprendre et j'aime bien chercher (et trouver surtout), alors en un sens oui, je suis sûrement accro à l'informatique. Et puis ça fait travailler les neurones ;-)
Bravo pour ton article, très clair !
RépondreSupprimerJ'ai un blog spécialisé dans tout ça
http://faireunblog.over-blog.com/
Si je peux te donner d'autres trucs, ce sera avec plaisir.
Bonne visite !
peut tu me re-expliquer comment faire en sorte que l'image ne soit pas cliquable ?
RépondreSupprimerMerci
en me donnant un exemple du code avant et apres ?
@esperance31 : est ce que ça répond à ta question?
RépondreSupprimerhttp://lestrucsdemyrtille.blogspot.com/2009/12/supprimer-ou-modifier-un-lien-sur-une.html
Les sauts de lignes c'est atroce !!! Souvent, je perds un temps fou à tout rectifier ! Merci de l'astuce :-)
RépondreSupprimerDis-moi Myrtille sais tu comment il faut faire pour mettre de nouvelles polices ? j'ai essayé par le code HTML avec Google Font Directory, sans succes !
RépondreSupprimer