Comment ajouter et personnaliser les citations (Blockquotes) dans Blogger

L'éditeur de messages de Blogger n'est pas trop mal fichu et nous permet d'enrichir nos articles en ajoutant très simplement des balises HTML et du CSS.
Dans cet article je vais vous montrer comment ajouter des citations dans vos messages et comment contrôler et personnaliser leurs affichage avec la classe CSS blockquote.

Comment ajouter des citations

Les citations peuvent être n'importe quoi : un extrait d'un livre/roman/journal/blog/télé.... ou du code, des images...

Pour ajouter une citation dans le corps d'un message, il suffit de cliquer sur le bouton citation et d'ajouter ce que vous voulez : du texte simple ou du code HTML/Javascript/CSS.
Vous pouvez aussi sélectionner un texte et ensuite cliquer sur le bouton citation et le texte sélectionné sera transformé en citation.

Comment Blogger crée les citations

C'est très simple il ajoute une balise ouvrante <blockquote> et une balise fermante </blockquote> à la fin et au début du contenu cité.

Au final ça donne ceci : <blockquote>blabla bla bla bla bla bla bla <blockquote>

Comment personnaliser vos citations

C'est trop trop simple de personnaliser les citations, il suffit d'aller dans Présentation -> Modifier le code HTML et d'ajouter une classe CSS nommée blockquote juste avant ]]></b:skin>
Vos anciennes et nouvelles citations auront un nouveau look.

Voici quelques exemples de styles que vous pouvez copier-coller dans votre blog

Exemple 1

Code : blockquote {
    background:#F9F9F9;
    border-left:1px solid #CCC;
    border-top:1px solid #CCC;
    margin:10px;
    padding:10px;
}
Résultats :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales consectetur dictum. Duis ac massa nulla, eu tincidunt sapien. Proin odio eros, rhoncus quis volutpat eget, porta sed est. Nulla eleifend cursus mi et ornare. Etiam quis ante in est egestas vestibulum.

Exemple 2

Code : blockquote {
    background:#F9F9F9;
    border:1px solid #CCC;
    margin:10px 0;
    padding:10px;
}
Résultats :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales consectetur dictum. Duis ac massa nulla, eu tincidunt sapien. Proin odio eros, rhoncus quis volutpat eget, porta sed est. Nulla eleifend cursus mi et ornare. Etiam quis ante in est egestas vestibulum.

Exemple 3

Code : blockquote {
  background: url("http://2.bp.blogspot.com/_8GxSJXcDIwk/S-6V1W5URPI/AAAAAAAABJs/AIsfbfDlWPA/s1600/pullquote.gif") no-repeat scroll 0 0 transparent;
  font: italic 13px georgia;
  margin: 1em 20px 0;
  padding: 10px 5px 15px 60px;
  width: 450px;
  text-align: justify;
}
Résultats :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales consectetur dictum. Duis ac massa nulla, eu tincidunt sapien. Proin odio eros, rhoncus quis volutpat eget, porta sed est. Nulla eleifend cursus mi et ornare. Etiam quis ante in est egestas vestibulum.

Exemple 4

Code : blockquote {
  background: none repeat scroll 0 0 #FFFBCC;
  border: 1px solid #E6DB55;
  font: 1em Georgia,Times,"Times New Roman",serif;
  padding: 10px;
  margin: 10px 0;
  text-align: justify;
}
Résultats :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales consectetur dictum. Duis ac massa nulla, eu tincidunt sapien. Proin odio eros, rhoncus quis volutpat eget, porta sed est. Nulla eleifend cursus mi et ornare. Etiam quis ante in est egestas vestibulum.

Remarque

 Je me suis contenté de personnaliser "la box" ou l'espace des citations mais on peut aussi personnaliser les liens, les entêtes, les balises Gras, Italique, Souligner...
Il suffit de les cibler en utilisant la classe blockquote : a {...} ou blockquote h2 {...}.....

On peut aussi créer plusieurs balises div,p ou span à l'intérieure de la balise blockquote si on veut créer des effets sophistiqués.

Utiliser plusieurs blockquotes par page

Si vous voulez utiliser plusieurs versions des citations il faut créer une classe CSS et inclure le contenu que vous voulez citer dans une balise div.

Par exemple j'ai créer la classe update et j'utilise le code suivant pour signaler les mises à jours : 
< div class="update">BlaBla Bla blalalalalabla<div>

Voilà j'espère que cet article vous sera utile et n'hésitez pas à laisser des commentaires si vous avez des remarques :)
Libellés : Publié le dimanche, mars 27, 2011
21 Commentaires
  1. Soufiane pourrait tu procéder au tirage au sort pour les templates
    Merci
    Lucas

    RépondreSupprimer
  2. voilà encore un article très intéressant merci

    RépondreSupprimer
  3. Merci Soufiane
    pour ton aide précieuse, j'ai utilisé plusieurs de tes
    conseils pour construire mon blog sur la beauté
    http://jninails.blogspot.com
    Il y'a pas mal de choses encore à changer mais grâce à toi
    ça a une belle tête

    RépondreSupprimer
  4. Bonjour Sofiane,
    J'ai suivi tes conseils mais je me retrouve avec un guillemet déformé sur l'exemple 3 et en plus comment faire pour fermer le guillemet?

    Merci d'avance.

    RépondreSupprimer
  5. merci beaucoup pour cet article pertinent

    RépondreSupprimer
  6. bonjour et bravo à toi.
    mais hélas (oui sa peut pas être que positif les coms, rire) je suis grandement déçue.
    oui, déçue car aucun je dis bien aucun de tes astuces dans mon template ne fonctionne aucun.
    que ce soit la liste des liens sociaux, les citations ou autre rien n'y fait.
    alors, soit je suis abruti fini, soit le template que j'ai chois n'est pas modifiable et la ses mort.
    sinon bravo pour ton blog qui fourmille d'idées et d'astuces fort intéressent continue car tu nous et d'une grande aides.
    amitié...

    RépondreSupprimer
  7. Merci beaucoup, je recherchai cela depuis quelques temps...

    RépondreSupprimer
  8. Comment fait on pour trouver la ligne de code (fonction recherche ?) ]]>
    Cdt

    RépondreSupprimer
  9. Génial, mille mercis

    RépondreSupprimer
  10. شكرا جزيلا على المعلومات القيمة

    RépondreSupprimer
  11. Merci, merci infiniment Soufiane. C'est exactement ce que je cherchais.

    :-)

    RépondreSupprimer

Copyright 2015 Soufiane.fr