15 sept. 2010

(Blogger) Insérer sa signature en fin d'article

Signer tous vos messages est une façon de personnaliser votre blog et si la signature est jolie de l'égayer..

Pour ce faire, vous avez deux solutions :
  • au cas par cas, comme je l'ai expliqué dans cet article (vous trouverez aussi l'adresse d'un générateur en ligne)
  • automatiquement, à chaque article, en passant pas le CSS :
 Vous allez dans Présentation > Modifier le code HTML, vous recherchez la ligne
.post-body
et vous la complétez avec l'adresse de l'image
.post-body {background:url(adresse de l'image);background-repeat:no-repeat;background-position:right bottom;padding-bottom:100px;}
Dans ce cas précis, l'image a été positionnée en bas à droite - background-position:right bottom - et on a créé une marge en bas - padding-bottom:100px - de la hauteur de l'image afin qu'elle n'empiète pas sur le texte.

12 commentaires:

  1. Bonjour AnneK

    Depuis le temps que je lis tes articles ! j'ai honte de n'avoir jamais poster aucun commentaire !

    Alors, un Enorme Merci pour tous tes articles superbement bien détaillés...

    Aujourd'hui, il est vrai, j'ai besoin de te poser la question à savoir sur cet article, où pourrai-je à ton avis le mettre ds le css du thème "Abundant" sous over-blog ?

    Je te remercie infiniment pr ton aide précieuse
    Taous
    Mon blog est celui-ci

    http://www.saveurspartageesdetaous.com

    RépondreSupprimer
  2. Bonjour Taous :)
    1/ ce n'est pas grave :)
    2/ comme tu as modifié ton design par Personnaliser mon thème, il est préférable que tu ne touches pas au CSS.
    Tu vas rajouter en HTML de ton entête, là où tu as mis ta bannière :
    < style type="text/css" >
    .contenuArticle, .pageContent, .extraitArticle {background:url(adresse de l'image);background-repeat:no-repeat;background-position:right bottom;padding-bottom:100px;}< /style >

    je t'ai mis ce code en commentaire sur ton blog.

    RépondreSupprimer
  3. Salut Annak !

    Merci beaucoup pour ta réponse ! Comme d'hab tu es d'une aide précieuse et jz t'en remercie infiniment

    Vi vi j'ai vu ton msg sur le blog ;-)

    Je vais de ce pas mettre en pratique ce que tu m'as dis...

    Cependant,j'aurai voulu savoir si par hasard tu pourrais me dire comment faire pr élargir un chouia le centre du blog la partie de l'article si tu peux bien entendu :-)
    Au plaisir de te lire

    RépondreSupprimer
  4. Bonjour Taous :) bien ta signature sur ton blog.
    Alors pour élargir ta colonne d'articles :
    Actuellement, tu as
    #cl_1_0 {float: left; width: 618px; padding: 0 15px; padding-top: 25px; margin-top: 20px;}
    #cl_1_1 {float: left; width: 310px; padding: 0 10px; padding-top: 25px;}

    #cl_1_0 c'est la colonne d'articles
    #cl_1_1 c'est la colonne de modules
    Tu modifies les largeurs
    width:618px et width:310px
    mais le total doit rester le même 928px (618px+310px)
    Ensuite, toujours en HTML de l'entête, tu rajoutes
    < style type="text/css" >
    #cl_1_0 {float: left; width: 638px; padding: 0 15px; padding-top: 25px; margin-top: 20px;}
    #cl_1_1 {float: left; width: 290px; padding: 0 10px; padding-top: 25px;}< /style >
    Dans mon exemple, j'ai rajouté 20px à la colonne de droite et enlevé 20px à la colonne de gauche.

    RépondreSupprimer
  5. Merci bcp AnnaK ! Si tu savais combien j'ai bidouillé ces tailles sans trouver celle qui conviennent ! Je n'ai ps pensé à soustraire !!
    Bon...Il ne reste qu'à mettre en pratique une nouvelle fois tes consignes :-)

    Muchas gracias AnnaK !

    Hé tu sais pr la signature, celle que je voulais mettre n'était ps transparente, c'etait bien moche, ensuite je l'ai rendu le fond transparent mais là aussi l'écriture n'était jolie jolie et pr finir j'ai pris un peu du vert de mon blog pr créer un fond identique et là j'ai crée la signature et bien maintenant elle se confond ds le décor !

    Et désolé d'avoir squatter ce post pr poser une question qui n'avait rien avoir avec le sujet principal :(

    RépondreSupprimer
  6. Taous, j'ai aussi du mal à faire des gifs transparents avec des écrits : ceux-ci ne sont jamais très nets. J'utilise la même astuce que toi ;)
    Ce n'est pas grave que la question ne corresponde pas à l'article :)

    RépondreSupprimer
  7. Bonjour,

    Je voulais savoir ce que l'on entend par adresse ? Je voudrais insérer une petite photo de l'auteur sous chaque post. Est-ce qu'il faut que je fasse cette manipulation et si oui comment trouver l'adresse d'une photo qui est sur mon disque dur ?

    Merci !

    RépondreSupprimer
  8. Bonjour Antoine :)
    Pour qu'une image soit visible sur le Net, il faut qu'elle soit hébergée sur le Net. Actuellement, elle est sur ton disque dur et toi seul peut voir ce qui est sur ton disque dur.
    Quand tu rédiges un article et veux rajouter une image, tu dois cliquer sur la petite image dans la barre de menu de l'éditeur. Ensuite, tu importes tes images, elles seront hébergées sur Picasa. Une adresse d'image se présente sous cette forme :
    http://nsm04.casimages.com/img/2010/10/02//101002043239249686856298.png
    Regarde l'article sur la gestion des photos (http://les-nouvelles-ficelles-d-annak.blogspot.com/2010/08/blogger-gerer-les-photos.html), ça pourra t'aider

    RépondreSupprimer
  9. Bonsoir, j'ai un souci avec la signature, qui s'ajoute sous les images dans mes articles, et on voit un bout apparaître derrière l'image. En plus de s'afficher en bas d'article comme il est prévu.
    Comment faire pour que la signature ne soit pas également sous mes photos dans l'article ??
    Un exemple ici :
    http://lacompagniesansgluten.blogspot.com/2011/02/lhomme-qui-entendu-lappel-du-legume-ou.html

    Merci beaucoup pour votre réponse.

    RépondreSupprimer
  10. hello je l'ai fait mais ça ne marche tjrs pas..help!

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)