
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?)
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)
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 🙂
jesy
19 juillet 2014 at 14 h 22 minCoucou, ça ne marche pas chez moi c’est normal? Il faut un théme particulier?
graphicart
19 juillet 2014 at 14 h 24 minah 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 minOui 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 minoui 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 minAU 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 minCoucou! 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 minAaaah 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 minde 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 minAh 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 minCoucou 🙂 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 minC’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 minMerci!!!!!!!! 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 minde rien 🙂 oui il faut changer ça mais ça risque de se déformer
Needs and Moods
21 juillet 2014 at 18 h 04 minCoucou 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 minBonsoir à 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 minMerci 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 minMerci 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 minCoucou ! Ca fonctionne super bien ! Meerci <3
graphicart
3 août 2014 at 9 h 45 minde rien 😉 je suis allée voir c’est niquel!
Peyne
8 août 2014 at 7 h 33 minCoucou 🙂
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 minCoucou! 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 minSalut ! 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 minJe 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 minCoucou,
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 minMerci 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 minMerci 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 minhello 🙂 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Ça marche super! Merci beaucoup <3 Ton site est merveilleux ^^
http://darkside-of-fashion.blogspot.fr
Saskia! xo
graphicart
4 septembre 2014 at 18 h 50 minmerci à toi 😉
Anne-Sophie E.
24 janvier 2015 at 21 h 12 minMille 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 minBonjour ! 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 ?
Générer une lecture d'article au hasard avec BloggerGraphic'art
13 août 2015 at 16 h 48 min[…] 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 minsalut, 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 minBonjour,
j’ aimerai savoir si il est possible de faire la même chose sous wordpress ?
Urbana leonis
24 mai 2017 at 23 h 01 minMerci beaaaaucouuup !! urbanaleonis.blogspot.com