Overblog Suivre ce blog
Administration Créer mon blog
15 janvier 2009 4 15 /01 /janvier /2009 00:59

cet article a été transféré sur les nouvelles ficelles d'anna k

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:53

Ainsi :



On commence par la date.

Vous allez dans le CSS et vous complétez la ligne

.date     { width:10%; color: #d8e2ec;text-align:center;font-size: 9pt;font-weight:bold; background-color:#3c4157;margin-left:10px;border:1px solid #d8e2ec;margin-bottom:-50px; }


width:10% : la largeur du pavé date
color: #d8e2ec; : la couleur de l'écriture
text-align:center : le centrage dans le pavé
font-size: 9pt : la taille de la police
font-weight:bold : la police est en gras
background-color:#3c4157; : la couleur de fond du pavé
margin-left:10px; : la marge pour que le pavé ne soit pas collé à gauche
border:1px solid #d8e2ec : l'encadrement du pavé
margin-bottom:-50px; on abaisse le pavé pour qu'il se place devant le titre de l'article

On s'occupe maintenant du titre

Toujours dans le CSS, vous rajoutez ou complétez cette ligne


.divTitreArticle h2 { border:2px solid #000033; background-color:#3c4157;width:85%;margin-left:15%; }


border:2px solid #000033 : l'encadrement du titre
background-color:#3c4157 : le fond du titre
width:85% : la largeur du titre. Pour la calculer : 100% (largeur totale de l'article) - 10 % (largeur de la date) - 5% marge entre la date et l'article
margin-left:15%; : marge à gauche du titre. Pour la calculer : 100% (largeur totale de l'article) - 85% (largeur du titre)

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:50

Le but est de faciliter la navigation sur votre blog : plus elle sera aisée, plus  longtemps le visiteur restera sur votre blog.

En bas de vos articles, il y a des numéros de pagination. Ils n'ont d'intérêt que si votre visiteur clique dessus pour aller voir les autres articles de cette catégorie ou du mois.

PREMIERE ETAPE

Avec un logiciel de dessin, vous créez une image de la sorte



Vous écrivez cette phrase sur un fond transparent ou sur le fond de votre blog.
Je lui ai mis les dimensions suivantes : 200px * 20px.
Pensez à utiliser la même police, taille et couleur, que sur votre blog.

Vous hébergez ensuite cette image.

DEUXIEME ETAPE

Dans le(s) CSS, vous rajoutez

.pagination {background-image:url(http://www.casimages.com/img/png/07091611414262651243097.png); background-repeat:no-repeat;background-position:top left ;margin-left:15px;text-align:right;}


On place le texte à droite.
On place cette phrase en background et on demande qu'elle soit sur la gauche en haut
On crée une marge sur la gauche pour ce background

TROISIEME ETAPE

Le résultat

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:50

Cet article a été transféré sur les Nouvelles Ficelles d'Anna K

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:49

Cet article a été transféré sur les nouvelles Ficelles d'Anna K

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:49

Cet article a été transféré sur les nouvelles ficelles d'Anna K

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:44

Cet article a été transféré sur les nouvelles ficelles d'anna K

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:39

Le but est de faciliter la navigation sur votre blog : plus elle sera aisée, plus  longtemps le visiteur restera sur votre blog.

En bas de vos articles, vous avez sans doute mis l'étiquette  "Publié dans : la catégorie". Elle n'a d'intérêt que si elle incite votre visiteur à cliquer dessus pour aller voir les autres articles de cette catégorie.

PREMIERE ETAPE

Avec un logiciel de dessin, vous créez une image de la sorte

Image hébergée par Casimages.com : votre hébergeur d images simple et gratuit

Vous écrivez cette phrase sur un fond transparent ou sur le fond de votre blog.
Je lui ai mis les dimensions suivantes : 300px * 20px.
Pensez à utiliser la même police, taille et couleur, que sur votre blog.

Vous hébergez ensuite cette image.

DEUXIEME ETAPE

Dans Configurer, sous l'article, vous réservez une des 2 lignes pour mettre l'étiquette "publié dans"

TROISIEME ETAPE

Dans le(s) CSS, vous rajoutez

.topic {text-align:right;background-image:url(http://www.casimages.com/img/jpg/07091609353762651242228.jpg); background-repeat:no-repeat;background-position:top left ;padding-left:300px;padding-top:2px;}


On place le texte à droite.
On place cette phrase en background et on demande qu'elle soit sur la gauche en haut
On crée une marge sur la gauche pour ce background

QUATRIEME ETAPE

Le résultat

Repost 0
Published by Anna K - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:38

Comme ceci :



Dans le CSS, vous rajoutez ce qui est en rouge ou toute la ligne si elle n'existe pas

.newsletter input{  background-image:url(adresse de l'image);background-repeat:no-repeat;padding-left:50px;}


L'image apparaît dans les 2 cadres, alors pour l'effacer du cadre où il est écrit OK, vous rajoutez la ligne entière dans le CSS :

.newsletter .button {background-image:none;}
Repost 0
Published by Anna K - dans Archives
commenter cet article
15 janvier 2009 4 15 /01 /janvier /2009 00:37

cet article a été transféré sur les nouvelles ficelles d'anna k

Repost 0
Published by Anna K - dans Archives
commenter cet article