Décorer ses quotes sur blogger.

Plop les bovins,

J’ai cherché pas mal de temps un moyen d’ajouter un petit liseret de couleur à mes quotes/citations sur blogger pour les rendre un peu plus joyeuses. J’ai finalement trouvé la solution en inspectant le code de templates préfabriqués téléchargeables sur le net

Pour ceux qui ne voient pas de quoi je cause je vous donne un petit exemple :

Il n’est pas beau mon petit liseret à gauche ?

Si ça vous branche et que vous avez cherché comment faire sans succès, je vais vous expliquer vite fait comment procéder.

Il va falloir dans un premier temps se rendre dans votre « tableau de bord => présentation => modifier le code HTML » ou « dans votre fichier CSS » si il est hébergé à part.

NB : Faites dès lors une sauvegarde de votre template (on ne sait jamais) !!!

Une fois que vous êtes prêts, il va falloir chercher la partie du code qui gère l’affichage de vos quotes. Cela devrait ressembler à ceci (ça peut varier d’un modèle à l’autre) :

.post blockquote {
margin:1em 15px;
background:#EBDDD0;
font-style:italic;
padding:5px;
}

Il va falloir ajouter quelques lignes pour arranger tout cela. Je vous donne un exemple qui est relatif à mon blog mais que vous saurez adapter au votre.

.post blockquote {
font-family:inherit;
font-size:14px;
border-left:4px solid #E5432C;
margin:1em 15px;
background:#f2e4d6;
padding:5px;
}

Quelques explications :

– La ligne font-family:inherit; permet de choisir la police d’écriture à utiliser dans ses citations. Ici la police est inherit que vous pouvez remplacer par arial, trebuchet etc etc …
– La ligne font-size:14px; permet de choisir la taille de sa police.

Pour ajouter le fameux liseret, il va falloir se pencher sur la 4ème ligne :

border-left:4px solid #E5432C;

« left » signifie que le liseret va se placer à gauche. Vous pouvez le placer à droite en remplaçant left par « right », voir même utiliser les deux avec des couleurs différentes en ajoutant une ligne comme celle-ci  :

border-right:4px solid #E5432C;

– Le « 4px » va déterminer l’épaisseur du liseret, changez le chiffre pour qu’il ait la largeur que vous souhaitez.
– « solid #E5432C » va vous permettre d’adapter la couleur du liseret à votre blog en changeant la valeur héxa #E5432C.
– « background:#f2e4d6 » va permettre de changer la couleur du corps du bloc de citations toujours en changeant la valeur héxa.
– « right/left » déterminent le côté du liseret mais ça vous le savez déjà.

Une fois que vous avez effectué ces changements, il ne vous reste plus qu’à enregistrer les modifications et à faire chauffer les citations :)

Amusez vous bien, Moo !!!

PS : Z’inquiétez pas,  j’en abuse un peu là, mais ça va paser hi hi ….


2 Responses

  1. Noireaude 14 avril 2012 / 20 h 09 min

    Bonjour, ce n’est pas un problème.

    Si « .blockquote » n’existe pas vous pouvez ajouter une portion de code similaire à celle que j’ai mise dans mon poste (dans la partie CSS de votre template).

    *La partie CSS est souvent située dans le haut du template.

    Il devrait la prendre en compte.

    N’oubliez pas de faire une sauvegarde avant et de faire quand même une recherche sur blockquote avec le *point devant.

    Cordialement.

  2. Rémi 14 avril 2012 / 14 h 00 min

    Google est votre ami puisque je suis tombé de suite sur votre blog en tapant « code blogger quote ».

    Fonctionnant sur blogger, je n’ai pas réussi à trouver le mot clé « blockquote » dans le fichier html du blog : difficile donc pour moi de customizer les citations…

    Si par chance vous avez une solution ou une explication sur le fait que je ne retrouve pas ce passage relatif au code des citations, je suis preneur!

    merci

Comments are closed.