Sommaire - (Blogger) Propositions de design

Personnalisation du design général

1. (Blogger) Installer un nouveau template
2. (Blogger) Scinder la colonne en deux sidebar.

Personnalisation des articles

1. (Blogger) Insérer sa signature en fin d'article
2. (Blogger) Afficher le pied d'article uniquement en page des articles

Personnalisation des commentaires

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

Personnalisation des widgets

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

Personnalisation de la pub

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

(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) 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) 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) 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) Insérer sa signature en fin d'article

Signer tous vos messages est une façon de personnaliser votre blog et si la signature est jolie de l'égayer..

Pour ce faire, vous avez deux solutions :

• au cas par cas, comme je l'ai expliqué dans cet article (vous trouverez aussi l'adresse d'un générateur en ligne)
• automatiquement, à chaque article, en passant pas le CSS :

 Vous allez dans Présentation > Modifier le code HTML, vous recherchez la ligne

.post-body

et vous la complétez avec l'adresse de l'image

.post-body {background:url(adresse de l'image);background-repeat:no-repeat;background-position:right bottom;padding-bottom:100px;}

Dans ce cas précis, l'image a été positionnée en bas à droite - background-position:right bottom - et on a créé une marge en bas - padding-bottom:100px - de la hauteur de l'image afin qu'elle n'empiète pas sur le texte.

(Blogger) Scinder la colonne en deux sidebar.

Pour afficher des widgets de petite largeur, il peut être utile de scinder la colonne en 2 sidebar. Bien sûr, Blogger propose des configurations déjà scindées. D'ailleurs, j'en utilise une :

Mais je désirais la scinder à nouveau en bas de colonne. Ainsi :

Voici une solution très simple à mettre en oeuvre.

1ère étape : vous positionnez dans Présentation > Eléments de la page, 2 modules en fin de colonne.

2ème étape : vous trouvez leur "nom".

Vous cliquez sur Modifier sur le 1er widget.Dans la barre Blogger, tout en haut de la fenêtre, tout à la fin de la ligne, il apparaît.
Dans ce cas précis, il s'appelle LinkList2 (il est encadré en rouge)

Vous répétez l'action avec le 2ème widget. Dans mon cas, il s'appelle BlogList1.

3ème étape : Vous allez dans le CSS, Présentation > Modifier le code HTML et rajoutez

#Nom du widget1 {width:47%;float:left;}
#Nom du widget 2 {width:47%;float:right;}

dans mon cas

#LinkList2 {width:47%;float:left;}
#BlogList1 {width:47%;float:right;}

Vous personnalisez ce qui est en rouge.

Et j'obtiens :

(Blogger) Installer un nouveau template

Un des avantages de Blogger est le choix important de templates adaptés que l'on peut trouver sur le net. Pour faire court, un template est un design prêt à l'emploi.
Un de mes sites préférés est btemplates. A ce jour, plus de 2400 templates proposés gratuitement ... si vous n'y trouvez pas votre bonheur ...
Lorsque vous trouvez le design qui correspond à la configuration de votre blog (nombre et répartition des colonnes) et à vos goûts, vous cliquez sur Download

et vous enregistrez le fichier sur votre PC.
Il s'agit d'un fichier .zip, un ensemble de fichiers compressés. Pour le décompresser, j'utilise WinRar > extract to.

Plusieurs fichiers apparaissent :

C'est le Document XML qui nous intéresse.

Maintenant, vous vous rendez dans l'administration du blog : Présentation > Modifier le code HTML.

Si vous n'êtes pas sûr de vous, vous avez la possibilité de sauvegarder votre modèle actuel : télécharger le modèle dans son intégralité. Vous pourrez alors le réinstaller en 2 secondes.

Ensuite, vous cliquez sur Parcourir, vous recherchez ce document XML sur votre PC et cliquez sur Transférer. C'est bon, votre nouveau template est installé, vous pouvez vérifier sur votre blog qu'il a changé de design.

Plus simple, je ne pense pas que ce soit possible.