(Blogger) Modifier le lien Lire la Suite

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;}

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

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'>
        <!-- email post links -->
        <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>

        <!-- quickedit pencil -->
        <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 != &quot;true&quot;'>,</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.

(Blogger) Modifier le widget Statistiques

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

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

(Blogger) Modifier les blockquote

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

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

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 :

• (Blogger) Personnaliser le design de vos réponses aux commentaires
• (Blogger) Ajouter une bulle avec le nombre de commentaires 
• (Blogger) Numéroter les commentaires 

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

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

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'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <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"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <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'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <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>

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

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

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">
<!--
#spylist {overflow:hidden;margin-top:5px;padding:0px 0px;height:350px;}
#spylist ul{width:280px;overflow:hidden;list-style-type: none;padding: 0px 0px;margin:0px 0px;}
#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;}
#spylist li a {text-decoration:none;color:#4B545B;font-size:11px;height:18px;overflow:hidden;margin:0px 0px;padding:0px 0px 2px 0px;}
#spylist li img {float:left;margin-right:5px;background:#EFEFEF;border:0;}
.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}
.spycomment{overflow:hidden;font-family:Tahoma,Arial,verdana, sans-serif;font-size:10px;color:#262B2F;padding:0px 0px;margin:0px 0px;}
-->
</style>
<script language="javascript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPGwafqD_29WuNvgHQ2xCR2ka7mc2eriiwgRSGj_siCUTMdoi14xqEgq77clCNP9VlGbMW90crcS7ASA5gQNeBxW7PNxfYgjnKv1PGe0mOCgyTdfqtGUJfQXtLULJZ-qycie0by6a9Qn0/s1600/blogger.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinvMeY34eQmVcOBXdkUIg4q5gP2WgCUX9gkOJgvgurZRiMXO6GGhGpqywuNMeqqZESy3y1pwvkCYBUfzz8lUVTow6iFkwdNArMt437vzKRCMHJjF1Rre-fyFk8gJJ3l9UdZHtW0TZ3y3k/s1600/f.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipWQ4Em6xpNl0eoLvB9tikb5uaJdQ-gK4RFR9BUSqIW3F_KMJkLjW7bVypDZbNujBYF4_Pw8oivxy7xpV14nps1f2LNq2gnUCX8lJL_QhlqN_z3-mIyxG4PN-0AOHoqvmuzfF9YszswvQ/s1600/google.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSlp8t2CFgqUenqhWEs1ZGgm-MACYhk2OIr6rdWknPWjKFfEna7mbEaHNXx5f7WgHKzoCqB1SZp_HSIA461WN6wlt3Viq88RaxI6q4Qr8pRE5S7qxAJIbS7k0FD6si-1SvxVBWcz114Kk/s1600/rss.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhczscJe7r_cf5zqwsBHgXQaZCOLwFOZLyRdLapetA2NN0cdrTaDUNzfxQSJgp89vRw-oE34tJ9fpkSYypVrEaIF9zoe8DWFjrVdjVx5jipgSEoV02yvgJpBb1vELJBHLfiTyC__H0mCR8/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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPGwafqD_29WuNvgHQ2xCR2ka7mc2eriiwgRSGj_siCUTMdoi14xqEgq77clCNP9VlGbMW90crcS7ASA5gQNeBxW7PNxfYgjnKv1PGe0mOCgyTdfqtGUJfQXtLULJZ-qycie0by6a9Qn0/s1600/blogger.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinvMeY34eQmVcOBXdkUIg4q5gP2WgCUX9gkOJgvgurZRiMXO6GGhGpqywuNMeqqZESy3y1pwvkCYBUfzz8lUVTow6iFkwdNArMt437vzKRCMHJjF1Rre-fyFk8gJJ3l9UdZHtW0TZ3y3k/s1600/f.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipWQ4Em6xpNl0eoLvB9tikb5uaJdQ-gK4RFR9BUSqIW3F_KMJkLjW7bVypDZbNujBYF4_Pw8oivxy7xpV14nps1f2LNq2gnUCX8lJL_QhlqN_z3-mIyxG4PN-0AOHoqvmuzfF9YszswvQ/s1600/google.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSlp8t2CFgqUenqhWEs1ZGgm-MACYhk2OIr6rdWknPWjKFfEna7mbEaHNXx5f7WgHKzoCqB1SZp_HSIA461WN6wlt3Viq88RaxI6q4Qr8pRE5S7qxAJIbS7k0FD6si-1SvxVBWcz114Kk/s1600/rss.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhczscJe7r_cf5zqwsBHgXQaZCOLwFOZLyRdLapetA2NN0cdrTaDUNzfxQSJgp89vRw-oE34tJ9fpkSYypVrEaIF9zoe8DWFjrVdjVx5jipgSEoV02yvgJpBb1vELJBHLfiTyC__H0mCR8/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

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqtJjXl7YWb5sWVfC4pM2twc3mXkdNbcDl3dSFMOUoFregDh1mqYuF3uC-fA_k1hNSLSCWOJKkj9CvMHfZomuVwEd268Feh1f7V1yxlwvG6FYd8pBlT8X7p0KWDLaOj0v9446ywn4wBt4/s1600/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
           $(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Mp2JYqsz5z47iVpKJf6hwdhnsLQCVroJVmyQzKZN7btzt_eqk66LMaKbxZjtCiB683ROBt9o4Urp9qLGTH4_j_ib6-yoOMGS5YITYnhKpVp0X_x1UlHXU2G0VHonp24wUKWCu4oMaA0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqtJjXl7YWb5sWVfC4pM2twc3mXkdNbcDl3dSFMOUoFregDh1mqYuF3uC-fA_k1hNSLSCWOJKkj9CvMHfZomuVwEd268Feh1f7V1yxlwvG6FYd8pBlT8X7p0KWDLaOj0v9446ywn4wBt4/s1600/down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Mp2JYqsz5z47iVpKJf6hwdhnsLQCVroJVmyQzKZN7btzt_eqk66LMaKbxZjtCiB683ROBt9o4Urp9qLGTH4_j_ib6-yoOMGS5YITYnhKpVp0X_x1UlHXU2G0VHonp24wUKWCu4oMaA0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Mp2JYqsz5z47iVpKJf6hwdhnsLQCVroJVmyQzKZN7btzt_eqk66LMaKbxZjtCiB683ROBt9o4Urp9qLGTH4_j_ib6-yoOMGS5YITYnhKpVp0X_x1UlHXU2G0VHonp24wUKWCu4oMaA0/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;

(Blogger) Numéroter les commentaires

Après avoir vu comment personnaliser vos réponses aux commentaires et ajouter une bulle dénombrant les commentaires, voici comment numéroter vos commentaires.

Une astuce assez rapide à réaliser :

On commence par la partie CSS, vous allez dans Présentation > Modifier le code HTML > Vous cochez Développer des modèles de gadgets.

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

]]></b:skin>

qui marque la fin du CSS et juste avant vous collez

.comm-num a:link, .comm-num a:visited {color: white !important;text-decoration: none !important;background: url(http://i46.tinypic.com/nntcue_th.png) no-repeat;width: 64px;height: 64px;float: right;display: block;margin-right: 5px;margin-top: -15px; /*comments-counter position*/text-align: center;font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;font-size: 15px;font-weight: bold;padding-top:15px}
.comm-num a:hover, .comm-num a:active {color: gray !important;text-decoration: none !important;}

http://i46.tinypic.com/nntcue_th.png est l'adresse de votre bulle
width: 64px;height: 64px : ce sont ses dimensions

Passons maintenant à la partie configuration, toujours dans Présentation > Modifier le code HTML > Vous cochez Développer des modèles de gadgets.

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

<b:loop values='data:post.comments' var='comment'>

et vous collez juste avant

<script type='text/javascript'>var CommentsCounter=0;</script>

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

<data:commentPostedByMsg/>

et vous collez juste après

<span class='comm-num'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Vous enregistrez le modèle et admirez le résultat.

J'ai utilisé la même bulle que pour les titres, Dblab, qui propose cette astuce, expose d'autres modèles à sauvegarder.

(Blogger) Ajouter une bulle avec le nombre de commentaires

Une jolie astuce trouver sur un site anglais pour rajouter une bulle à droite du titre de l'article. Dans cette bulle, le nombre de commentaires présents dans l'article.

Un exemple :

D'autres bulles sont disponibles sur ce site, BdLab.

Pour ceux qui ne comprennent pas l'anglais, voici comment réaliser cette astuce.

Vous allez dans Présentation > Modifier le code HTML > Vous cochez Développer des modèles de gadgets.

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

]]></b:skin>

qui marque la fin du CSS et juste avant vous collez

.comment-bubble {float : right;width : 48px;height : 48px;background : url(http://i43.tinypic.com/dljpzo.jpg) no-repeat;font-size : 18px;margin-top : -15px;margin-right : 2px;text-align : center;
position:float;}

Si vous choisissez une autre image, vous modifierez son adresse qui est en rouge et peut-être ses dimensions en bleu.

Ensuite, on passe à la partie configuration : toujours dans Présentation > Modifier le code HTML, vous recherchez (Edition > Rechercher dans le menu de votre navigateur)

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

que vous remplacez par

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<b:if cond='data:post.link'>

Vous cliquez sur Enregistrer le modèle et c'est tout. Ce n'est pas très compliqué à réaliser et le résultat est sympa.

(Blogger) Activer l'anti-clic droit

L'anti-clic droit ne stoppera pas les internautes aguerris, d'autres solutions existent, mais ralentira la copie de vos images et textes.

Vous allez dans Présentation > Modifier le code HTML.
Vous recherchez - Edition > Rechercher dans le menu de votre navigateur - la ligne

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Ce qui est important est en bleu, le reste peut différer.

Et vous la remplacez par

<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false">

Vous constaterez ensuite qu'il est impossible de surligner un passage de votre blog avec la souris et de faire apparaître le menu de votre clic droit.

(Blogger) Personnaliser le design de vos réponses aux commentaires

Une astuce pour distinguer vos réponses des commentaires postés par vos visiteurs.

Un exemple sur cette saisie d'écran :

Vous allez dans Présentation > Modifier le code HTML > vous cochez Développer des modèles de gadgets
On commence par la partie configuration : vous recherchez - Edition > Rechercher dans le menu de votre navigateur - ce passage qui concerne les commentaires de l'auteur du blog :

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>

Les lignes importantes sont en bleues. Au mileu, peu importe si vous avez d'autres lignes.

Vous rajoutez à la suite :

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/> 

Ensuite, vous devez avoir :

            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>

Là encore, les lignes importantes sont en bleues et au mileu, peu importe si vous avez d'autres lignes.

Vous rajoutez à la suite :

</b:if>

On passe maintenant à la partie design, vous recherchez :

]]></b:skin>

qui marque la fin du CSS et juste avant, vous collez

.comment-body-author {background: #000;color: #fff;border: 1px solid #ff0000;padding:5px}

A vous de personnaliser le design :

• le fond : background
• la couleur de la police : color
• la bordure : border
• les marges : padding
• etc ...

(Blogger) Afficher un slide des derniers articles parus

J'avais envie d'un slide, un diaporama, en tête de colonne avec les derniers articles qui défilent. Mais je ne trouvais que des modèles compliqués à mettre en oeuvre et où il fallait actualiser manuellement les liens et images des articles. Quand je voulais une mise à jour automatique !

En allant sur WidgetBox (inscription gratuite), j'ai créé un slide de la largeur des articles (600px) et d'une hauteur de 200px, à partir de l'adresse du blog :

• Make a widget > Blog Feed > basic
• saisissez l'adresse de votre blog
• cliquez sur Make widget

 J'ai épuré au maximum le design pour obtenir :

Le zigouigoui Get Widget ne me convenait pas. Pour l'enlever, il faut choisir la version payante.

J'ai donc plutôt choisi

• de copier le code embed, même si une fonction facilitant l'insertion sur Blogger est proposée.
• de coller ce code, tel quel, dans une page du bloc note et de sauvegarder sous 

nom du fichier : featured.html
type : tous les fichiers

Ensuite, j'ai hébergé ce fichier chez ArchiveHost (gratuit) et obtenu une adresse.

http://sd-1.archive-host.com/membres/up/1161825247/Featured.html

J'ai créé un iframe

<iframe frameborder="no" height="200" name="featured" scrolling="no" src="http://sd-1.archive-host.com/membres/up/1161825247/Featured.html" width="600"></iframe>

En rouge : l'adresse de la page html hébergée.
En bleu : la hauteur de cet iframe qui est la même que celle du widget. Le zigouigoui est hors dimensions fixées pour le widget.
En vert : la largeur de l'iframe qui est la même que celle du widget.

Je colle ce code en HTML et  j'obtiens :



A voir : Un slide vertical

(Blogger) Créer un sitemap

Un sitemap est un plan de site, il a pour but de communiquer à Google la liste des articles présents sur votre blog et ainsi permettre une meilleure indexation.

Il existe 2 méthodes :

• La première commune à tous les blogs utilise le flux RSS de votre blog pour informer Google des nouvelles parutions (voir s'inscrire à Google SiteMaps). 

L'inconvénient est que les anciens articles ne sont pas signalés à Google. Pour ce faire, nous allons utiliser

• Une seconde méthode propre à Blogger :

Allez dans Outils pour les webmasters >  cliquez sur le nom de votre blog > Configuration du site > Sitemaps > cliquez sur Envoyer un sitemap

Maintenant, vous complétez la case blanche à droite de l'adresse de votre blog pour

les 100 premiers articles avec

atom.xml?redirect=false&start-index=1&max-results=100

Les 100 suivants avec

atom.xml?redirect=false&start-index=101&max-results=100

Et ainsi de suite, selon le nombre d'articles présents sur votre blog :

Dans les jours qui suivent, vous devriez trouver davantage de vos articles référéncés par Google.

(Blogger) Ajouter des meta tags

Les meta tags sont destinés à informer les moteurs de recherche sur les particularités de votre blog : langage, description, mots clés ...
Si vous avez déjà regardé la source de votre blog (Affichage > code source de la page), vous avez dû constater l'absence des meta tags description et mots clés.
Ils sont pourtant utiles pour le référencement de votre blog.

Pour les rajouter, allez dans Présentation > Modifier le code HTML.

Cherchez la ligne

<head>

et collez à la suite, en personnalisant

 <b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Description du blog' name='Description'/>
</b:if>
<meta content='Mots clés séparés par une virgule' name='Keywords'/>

<b:if cond='data:blog.url == data:blog.homepageUrl'> signifie que cette ligne doit seulement apparaître en page d'accueil

Ainsi :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Aide et Astuces pour créer et personnaliser un blog' name='Description'/>
</b:if> 
<meta content='OverBlog,Blogger,Aide,Astuces' name='Keywords'/>

Et dès le passage de Google :

(Blogger) Ouvrir les liens externes dans un autre onglet

Un des handicaps de la barre d'outils de Blogger est qu'elle ne possède pas la fonction "ouverture des liens dans une autre fenêtre".

Bien sûr, au cas par cas, il suffit d'aller en HTML et de rajouter target="_blank" pour chaque lien

<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/" target="_blank">>Les nouvelles ficelles d'Anna K</a>

Pour généraliser cette fonction à tous les liens du blog, il suffit :

• d'aller dans le CSS : Présentation > Modifier le code HTML
• de cocher Développer des modèles de gadgets
• de rechercher la ligne

<div class='post-header'>

• de rajouter à la suite

<base target='_blank'/> 

(Blogger) Modifier la disposition du titre des articles

Actuellement, si vous regardez la barre noire tout en haut de votre navigateur, vous constatez que le titre de votre blog apparaît avant le titre de votre article.

Ce qui signifie que la mise en valeur est faite sur le nom de votre blog, et non pas sur celui de l'article. Ce qui explique les résultats sur Google :

Pour un meilleur référencement, l'inverse est préférable : le titre de l'article avant le titre du blog.

Pour modifier cela :

• rendez vous dans votre CSS : Présentation > Modifier le code HTML
• Recherchez la ligne

<title><data:blog.pageTitle/></title>

• Remplacez la par

<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

et vérifiez sur votre blog.

 
Google devrait effectuer les modifications dans les quelques jours.