Overblog Suivre ce blog
Administration Créer mon blog
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
15 janvier 2009 4 15 /01 /janvier /2009 00:36

Je voulais placer mon module Articles Récents en colonne principale, mais mon design est élastique, ce qui rendait l'opération compliquée (ajustement sous les différentes résolutions d'écran).

Ci-dessous les News :



Vous devez être en mode avancé pour réaliser cette astuce

1ère étape
dans Configurer - onglet Accueil - Petit marteau en haut à droite de l'article

  1. Vous ne mettez aucune étiquette : ni date, ni communauté, ni commentaires, ni recommander
  2. Vous sélectionnez le nombre d'articles voulu
  3. Vous demandez un affichage du plus récent au plus ancien
  4. Vous cochez Résumés d'Articles
  5. Nombre de caractères par résumé : 0

2ème étape : vous allez dans le CSS Accueil : Design - Mode avancé - Accueil

Ces lignes sont à compléter ou à créer

Je diminue l'espacement entre les titres des articles. Jouez avec le nombre de px

.extraitArticle {margin-bottom: -10px;}


J'encadre et je mets un fond dans ce pavé

.articles {border: 5px double #000033; background:url(adresse du fond);}


Il se peut que la 1ère image des articles apparaissent

.articles img {display:none;}


Pour faire disparaître la ligne entre les articles

.hrExtrait {display:none;}


Vous pouvez vouloir distinguer les lignes

Pour les lignes impairs

.article_summary_even .titreExtrait {color:#000033;background-color:#f5f5dc;}


pour les lignes pairs

.article_summary_odd .titreExtrait {color:#f5f5dc;background-color:#000033;}


Vous souhaitez mettre en titre de ce pavé "News" ou Nouveauté
Vous créez une image avec fond transparent :



#extraitArticle1 {background:url(adresse de cette image); background-repeat:no-repeat;background-position:center top; padding-top:30px;}


padding-top correspond à la hauteur de cette image

Vous souhaitez mettre une ligne de séparation entre ce titre et le 1er article

#extraitArticle1 .infoExtrait {border-top:3px double #000033;padding-top:10px;}


A ce niveau-là, votre pavé des nouveautés devrait déjà avoir de l'allure.

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

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:23

Vous allez dans le CSS et vous rajoutez ce qui est en rouge ou toute la ligne si elle n'existe pas.

#divRecommander h2 {background-image:URL(adresse de l'image);background-repeat:no-repeat;background-position:left;padding-top:55px; padding-left:50px;  }

padding-top:55px; padding-left:50px;  sont les marges du haut et de gauche. Il faudra jouer avec les pixels pour que votre image soit entière et ne mange pas le titre

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

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:16

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

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