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 :

Exemple 2

Code : blockquote {
    background:#F9F9F9;
    border:1px solid #CCC;
    margin:10px 0;
    padding:10px;
}
Résultats :

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 :

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 :

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 : Articles, Astuces Publié le dimanche, mars 27, 2011