Créer un format de date circulaire sur blogger

Créer un format de date circulaire sur blogger

Cette petite manipulation vous prendra même pas 5 minutes et garanti sans une seule goutte de sueur et d’arrachage de cheveux au programme (fabuleux non?)

Un petit aperçu de la date que vous obtiendrez

Vous obtiendrez cette page, à savoir l’outil de création de modèles blogger.

Ici dans la première colonne latérale de gauche vous cliquerez sur avancé puis sur ajouter le fichier CSS dans le deuxième menu de gauche

Jusqu’ici tout va bien?

Maintenant, dans l’encadré blanc nommé « ajouter des CSS personnalisés », vous ajouterai ce petit bout de code à l’aide d’un copier/coller (raccourcis  ctrl ou cmd+c / ctrl ou cmd+v)

.date-header span {
 background-color:#76E4C7;
 background-position:initial initial;
 background-repeat:initial initial;
 border-bottom-left-radius:50px;
 border-bottom-right-radius:50px;
 border-top-left-radius:50px;
 border-top-right-radius:50px;
 color:white;
 display:block;
 float:left;
 font-size:10px;
 height:50px;
 letter-spacing:3px;
 margin:50px inherit inherit 6px;
 padding:8px 2px 0 4px;
 position:absolute;
 text-align:center;
 width:50px;
 }

TADAAAAAM! et voila le travail, magique non?

Normalement, vous aurez votre date en couleur vert d’eau / mint comme ci dessous, mais vous pouvez en changer la couleur simplement je vais vous donner une petite astuce pour cela.

CHANGER LE FORMAT D’AFFICHAGE DE LA DATE

Rendez vous tout simplement sur votre administration Blogger puis cliquez sur Mise en page dans l’encadré articles du blog comme ci dessous cliquez sur « modifier » en bas à droite.

La fenêtre suivante apparaîtra, vous pouvez donc choisir le format d’affichage de votre date afin que celle ci ne dépasse par du rond si vous avez des problèmes avec ce réglage (enlever le jour par exemple, remplacer par des abréviations numériques…)

TROUVER LE CODE D’UNE COULEUR

Pour trouver le code « hexadécimale » (genre #ABABAB) d’une couleur qui vous plait afin de changer la couleur de votre date circulaire, je vous propose de télécharger une petite extension nommée ColorZilla qui est une pipette graphique à installer impérativement dans vos navigateurs web.

Une l’extension installée, cliquez sur la petite pipette en haut dans la barre de votre navigateur, le bouton ressemble à ceci 

Vous verrez que ColorZilla s’activera et que dès que vous passerez sur un endroit de la page avec votre curseur la couleur de l’arrière plan du petit bouton de la pipette changera (pareil dans la barre noir en haut) comme ci dessous :

Une fois votre couleur trouvée, cliquez dessus, un message « copier to clipboard » s’affichera dans la barre noir du haut, puis cliquez sur la petite flèche à côté du bouton de la pipette afin de faire apparaître le menu de l’extension, choisissez l’option « Copier #7EE1C4″

et voilà, vous avez le code de votre couleur et vous pouvez donc changer la couleur du cercle de votre date!

CHANGER LES COULEURS DU CERCLE DE LA DATE

Alors le tuto vous à t il plu? donnez nous vos avis, expérience… je vous l’avez vient dit, normalement pas d’arrachage de cheveux si ? 

D’ailleurs les p’tits loups, si ce thème blogger vous plaît (urban glitter), je le propose en vente sur mon shop ETSY ici, je dis ça je dis rien…!

Des bisettes, et à très bientôt 🙂