Pourquoi je modifie l'apparence de mes articles

Réponse à cette vraie question que l'on ne m'a jamais posé

Quand on choisit un thème téléchargé sur internet, il y a de fortes chances pour qu’il soit déjà utilisé pour d’autres blogs. Il est donc important de personnaliser le sien pour qu’il nous corresponde et soit unique. Pour mes deux blogs, je n'utilise aucun des modèles de base proposés par blogger.
Les templates/thèmes sont à 99% d'origine anglo-saxonne. Et il faut bien se l'avouer, les thèmes gratuits (je ne fais que dans le gratuit !) se ressemblent plus ou moins tous, à peu de chose près. Pour la page d'accueil, à moins d'être un pro du codage, il est préférable de se limiter à quelques modifications mineures, comme le bandeau, la couleur, francisé les menus, les titres des gadgets/widgets, etc.

Je ne suis ni expert, ni informaticien. Je découvre parce que je suis curieux et quand je ne sais pas, et bien je cherche, j'interroge ce bon vieux Google.

Dernière mise à jour le 06 mars 2024

Dans ma quête éternelle pour trouver l'inspiration dans de nouveaux scripts, toujours dans le but d'améliorer mon blog, je suis tombé sur un site baptisé du nom improbable de fadagogo. Créé en 2015 par deux frères, le site est dédié à l'apprentissage de base de l'informatique, entre autres. Mais ce qui me paraît être le plus intéressant, c'est que le site est doté d'un simulateur HTML-Css, qui peut être d'une aide précieuse pour les apprentis codeurs.
P.S. Il semble que le site ne soit plus maintenu.

- Ma petite touche personnelle

Pour les articles, c'est différent. N'étant jamais vraiment finis, leurs contenus sont donc toujours modifiables. Ma démarche est de pouvoir les améliorer, de les peaufiner, bref, de les personnaliser. Plutôt que de réécrire un article de blog, il est sûrement plus simple d’ajouter des compléments ou des précisions au fil du temps. Mais pas que !

Et pour quelques lignes de code

Un blog est un outil offrant une grande liberté d'expression. On décide de tout (ou presque) et il n'est jamais figé. Il est possible de revoir le contenu des billets pour simplement les rendre plus complets, apporter des précisions et de rendre leur apparence plus attrayants par le design. Pour ma part, ayant quelques notions de codage en HTML et en Css, je travaille essentiellement la mise en page et l'aspect visuel.
Voir ces deux exemples d'articles du blog. Le premier avec la mise en page standard un peu tristounette : Les cascades de Schorbach. Le second avec ma mise en page personnalisée : Les quatres saisons du Nideck.

- L'aspect visuel

Comme je l'ai dit plus haut, le design de beaucoup de blog se ressemble, tout comme les articles ont souvent la même présentation. Alors pour me démarquer, je rajoute ma touche personnelle par un peu d'originalité et j'y apporte un peu de fantaisie dans le design de mes articles. Mais attention, il ne faut pas surcharger la page, au risque qu'elle ne devienne illisible.

- Exemples d'éléments graphiques

Quelques petits bouts de codes simples que j'utilise dans mes pages. Un minimum de précautions et de connaissances en css et en html sont néanmoins nécessaire.

Créer une petite animation, sur un mot ou un groupe de mots, au passage de la souris. C'est ce que les anglo-saxons appellent un effet " bounce " ou effet de rebond.

Le CSS de base

  .ef_float{display: inline-block;
  transform: translateZ(0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;}
  .ef_float:hover, .ef_float:focus, .ef_float:active{transform: translateY(-4px);}

et le HTML

<span class="ef_float"> bounce </span>

---

Pour souligner un mot par une ligne plus épaisse que la normale et qui s'adapte à la taille du texte comme ici par exemple.

Le CSS

<style type="text/css">
.b_line {
background-image: linear-gradient(90deg, #8cc63f, #8cc63f);
background-position: bottom;
background-size: 100% 30%;
background-repeat: no-repeat;
}
</style>

et le HTML

Mes photos à travers <span class="b_line">l'Alsace et les Vosges</span>

Ce qui donne, ou devrait donner : Mes photos à travers l'Alsace et les Vosges

---

Un autre petit bout de code tout simple mais qui change tout, ou presque, sur l'aspect visuel d'un article; faire ressortir un mot en lui donnant une autre couleur que le reste de la phrase, comme dans l'exemple ci-dessous :

Nous les avons dominés 99% du temps. Ce sont les 3% restants qui nous ont couté la victoire.
Ruud Gullit

Le CSS

<style type="text/css">
.colortxt{color:#8cc63f;}
</style>

et le HTML

Nous les avons dominés 99% du temps. Ce sont les <span class="colortxt">3% restants</span> qui nous ont couté la victoire.

---

Et pour finir, (provisoirement) quelques liens vers des thèmes blogger gratuits à télécharger dont celui que j'utilise ici : NeuwsLog

Sorablogging Tips - Gooyaabi Templates - H-educate - Colorlib - cssauthor - Themexpose

[full_width]