Créer un format de date circulaire sur blogger

date-blogger-rond-cercle

Créer un format de date circulaire sur blogger

 

Aujourd’hui je vous balance du gros lourd en tuto! (non ne vous inquiétez pas, je vous ai bien mâché le travail, vous n’aurez plus qu’à faire un petit copier/coller) à savoir créer un format de date circulaire sous blogger.
Nous verrons aussi dans cet article comment modifier le format d’affichage de votre date (enlever le jour, remplacer par des abréviations numériques par exemple), ainsi que comment trouver le code hexadécimal (autrement dit le code HTML) d’une couleur sur le web grâce à un outil pour firefox nommé ColorZilla.

J’ai vu que pas mal de blogueuses désiraient mettre leurs dates d’articles en forme de cercle (on me l’a aussi demandé), et qu’il n’existe pas vraiment de tutoriels pour cela sur la blogo, alors je me suis penchée sur l’affaire et je vous ai pondu un petit bout de code, qui a mon avis en ravira plus d’une, n’est-ce pas?

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?)

 

date circulaire cercle blogger

Un petit aperçu de la date que vous obtiendrez

 

Allez, arrêterons le suspens et commençons! Rendez vous dans votre tableau d’administration blogger, dans le menu de gauche cliquez sur > modèle
 Une fois sur la page modèle, cliquez sur personnaliser en dessous de l’aperçu de votre blog

 

date circulaire cercle blogger

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?

date circulaire cercle blogger

 

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.


Capture d’écran 2014-07-14 à 18.32.38

 

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.

date-rond-blogger

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…)

date-rond-blogger-blogspot

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 

colorzilla blogger

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 :

 

colorzilla blogger

 

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
Pour changer la couleur de votre cercle il suffit de modifier la ligne background-color:#76E4C7; en remplaçant le code hexadécimal soit la valeur après le #
De même si vous désirez changer la couleur du texte vous pouvez toujours passer de color:white; en color:black; 
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 :-)

 

35 Commentaires
  • jesy

    19 juillet 2014 at 14 h 22 min Répondre

    Coucou, ça ne marche pas chez moi c’est normal? Il faut un théme particulier?

    • graphicart

      19 juillet 2014 at 14 h 24 min Répondre

      ah bon? non je ne crois pas, j’ai vu que tu avais « jason morrow » je ferai un test sur ce thème mais normalement cela devrait être bon, tu as bien rajouté le code dans modele> personnaliser > avancé > ajout de CSS ?

  • jesy

    19 juillet 2014 at 14 h 35 min Répondre

    Oui c’est bien ce que j’ai fait mais je viens de voir en y retournant qu’il n’y a plus le code dans « ajouter le fichier css » et quand je l’ai mis je n’ai pas pu faire « appliquer au blog » car le bouton était grisé c’est peut être pour ça?

    • graphicart

      19 juillet 2014 at 17 h 02 min Répondre

      oui c’est sans doute pour ça, ça veut dire que les modification n’ont pas étaient prises en compte (le fait de pas avoir le code dans la feuille CSS), et tant que tu n’as pas cliqué sur « appliquer au blog » cela ne s’appliquera pas.. je jetterai un oeil de mon coté ce soir, en attendant tiens moi au courant si tu y arrives entre temps :)

  • Alba

    19 juillet 2014 at 22 h 57 min Répondre

    AU TOP ! Bon mis à part que la date et le titre se chevauchent maintenant… ^^’ y a un réglage pour ça ?
    Bisettes cocotte et merciii

    • graphicart

      20 juillet 2014 at 8 h 51 min Répondre

      Coucou! merci pour ton petit mot :) alors ce problème de chevauchement n’apparait que sur firefox, et pas sur safari, mais oui la solution est d’ajouter ce petit morceaux de code : margin-left: -0px;
      margin-top: 50px;
      }

      que tu peux régler selon où tu désires avoir la date sachant que margin top c’est pour la marge du haut (tu peux ajouter des valeurs négatives comme -50px par exemple et marin left la marge qu’il y aura avec la gauche!) voila tiens moi au courant :)

    • Alba

      20 juillet 2014 at 9 h 19 min Répondre

      Aaaah ouais ça marche au top ! Merciiii <3
      Bon après promis j'arrête de t'embêter mais est ce qu'il y aurait un petit truc à faire, ou un bout de code à ajouter pour déplacer également le titre ?
      Bisoubisou
      Alba

      • graphicart

        20 juillet 2014 at 9 h 25 min

        de rien :) oui mais le titre c’est un peu plus compliqué, j’en ferai peut être un tuto, notamment pour utiliser d’autres typographies proposées, mais là de suite je ne peux pas vraiment te dire désolée il faut se pencher dans le code source !

  • jesy

    19 juillet 2014 at 23 h 03 min Répondre

    Ah c’est bon j’ai recommencer ce soir et sa marche mais du coup j’ai un autre soucis sa c’est mis sur les titres de mes articles :/

    Ce n’est pas possible de l’avoir comme toi sur les photos ou de le bouger un peu? Car la on vois pas bien la date du coup :/
    je suis vraiment désolé de t’embeter avec mes problemes mais je suis vraiment pas douer ^^

    • graphicart

      20 juillet 2014 at 8 h 53 min Répondre

      Coucou :) pas de soucis comme je viens de répondre à alba dans les commentaires, ajoute ceci après le code que tu as ajouté precedemment margin-left: -0px;
      margin-top: 50px;
      } (tu peux lire sur mon autre réponse les explications)

  • jesy

    19 juillet 2014 at 23 h 22 min Répondre

    C’est encore moi je viens de voir le commentaire que tu ma laisser, le théme de mon blog c’est le théme simple de blogger je ne l’ai pas changer :)

  • jesy

    20 juillet 2014 at 11 h 13 min Répondre

    Merci!!!!!!!! C’est parfait je suis super contente ! J’aimerai aggrandir un peu le cercle est ce bien ce code qu’il faut modifier?
    border-bottom-left-radius:
    border-bottom-right-radius:
    border-top-left-radius:
    border-top-right-radius

    Car j’ai modifier ça mais j’ai pas l’impressions que sa aggrandis ^^

    • graphicart

      20 juillet 2014 at 15 h 40 min Répondre

      de rien :) oui il faut changer ça mais ça risque de se déformer

  • Needs and Moods

    21 juillet 2014 at 18 h 04 min Répondre

    Coucou Charlène,
    Je ne sais pas si c’est lié à un paramètre de mon PC, mais je ne parviens pas à lire tes articles.. Ils apparaissent tous codés dans une police spéciale.. Je repasserais à l’occasion par ici. C’est peut-être un petit bug momentané.
    Bisous!
    Bonne fin de soirée.

    • graphicart

      21 juillet 2014 at 23 h 58 min Répondre

      Bonsoir à toi !
      Merci pour ton petit mot, cependant, on m’a malheureusement déjà fait part du problème plusieurs fois, ce problème est généralement sous windows, est ce bien ton système d’exploitation? (mais certaines personnes sous windows n’ont pas le problème…) alors j’avoue que je n’y comprend rien et je ne peux malheureusement rien faire n’ayant pas de machine sous windows pour pouvoir faire des tests et des réglages… (on m’a aussi déjà dit avoir eu le problème puis qu’il avait disparu par la suite…) à bientôt!

  • MJ M.

    23 juillet 2014 at 11 h 39 min Répondre

    Merci beaucoup pour ce tuto ! Très rapide. J’ai juste eu un peu plus du mal pour changer la couleur, j’avais pas tout compris. Mais pour changer la date, ça m’a pris 3min à tout cassé ! Merci beaucoup !

    • graphicart

      23 juillet 2014 at 11 h 43 min Répondre

      Merci pour ton petit mot! et de rien c’est bien le but, je viens d’aller voir ça rend bien c’est chouette pour la couleur il te faut simplement changer le code background #FFFFFF. Pense à enlever ta navbar aussi, tu n’y a peut être pas fait attention mais c’est plus sympa de la retirer :-) voila le lien : Personnalisation blogger, enlever la navbar

  • UnMondeDeFilles

    3 août 2014 at 8 h 58 min Répondre

    Coucou ! Ca fonctionne super bien ! Meerci <3

    • graphicart

      3 août 2014 at 9 h 45 min Répondre

      de rien 😉 je suis allée voir c’est niquel!

  • Peyne

    8 août 2014 at 7 h 33 min Répondre

    Coucou :)

    Déjà j’adore tout simplement ton blog ! Le design est épuré, stylé, bref j’adore ! J’aimerais pouvoir en faire de même !
    Néanmoins j’ai essayé ce tuto, et si tu vas voir mon blog, ça me met la date en haut du cercle. Moi j’aimerais l’avoir au milieu. Comment pourrais je faire ça ?

    En tout cas je repasserai voir tes créations/tuto/articles, tu peux être sûr que ton blog est maintenant dans mes favoris !

    Bisous!!

    • graphicart

      8 août 2014 at 18 h 19 min Répondre

      Coucou! déjà merci pour ces jolis compliments :-) et tu reste la bienvenue évidemment, pour la date, ta police est trop petite, je te conseille de remplacer l’ancienne propriété CSS pour la taille de typographie, par celle ci : font-size: 17px; (cela devrait résoudre le problème et centré ta date!) tiens moi au courant! à bientôt :)

  • Nolwenn

    1 septembre 2014 at 14 h 01 min Répondre

    Salut ! Merci beaucoup pour ce super tuto ! J’ai essayé d’appliquer le code à mon blog (Jason Morrow), mais le rond ne s’affiche que sur les deux articles les plus récents, et se chevauche avec le titre, et je n’arrive pas à changer ça grâce au code que tu as donné dans es commentaires précédents, sans doute parce que je ne sais pas m’y prendre… :/

    • graphicart

      2 septembre 2014 at 11 h 54 min Répondre

      Je ne sais pas, peut être que le code ne fonctionne
      Pas avec ce modèle, j’essayerai de regarder quand je serais sur
      Mon
      Ordi!

  • Jemistips

    2 septembre 2014 at 11 h 48 min Répondre

    Coucou,

    Je tiens tout particulièrement à te remercier pour le travail que tu fais et de nous faire partager tes tutos qui sont vraiment très très bien.

    Cependant, j’ai une petite question, j’ai essayé de mettre les dates circulaires sur le blog d’une amie, j’ai réussi, mais quand j’ouvre son blog sur google chrome, toutes les dates ne s’affichent pas, alors que sur safari je n’ai aucun souci, les dates des articles s’affichent sans aucun problème.

    Ta une idée ?

    • graphicart

      2 septembre 2014 at 12 h 04 min Répondre

      Merci pour ton message adorable et je fais tout ça avec grand plaisir! Je n’ai
      Jamais eu ce problème, as tu essaye en changeant les lignes indiquées dans les commentaires?

    • Jemistips

      5 septembre 2014 at 11 h 20 min Répondre

      Merci beaucoup, je vais regarder.
      J’ai une dernière petite question et promis je ne t’embête plus Haha.
      Sais-tu comment créer des numéros de pages sur blogger ou des onglets « article le plus ancien » ou « article le plus récent » ?

      En tout cas, merci de prendre du temps pour nous répondre, c’est agréable 😉
      Bonne journée.

      • graphicart

        6 septembre 2014 at 18 h 33 min

        hello :) alors je ne comprend pas trop ta question, mais si les liens messages anciens et récents n’apparaissent pas, tu peux rechercher dans le code du thème .blog-pager (normalement deux fois, enfin ce sera le deuxième) et supprimer tout cela : « .blog-pager, .blog-feeds
        {
        display: none;  » J’espère avoir répondu à ta question? à bientôt!

  • Saskia B.

    4 septembre 2014 at 13 h 56 min Répondre

    Ça marche super! Merci beaucoup <3 Ton site est merveilleux ^^

    http://darkside-of-fashion.blogspot.fr
    Saskia! xo

  • Anne-Sophie E.

    24 janvier 2015 at 21 h 12 min Répondre

    Mille merci pour toutes tes astuces qui embellissent un peu plus chaque fois mon nouveau blog !
    Ton site est une mine d’or

  • Orlane

    9 avril 2015 at 16 h 21 min Répondre

    Bonjour ! D’abord, merci pour ton blog ! Je viens de le décourvrir, il est chouette ! Et tes tutos sont au top !! Alors je viens d’appliquer tes conseils, et c’est sympa ! Par contre, ce que je voudrais, c’est déplacer la date. Là, elle est complèment en dehors de l’article, et j’aimerai bien qu’elle soit à la fin … Je n’ai rien trouvé sur le web … Du coup je ne sais pas si c’est modifiable, ou si ça vient de mon thème … Qu’en penses-tu ?

  • […] Créer une likebox Facebook pour son blog Installation d’un pop up avec une Facebook like box Une date en forme de rond sur blogger […]

  • hardy

    12 décembre 2015 at 11 h 39 min Répondre

    salut, alors voilà mon problème, j’avais suivi ton tuto pour pouvoir avoir la date circulaire, seulement récemment j’ai changer l’apparence de mon blog et la date reste circulaire et cela me fait un truc très bizarre au dessus de mes articles. ( voici l’adresse de mon log pour que tu puisse voir : http://manon-merci.blogspot.fr/
    peux-tu m’aider stp 😉
    ps: j’adore tes tutos, grâce à toi je suis très satisfaite de l’apparence de mon blog. Merci

  • Val ( cookies addicte )

    24 décembre 2015 at 13 h 23 min Répondre

    Bonjour,
    j’ aimerai savoir si il est possible de faire la même chose sous wordpress ?

  • Urbana leonis

    24 mai 2017 at 23 h 01 min Répondre

    Merci beaaaaucouuup !! urbanaleonis.blogspot.com

Poster un commentaire