Les Nouvelles Ficelles d'Anna K.

11 sept. 2011

Sommaire - (OverBlog) Modifications de design

Publié par Annak Libellés : (OverBlog) Modifications de design, (Sommaire)

Les articles suivants expliquent comment modifier le design dans chaque partie du blog. Si vous désirez vraiment personnaliser votre blog, choisissez un design basique au départ : Easyblog ou Minimaliste

Enlever les background d'origine :

Ajouter des background dans les zones principales du blog :

Les Albums Photos ne sont pas modifiables.

Modfier les polices, liens, puces, background et encadrements :

(OverBlog) Modifier la barre OB

(OverBlog) Modifier l'entête

(OverBlog) Modifier le menu OB

(OverBlog) Modifier les pages

(OverBlog) Modifier la fenêtre de partage

Publié par Annak Libellés : (OverBlog) Modifications de design, OverBlog

Nous allons modifier le design de ce pop up (police, background et encadrements) qui apparaît en bas à droite sur chaque article :

Vous devez vous rendre dans votre (ou vos) CSS : Design > Mode CSS

Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

MODIFICATION DES POLICES

Tout le texte

.socialPopup .text {text-align : center ; font-weight : bold ; text-decoration : underline ; font-style : italic ; color : red !important; font-size : 20px !important; font-family : Comic Sans MS !important; }

Seulement le titre

div.socialPopup span.text.title {text-align : center!important ; font-weight : bold ; text-decoration : underline ; font-style : italic ; color : red !important; font-size : 10px !important; font-family : Comic Sans MS !important;}

Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que

text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police

font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police

MODIFICATION DU FOND

Un fond dans la totalité du pop up

.socialPopup {background-color:red!important;background-image:url(adresse de la texture)!important;background-image:url(adresse de l'image)!important;background-repeat:no-repeat;background-position:center;}

Un fond seulement dans le titre

div.socialPopup span.text.title {background-color:red!important;background-image:url(adresse de la texture)!important;background-image:url(adresse de l'image)!important;background-repeat:no-repeat;background-position:center;}

Vous effacez ce qui ne vous convient pas, sachant que

background-color : red met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas

Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

Pour encadrer la totalité

.socialPopup{border:solid 1px #D8D7D7!important}

Pour encadrer le titre

div.socialPopup span.text.title{border:solid 1px #D8D7D7!important}

Pour en savoir plus sur les bordures : créer vos encadrements

POUR LA POSITIONNER A GAUCHE

.socialPopup {position: absolute;left:0px;}

11 nov. 2010

Sommaire - (Blogger) Propositions de design

Publié par Annak Libellés : (Blogger) Propositions de design, (Sommaire)

Personnalisation du design général

Personnalisation des articles

Personnalisation des commentaires

Personnalisation des widgets

(Blogger) Afficher un widget uniquement en page d'accueil ou en page des articles

Personnalisation de la pub

(Blogger) Placer la pub Adsense sous le titre des articles

Sommaire - (Blogger) Modifications de design

Publié par Annak Libellés : (Blogger) Modifications de design, (Sommaire)

Voici les indications nécessaires à la modification du design des blogs Blogger : couleurs, background, encadrements, etc ...

Ajouter des background dans les zones principales du blog :

Modifier les polices, liens, puces, background et encadrements :

(Blogger) Modifier la barre Blogger

(Blogger) Modifier l'entête

(Blogger) Modifier le menu Blogger

(Blogger) Modifier le lien Lire la Suite

Publié par Annak Libellés : (Blogger) Modifications de design, Blogger

Le lien Lire la Suite apparaît lorsque vous avez activé la fonction résumé :

Pour modifier son design, vous devez vous rendre dans votre CSS : Présentation > Modifier le code HTML
Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

MODIFICATION DE LA POLICE

.rmlink a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que

text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police

font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police

MODIFICATION DU FOND

.rmlink a {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Vous effacez ce qui ne vous convient pas, sachant que

background-color : red met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas

Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

.rmlink a {border:solid 1px #D8D7D7}

Pour en savoir plus sur les bordures : créer vos encadrements

ASTUCE

Si vous désirez placer une flèche à droite du lien

.rmlink a {background:url(http://2.bp.blogspot.com/_RpcwHx8W2XM/TNuQwKDBxEI/AAAAAAAAAxc/wjHyJNjsjZ0/s1600/LireLaSuite3.png);background-position:center;background-repeat:no-repeat;padding:12px;}

10 nov. 2010

(Blogger) Afficher le pied d'article uniquement en page des articles

Publié par Annak Libellés : (Blogger) Propositions de design, Blogger

Le pied d'article est la zone située en fin d'article où apparaissent les libellés et les icônes Facebook, Mail, etc :

Si, en page d'accueil, vous avez mis vos articles en mode Lire la Suite, il n'est peut-être pas indispensable de faire apparaître ce pied d'article.

Pour réaliser les modifications, vous allez dans Présentation > Modifier le code HTML

Vous cochez Développer des modèles de gadgets

Vous recherchez (Edition > Rechercher) :

<div class='post-footer'>

et vous collez à la suite

<b:if cond='data:blog.pageType == "item"'>

vous obtenez donc

<div class='post-footer'><b:if cond='data:blog.pageType == "item"'>

Maintenant, c'est un peu plus compliqué, vous devez trouver où fermer cette condition (b:if). Observez la partie consacrée au pied d'article

<div class='post-footer'><b:if cond='data:blog.pageType == "item"'>
    <div class='post-footer-line post-footer-line-1'>

<span class='post-icons'>
        
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

        
        <b:include data='post' name='postQuickEdit'/>
      </span> </div>

      <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>

          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
          </b:loop>
        </b:if>
      </span> <div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div> </div></b:if>
</div>

Vous constatez que le pied d'article est composé de div qui s'ouvre, qui ont un contenu et qui se referme :

<div>contenu</div>

Vous avez placé votre conditionnel <b:if cond='data:blog.pageType == "item"'> juste après l'ouverture de la première div <div class='post-footer'> il va falloir le refermer </b:if> juste avant la fermeture de cette div </div>
Ce qui donne en version simplifiée

<div class='post-footer'>
<b:if cond='data:blog.pageType == "item"'>
</b:if>
</div>

Je sais, ça semble compliqué, mais pas d'affolement, il suffit de tester, de prévisualiser pour voir si ça fonctionne. Le programme de vérification de Blogger est bien fait, si vous faîtes une erreur, il vous le signale, il vous suffit de la corriger.

3 nov. 2010

Comparatif revenus publicitaires OverBlog/Blogger

Publié par Annak Libellés : (OverBlog vs Blogger), partenariat

J'ai commencé le transfert de ce blog, de OverBlog vers Blogger, fin juillet 2010.
Dans un premier temps, je me suis placée dans la peau d'un blogueur lambda qui n'a ni le temps, ni l'intérêt nécessaire pour passer des heures à comparer les différents moyens de monétiser son blog. Je me suis donc laissée aller à la facilité et ai placé sur ce blog, les publicités Adsense et Blogbang.
Voici les premiers résultats comparatifs pour lesquels j'ai utilisé des critères objectifs :

nombre de visiteurs
nombre de pages vues.

Je n'ai pas pris en compte le Blog Rank, propre à OB, qui ne repose sur aucun critère connu, bien qu'utilisé pour calculer les revenus.
Je ne doute pas que certains blogs sur OB aient des revenus bien supérieurs à ceux-ci. L'intérêt de ce comparatif est qu'il repose sur l'étude des revenus de deux blogs ayant le même thème et les mêmes lecteurs.

A voir : (OverBlog) Monétiser son blog

Il est à noter que les revenus Adsense et Blogbang et leur évolution sont visibles en continu, quand sur OB il faut parfois attendre 7 jours pour les connaître (résultats du 29.09. au 05.10.10 visibles le 06.10.10) et au mieux le lendemain.

Pour Aout 2010, on constate que 3 fois moins de visiteurs génèrent des revenus 2 fois plus élevés sur Blogger.
A noter, le troublant hasard qui veut que je sois à 0,02 € des 4 € nécessaires pour que les droits d'auteur soient versés en €uros et non en points :

Au début du mois de septembre, j'ai supprimé les bannières 468*60 (liens sponsorisés) sous les articles du blog d'OverBlog. A noter, qu'elles me rapportaient en moyenne mensuelle en 2010, 0,84 € (6,68 € sur 8 mois) pour environ 1000 articles publiés.

En octobre, sur Blogspot, j'ai supprimé le pavé Adsense 300*250 de la colonne de module et j'ai déplacé la bannière Adsense 468*60 (qui était sous les articles) pour la mettre sous le titre de l'article.

(Blogger) Modifier le widget Statistiques

Publié par Annak Libellés : (Blogger) Modifications de design, Blogger

Nous allons maintenant modifier le widget Statistiques : police, background et encadrements.

Vous devez vous rendre dans votre CSS : Présentation > Modifier le code HTML
Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

Ce widget s'appelle #Stats1, s'il est présent plusieurs fois sur le blog, le suivant s'appellera #Stats2. Pour vérifier son "nom" :

Dans Présentaion > Eléments de la page > vous cliquez sur Modifier sur le pavé représentant ce widget
Dans la fenêtre qui s'ouvre, vous trouvez son "nom" tout à la fin de la ligne dans la barre à droite du B orange de Blogger

MODIFICATION DES POLICES

Le titre du widget

#Stats1 h2 {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Le chiffre

#Stats1 .widget-content {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que

text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police

font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police

MODIFICATION DES FONDS

Le widget en entier

#Stats1 {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Le titre du widget

#Stats1 h2 {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;padding:5px}

Le contenu du widget

#Stats1 .widget-content{background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Vous effacez ce qui ne vous convient pas, sachant que

background-color : red met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas

Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

Pour encadrer le widget en entier

#Stats1 {border:solid 1px #D8D7D7}

Pour encadrer le titre du widget

#Stats1 h2 {border:solid 1px #D8D7D7}

Pour encadrer le contenu du widget

#Stats1 .widget-content {border:solid 1px #D8D7D7}

Pour en savoir plus sur les bordures : créer vos encadrements

(Blogger) Modifier le widget Messages les plus consultés

Publié par Annak Libellés : (Blogger) Modifications de design, Blogger

Nous allons maintenant modifier le widget Messages les plus consultés : police, background et encadrements.

Vous devez vous rendre dans votre CSS : Présentation > Modifier le code HTML
Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

Ce widget s'appelle #PopularPosts1, s'il est présent plusieurs fois sur le blog, le suivant s'appellera #PopularPosts2. Pour vérifier son "nom" :

Dans Présentaion > Eléments de la page > vous cliquez sur Modifier sur le pavé représentant ce widget
Dans la fenêtre qui s'ouvre, vous trouvez son "nom" tout à la fin de la ligne dans la barre à droite du B orange de Blogger

MODIFICATION DES POLICES

La titre du widget

#PopularPosts1 h2 {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Le titre du message

#PopularPosts1 a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Le résumé du message

#PopularPosts1 {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que

text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police

font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police

MODIFICATION DES FONDS

Le widget en entier

#PopularPosts1 {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Le titre du widget

#PopularPosts1 h2 {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;padding:5px}

Le contenu du widget

#PopularPosts1 .widget-content{background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Le titre du message

#PopularPosts1 a {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Le résumé du message

#PopularPosts1 .item-snippet {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Vous effacez ce qui ne vous convient pas, sachant que

background-color : red met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas

Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

Pour encadrer le widget en entier

#PopularPosts1 {border:solid 1px #D8D7D7}

Pour encadrer le titre du widget

#PopularPosts1 h2 {border:solid 1px #D8D7D7}

Pour encadrer le contenu du widget

#PopularPosts1 .widget-content {border:solid 1px #D8D7D7}

Pour encadrer le titre du message

#PopularPosts1 a {border:solid 1px #D8D7D7}

Pour encadrer le résumé du message

#PopularPosts1 .item-snippet {border:solid 1px #D8D7D7}

Pour en savoir plus sur les bordures : créer vos encadrements

2 nov. 2010

(Blogger) Modifier les blockquote

Publié par Annak Libellés : (Blogger) Modifications de design, Blogger

Les blockquote sont ces encadrements pré-formatés :

Pour les réaliser, vous surlignez avec la souris le texte à encadrer, puis vous cliquez sur la touche " dans le menu.

Pour en pré-définir le design, vous devez vous rendre dans votre CSS : Présentation > Modifier le code HTML
Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

MODIFICATION DES POLICES

.post blockquote {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que

text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police

font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police

MODIFICATION DES FONDS

.post blockquote {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Vous effacez ce qui ne vous convient pas, sachant que

background-color : red met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas

Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

.post blockquote {border:solid 1px #D8D7D7}

Pour en savoir plus sur les bordures : créer vos encadrements

(Blogger) Modifier la zone de navigation

Publié par Annak Libellés : (Blogger) Modifications de design, Blogger

Nous allons modifier le design de la zone de navigation : police, background et encadrements.

Vous devez vous rendre dans votre CSS : Présentation > Modifier le code HTML
Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

MODIFICATION DES POLICES

Message plus récent

#blog-pager-newer-link a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
.post-body a{text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Accueil

.home-link {text-align : center ; color : red!important; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Message plus ancien

#blog-pager-older-link a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que

text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police

font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police

MODIFICATION DES FONDS

La zone entière de navigation

#blog-pager {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Vous effacez ce qui ne vous convient pas, sachant que

background-color : red met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas

Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

Pour encadrer la zone entière de navigation

#blog-pager {border:solid 1px #D8D7D7}

Pour en savoir plus sur les bordures : créer vos encadrements

(Blogger) Modifier les commentaires

Publié par Annak Libellés : (Blogger) Modifications de design, Blogger

Nous allons maintenant modifier la zone des commentaires : police, background et encadrements.

Les commentaires et les réponses sont gérées par les mêmes lignes de CSS, mais vous pouvez aller plus loin :

Vous devez vous rendre dans votre CSS : Présentation > Modifier le code HTML
Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

MODIFICATION DES POLICES

La totalité

#comments {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Le titre (2 commentaires)

.comments h4 {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Le pseudo

.comment-author a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

L'expression a dit

.comment-author {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Le commentaire

.comment-body{text-decoration:underline;text-decoration:none; font-style: italic;font-weight : bold ;font-weight : normal;font-size:130%; }

La date du commentaire

.comment-timestamp a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que

text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police

font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police

MODIFICATION DES FONDS

Un fond dans la totalité

#comments {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Un fond dans l'avatar

.avatar-image-container {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;padding:5px}

Un fond dans le titre

.comments h4{background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Un fond dans le commentaire

.comment-body {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Vous effacez ce qui ne vous convient pas, sachant que

background-color : red met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas

Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

Pour encadrer toute la zone Commentaires

#comments {border:solid 1px #D8D7D7}

Pour encadrer le titre

.comments h4 {border:solid 1px #D8D7D7}

Pour encadrer l'avatar

.avatar-image-container {border:solid 1px #D8D7D7}

Pour encadrer le commentaire

.comment-body {border:solid 1px #D8D7D7}

Pour en savoir plus sur les bordures : créer vos encadrements

9 oct. 2010

(Blogger) Afficher un widget uniquement en page d'accueil ou en page des articles

Publié par Annak Libellés : (Blogger) Propositions de design, Blogger

Blogger ne permet pas une configuration différente selon les parties du blog : accueil ou articles.
Il est malgré tout possible d'afficher des widgets différents dans ces parties en intervenant sur la structure.

Cette astuce pourra vous être utile pour afficher le widget des derniers articles seulement dans les pages articles et non pas accueil, où ces derniers articles apparaissent.

Voici comment faire :

1ère étape : vous trouvez le nom de votre widget.

C'est simple, vous allez dans Présentation > Eléments de la page > vous cliquez sur Modifier sur le pavé représentant le widget.
Une fenêtre s'ouvre, vous faîtes défiler jusqu'à la fin la barre de navigation :

Et vous trouvez son nom : HTML12 (dans mon exemple)

2ème étape : vous allez dans Présentation > Modifier le code HTML

Vous cochez Développer des modèles de gadgets

Vous recherchez (Edition > Rechercher) :

<b:widget id='HTML12'

Vous devez voir apparaître des lignes ressemblant à cela

<b:widget id='HTML12' locked='false' title='Nouveautés' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Pour faire apparaître ce widget uniquement en pages articles, vous allez rajoutez ce qui est en bleu

<b:widget id='HTML12' locked='false' title='Nouveautés' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Pour faire apparaître ce widget uniquement en accueil, vous allez rajoutez ce qui est en bleu

<b:widget id='HTML12' locked='false' title='Nouveautés' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Sommaire - (Blogger) Suggestions de publication et de navigation

Publié par Annak Libellés : (Blogger) Suggestions de publication et de navigation, (Sommaire)

Voici des idées de personnalisation : liste d'articles, nuage de tags, menus, etc ...

Orientation

Référencement

8 oct. 2010

(Blogger) Placer la pub Adsense sous le titre des articles

Publié par Annak Libellés : (Blogger) Propositions de design, Blogger

J'ai testé plusieurs solutions pour placer la publicité dans les articles, aucune ne me satisfaisait, voici celle que j'utilise.

Première étape :

Pour commencer, vous allez dans Présentation > Eléments de la page > Vous cliquez sur Modifier dans le pavé représentant les messages du blog.

Dans la fenêtre qui s'ouvre, vous cliquez sur Afficher des annonces entre les messages et vous définissez le design et la configuration des publicités :

Vous validez. Les publicités devraient apparaître d'ici quelques minutes entre vos articles.

Deuxième étape :

Maintenant, vous allez dans Présentation > Modifier le code HTML et vous cochez Développer des modèles de gadgets
Vous recherchez la ligne (Edition > Rechercher dans le menu de votre navigateur) correspondant à la publicité :

<b:if cond='data:post.includeAd'>

et vous coupez ce qui suit :

<b:if cond='data:post.includeAd'>
        <b:if cond='data:post.isFirstPost'>
          <data:defaultAdEnd/>
        <b:else/>
          <data:adEnd/>
        </b:if>
        <div class='inline-ad'>
          <data:adCode/>
        </div>
        <data:adStart/>
      </b:if>

Le contenu de votre code peut varier, mais les lignes importantes (en rouge) doivent être présentes.

Vous recherchez maintenant la ligne (Edition > Rechercher dans le menu de votre navigateur)

<div class='post-body entry-content'>

qui représente le contenu de votre article et vous collez le code précédent juste à la suite. Ainsi :

<div class='post-body entry-content'>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>

Vous obtenez :

(Blogger) Afficher un slide vertical des derniers articles parus

Publié par Annak Libellés : (Blogger) Suggestions de publication et de navigation, Blogger

J'avais déjà testé un slide des derniers articles réalisé avec Widget Box, mais je le trouvais trop lent à charger.
J'ai trouvé mon bonheur chez Abu-farhan, un site anglophone.
Le voici :

Pour le réaliser, vous allez dans Présentation > Eléments de la page.

Vous cliquez sur Ajouter un gadget et choisissez HTML/Javascript. Vous y collez ce pavé :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">

</style>
<script language="javascript">
imgr = new Array();
imgr[0] = "http://3.bp.blogspot.com/_RpcwHx8W2XM/TK38WYx_ujI/AAAAAAAAApg/eibXBE0WBB8/s1600/blogger.png";
imgr[1] = "http://3.bp.blogspot.com/_RpcwHx8W2XM/TK38WjjgxEI/AAAAAAAAApk/MUYpV8B6HGA/s1600/f.png";
imgr[2] = "http://1.bp.blogspot.com/_RpcwHx8W2XM/TK38XJAIVqI/AAAAAAAAApo/5VugGSG_-qM/s1600/google.png";
imgr[3] = "http://1.bp.blogspot.com/_RpcwHx8W2XM/TK38XeNX5BI/AAAAAAAAAps/WwjITja3l2M/s1600/rss.png";
imgr[4] = "http://3.bp.blogspot.com/_RpcwHx8W2XM/TK38v9slamI/AAAAAAAAApw/zpmpozFnV2k/s1600/digg.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = "http://les-nouvelles-ficelles-d-annak.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js" type="text/javascript">
</script></div>

Maintenant, vous personnalisez votre slide :

Vous remplacez http://les-nouvelles-ficelles-d-annak.blogspot.com/ par l'adresse de votre blog.

Si vous voulez allez plus loin, la partie CSS se modifie ainsi :

la hauteur du slide :

#spylist {overflow:hidden;margin-top:5px;padding:0px 0px;height:350px;}

la largeur du slide :

#spylist ul{width:280px;overflow:hidden;list-style-type: none;padding: 0px 0px;margin:0px 0px;}

la largeur des liens du slide qui doit être relative à celle du slide :

#spylist li {width:268px;padding: 5px 5px;margin:0px 0px 5px 0px;list-style-type:none;float:none;height:70px;overflow: hidden;background:#fff;border:1px solid #ddd;}

la date :

.spydate{overflow:hidden;font-size:10px;color:#0284C2;padding:2px 0px;margin:1px 0px 0px 0px;height:15px;font-family:Tahoma,Arial,verdana, sans-serif;text-align:right}

les commentaires :

.spycomment{overflow:hidden;font-family:Tahoma,Arial,verdana, sans-serif;font-size:10px;color:#262B2F;padding:0px 0px;margin:0px 0px;}

Le code en javascript peut aussi se modifier :

Les adresses des vignettes

imgr[0] = "http://3.bp.blogspot.com/_RpcwHx8W2XM/TK38WYx_ujI/AAAAAAAAApg/eibXBE0WBB8/s1600/blogger.png";
imgr[1] = "http://3.bp.blogspot.com/_RpcwHx8W2XM/TK38WjjgxEI/AAAAAAAAApk/MUYpV8B6HGA/s1600/f.png";
imgr[2] = "http://1.bp.blogspot.com/_RpcwHx8W2XM/TK38XJAIVqI/AAAAAAAAApo/5VugGSG_-qM/s1600/google.png";
imgr[3] = "http://1.bp.blogspot.com/_RpcwHx8W2XM/TK38XeNX5BI/AAAAAAAAAps/WwjITja3l2M/s1600/rss.png";
imgr[4] = "http://3.bp.blogspot.com/_RpcwHx8W2XM/TK38v9slamI/AAAAAAAAApw/zpmpozFnV2k/s1600/digg.png";

Un point important à connaître, si votre flux RSS est partiel (à vérifier dans Paramètres > Flux d'actualisation), les vignettes de vos articles n'apparaîtront pas, ce sont alors les vignettes ci-dessus qui les remplaceront.

les marges

cellspacing = 6;

Les bordures

borderColor = "#232c35";

Les background

bgTD = "#000000";

Les dimensions des vignettes

thumbwidth = 70;
thumbheight = 70;

La taille de la police

fntsize = 12;

La couleur des liens

acolor = "#666";

Les liens en gras

aBold = true;

Montrer la date

showPostDate = true;

Le sommaire

summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";

Le nombre de résumés qui défileront

numposts = 20;

Le nombre de résumés visibles dans le slide

limitspy=4

La vitesse du slide

intervalspy=4000

(Blogger) Afficher un menu coulissant

Publié par Annak Libellés : (Blogger) Suggestions de publication et de navigation, Blogger

Voici un menu coulissant aux bords arrondis. Son installation nécessite la possibilité de mettre du javascript sur le blog, ce qui est le cas des blogs Blogger. Il n'est pas très difficile à installer et assez joli.

Ayant plusieurs programmes en javascript sur la page, j'ai dû mettre le menu sur un page différente pour qu'il fonctionne parfaitement : Le menu coulissant.

Voici les codes à copier et à coller en HTML, à la suite :

Le code javascript

<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
   //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
   $("#firstpane p.menu_head").click(function()
    {
       $(this).css({backgroundImage:"url(http://3.bp.blogspot.com/_RpcwHx8W2XM/TLM-hnja5UI/AAAAAAAAAqE/Hai5u37oJ4o/s1600/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
          $(this).siblings().css({backgroundImage:"url(http://2.bp.blogspot.com/_RpcwHx8W2XM/TLM-iLyzJuI/AAAAAAAAAqI/mFdXcaiAgxY/s1600/left.png)"});
   });
   //slides the element with class "menu_body" when mouse is over the paragraph
   $("#secondpane p.menu_head").mouseover(function()
    {
         $(this).css({backgroundImage:"url(http://3.bp.blogspot.com/_RpcwHx8W2XM/TLM-hnja5UI/AAAAAAAAAqE/Hai5u37oJ4o/s1600/down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).siblings().css({backgroundImage:"url(http://2.bp.blogspot.com/_RpcwHx8W2XM/TLM-iLyzJuI/AAAAAAAAAqI/mFdXcaiAgxY/s1600/left.png)"});
   });
});
</script>

Le CSS

<style type="text/css">
.menu_list {width: 260px;}
.menu_head {padding: 5px 10px;cursor: pointer;position: relative; margin:1px;font-weight:bold;color:black;background: #C4C4AD url(http://2.bp.blogspot.com/_RpcwHx8W2XM/TLM-iLyzJuI/AAAAAAAAAqI/mFdXcaiAgxY/s1600/left.png) center right no-repeat;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-goog-ms-border-top-left-radius: 10px;
-goog-ms-border-top-right-radius: 10px;
-goog-ms-border-bottom-left-radius: 10px;
-goog-ms-border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;}
.menu_body {display:none;}
.menu_body a{ display:block;color:#767468;background-color:#FAF8F1;
padding-left:30px; text-decoration:none;}
.menu_body a:hover{ color: #000000; text-decoration:underline;}
</style>

Le menu

<div style="float:left" >
<div id="firstpane" class="menu_list">
       <p class="menu_head">TITRE 1</p>
       <div class="menu_body">
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
       </div>
       <p class="menu_head">TITRE 2</p>
       <div class="menu_body">
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
       </div>
          </div>
</div>

Passons à la personnalisation du contenu du menu.

Les titres

<p class="menu_head">TITRE 1</p>
<p class="menu_head">TITRE 2</p>

et les liens

<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>

Si vous désirez ajouter un étage, vous rajoutez le groupe suivant :

<p class="menu_head">TITRE</p>
<div class="menu_body">
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
<a href="adresse du lien" target="_blank">Nom du lien</a>
</div>

Et maintenant, personnalisons le CSS :

La largeur du menu

.menu_list {width: 260px;}

La couleur de la police de l'entête

color:black;

La couleur du fond de l'entête

#C4C4AD

La couleur des liens

color:#767468;

La couleur du fond des liens

background-color:#FAF8F1;

La couleur des liens au survol

color: #000000;

Menu

11 sept. 2011

11 nov. 2010

10 nov. 2010

3 nov. 2010

2 nov. 2010

9 oct. 2010

8 oct. 2010