TUTOS   DIY   COUTURE   WEB   DÉCO   LIFE   LOVE   CONTACT

8 mai 2013

Leçons de Blogdesign pour les nulles : Insérer une image de signature automatique dans les messages Blogger

( Et les nulles )



Aujourd'hui, c'est férié, alors je ne me foule pas trop trop non plus et je vous montre une petite manip toute simple pour insérer dans vos messages Blogger une image de signature automatique, comme à la fin de mes messages ou il y a la petite image Crafty B.
Vous allez voir, c'est très très facile et très très rapide (Ben oui, c'est férie, je vous ménage un petit peu quand même) Et ça permets de gagner quelques minutes à chaque création de post. Quand je vois le temps que ça prends, tenir un blog, je me dis que gagner quelques minutes, c'est bien. Surtout qu'à chaque fois, EVIDEMMENT, je fais ça avant de partir bosser, et je finis TOUJOURS à la dernière minute ( en mode Top chef, quand je clique sur "Publier" je suis pile poil dans les temps pour partir bosser illico presto si je veux pas être à la bourre)


Dans le tableau de bord Blogger, allez dans paramètres > Publications et commentaires. A côté de "Modèle de message" cliquez sur "Ajouter" :




Un champ de texte s'affiche alors. C'est là qu'on va s'amuser :





Voilà le code que nous allons insérer dans ce champ : 



<br />
<br />
<br />
<br />
<br />
<br />
<div align= right><a href="http://urldevotreimage.jpg"> <img class='nopin' img border="0" src="http://urldevotreimage.jpg" /></a></div>



Les modifications à apporter à ce code :

- Les balises  <br /> sont des sauts de lignes ; ça nous permets de ne pas avoir l'image collée en haut du post quand on crée un nouveau message. Vous pouvez les enlever sans problèmes.

- Remplacez les champs en rouge par l'URL de l'image à utiliser ( Pour connaître l'url exact de votre image, hébergez-là par exemple sur Picasa Web, affichez-là puis clic droit >" copier l'adresse / l'url de l'image")

- J'ai choisi de positionner mon image à droite du message. Si vous voulez que votre image soit à gauche, ou centrée, remplacez "right" par "left" ou "center"

- Le code img class='nopin' n'est utile QUE si vous avez fait en sorte que le bouton Pinterest apparaisse sur vos image quand on passe la souris dessus ET que vous ne voulez pas qu'il apparaisse sur cette image là en particulier. 
Si vous n'avez pas mis cette fonctionnalité sur votre blog, ou que vous voulez que le logo apparaisse également sur cette image, effacez tout simplement la ligne en bleu (prenez garde à garder le " < " du début !)
Une fois cette ligne effacée votre code doit ressembler à ça :



<br />
<div align= right><a href="http://urldevotreimage.jpg"> <img border="0" src="http://urldevotreimage.jpg" /></a></div>



Une fois toutes vos modifications apportées, cliquez sur "enregistrer les paramètres" 





 Si un message d'erreur s'affiche, vérifiez que vos balises sont bien toutes fermées (ce qui commence par < doit finir par > ; que vous avez bien le </a> et le </div> à la fin; que les guillemets sont fermés)


Puis cliquez sur "nouveau post" : Tadaaam ! Votre image est insérée automatiquement !



Vous pouvez également insérer dans le champ de modèle de message un début de message, par exemple "Bonjour, aujourd'hui je vous parle de" Ou n'importe quoi d'autre, si vous commencez toujours vos message de la même manière.







24 commentaires:

  1. Super je viens de faire la manip :) On verra pour les futurs billets mais il ne se met donc pas automatiquement sur les précédents ?

    merci ma belle pour toutes tes astuces, tkt bientot j'aurais surment d'autres demandes !!! lol

    RépondreSupprimer
  2. Avec cette manip il ne se met pas sur les précédents billets, juste les futurs...
    Peut-être qu'il existe une astuce pour les anciens (autre que rajouter l'image manuellement, bref, relou. Ca va un peu plus vite en faisant un copié collé du code en mode html des messages, mais faut quand meme se taper l'ouverture de tous les anciens quoi) mais je la connais pas encore... Mais si jamais je trouve compte sur moi pour te prévenir !

    RépondreSupprimer
    Réponses
    1. Non mais c'est déja énorme ce que tu as fais pour m'aider !!! J'ai hate de voir si ca fonctionne en tout cas un grand merci bisous <3

      Supprimer
  3. Mais j'adore ton blog t'es une héroine pour moi !!! :D

    RépondreSupprimer
  4. Coucou, moi aussi je viens de commencer sur Blogger. J'ai fais ton montage et j'ai tout suivie mais le problème sais que j'ai un encadrement avec ma signature. Je comprend pas

    RépondreSupprimer
    Réponses
    1. si tu as fait ta signature sur un fond transparent, c'est "normal" : blogger, pour une raison que j'ignore, a cessé du jour au lendemain de prendre en charge les fonds transparents d'ou un encadrement. La solution, c'est d'héberger ton image sur un hébergeur grtuit (tape "heberger images gratuit" dans google) et d'insérer le lien de cette image.

      Supprimer
  5. bonsoir. merci pour ce tuto très bien expliqué. Même en hébergeant ma signature sur gratuit ma signature reste encadrée et ce n'est pas top. si vous avez une solution à cela je suis preneuse. merci et bonne soirée

    RépondreSupprimer
  6. Merci pour ton tuto, qui est super bien expliqué ! Moi qui cherchais depuis un bail comment mettre en place une signature, grâce à toi c'est chose faite :D

    RépondreSupprimer
  7. Bonjour,
    Si je comprends bien votre problème, vous voudriez que l’image de fond (grandmere.jpg ?) se redimensionne automatiquement ?
    Si oui, vous devriez jeter un coup d’oeil du côté de la propriété css3 background-size:cover. Je pense que cela doit répondre à vos attentes.
    9Apps VidMate Mobdro

    RépondreSupprimer
  8. I found it more informative and Thanks for blog post sharing.

    RépondreSupprimer
  9. Amazing information providing by your article, thank you so much for taking the time to share a wonderful article.
    free fire for pc jiofi.local.html

    RépondreSupprimer
  10. Merci pour ton tuto, qui est super bien expliqué ! Moi qui cherchais depuis un bail comment mettre en place une signature, grâce à toi c'est chose faite shareit vidmate app

    RépondreSupprimer
  11. Thank you for sharing this valuable information.. video streaming

    RépondreSupprimer