Ce n’est pas tout d’être beau (Clic ICI pour comprendre le trait d'humour!)… encore faut-il bien gérer son blog !

Cette semaine, j'ai jeté un oeil  (comme lui, là-dessous qui "spinche"),  et  je me suis penchée sur :

Le titre du résumé d’Article

Difficile de trouver les indications précises à ce sujet ; enfin du moins, j’ai beaucoup cherché, mais finalement, j’ai bidouillé et obtenu à peu prés, ce que je voulais….

Et bien sur, je vous en fait profiter, tout de suite !

Ci-dessous, en exemple, une impression d'écran, de mes résumés d'articles actuels... sur lequel vous pouvez distinguer un losange rouge, entourant le titre du résumé d'article.

Tout d’abord, son apparence, lorsqu’on a choisit de faire apparaitre les résumés, en page d’accueil, comme moi.

1) - Se rendre dans le CSS accueil et chercher  titreExtrait {}   qui désigne les titres des résumés sur votre page accueil.

2) - Selon le style de votre blog, il vous faut choisir si le titre sera souligné ou pas  :

Pour cela, vous rajoutez entre les accolades , en toute simplicité et sans  (lol):

text-decoration : underline ;  pour  souligné, ou bien  :  text-decoration : none ; pour non souligné.

Ce qui donne  :

3) - Ensuite, vous allez choisir la police d'écriture  et  mettre à la suite, aprés le point virgule :   

font-family : Comic sans MS ;   c'est la mienne, mais à vous de choisir la votre...

On se retrouve alors, avec :

4) - Continuons avec la couleur  de la police : 

color:#481e09;

5) - puis sa taille :

font-size : 18px ;

6) - On peaufine avec  l’épaisseur, c’est-à-dire,

gras : font-weight : bold ;   ou pas gras :    font-weight : normal ;

7) - le style, c’est-à-dire, soit en italique ou pas :

font-style : italic ; ou bien  :  font-style : normal ;

8) - et enfin, décider de son alignement :

Gauche  text-align : left ;   ou Centrer     text-align : center ;  ou encore Droite :   text-align : right ;   et j’ai découvert récemment que l’on pouvait se servir de justifié : text-align : justify ;

Ce qui  donne  sur mon blog :

/*titre-resume*/

Personnellement, j'ai rajouté  : height:50px;   la hauteur de la ligne du titre

la hauteur de la marge extérieure au-dessus du titre :  margin-top:10px;

Et la marge intérieur et tout autour du titre :   padding:5px;

Il est aussi possible de rajouter un fond de couleur dans le titre... pour cela, rajoutez dans les parenthèses :

background-color:red;

Bien sur, j'ai mis red qui veut dire rouge, mais à vous de choisir.... Moi, je n'en ai pas

Voilà, j'ai essayé d'être le plus précise possible, mais comme je l'ai déjà dit, et je le répète, je ne suis pas une pro, et si vous avez besoin de mes services pour votre blog, je suis là!

En tout cas, avec ces explications, vous maitrisez maintenant le "design" du Titre des resumes d article...

Pour que  CSS = plaisir!  et puis.... C'est le printemps !

PS :

Pour consulter une autre astuce de blog, Clic ICI, Merci!