Gadget messages les plus consultés multicolore avec numéros

By
Advertisement

Besoin d’avoir un gadget «messages les plus consultés»  stylé ? Je crois avoir quelque chose pour vous. Le gadget pour «messages les plus consultés»  que je vais vous proposer ici a la particularité d’afficher une couleur différente pour les articles listés, avec en plus de cela un numéro à côté de chacun d’eux.


Gadget messages les plus consultés multicolore avec numéros


Voici la démarche à suivre pour avoir un gadget «messages les plus consultés» multicolore et numéroté.

Avant de vous lancer dans l’opération que nous allons détailler ici bas, je vous conseille de commencer par ajouter un gadget «messages les plus consultés» dans votre blog, si ce n’est pas encore fait.

1. Rendez-vous sur votre Tableau de bord Blogger >> Modifier le code HTML >> Copiez l’intégralité du code affiché et gardez en une copie dans un fichier txt (à utiliser juste au cas où il y a un problème).

2. Trouvez la partie suivante (faites CTRL+F et collez le texte ci-dessous afin de le trouver) 

/* Variable definitions 
   ==================== 

3. Copiez le code suivant et collez-le juste après la bout que vous venez de trouver.


<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>


4. Trouvez le bout code suivant :

]]></b:skin> 

5. Collez ces lignes css juste avant le code ci-haut :

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} 
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} 
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%} 
#PopularPosts1 ul li:first-child:after{content:"1"} 
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%} 
#PopularPosts1 ul li:first-child + li:after{content:"2"} 
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%} 
#PopularPosts1 ul li:first-child + li + li:after{content:"3"} 
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%} 
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} 
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%} 
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} 
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} 
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px} 
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none} 
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none} 


6. Trouvez le code suivant, puis effacez-le.

<b:widget id='PopularPosts1' locked='false' title='Messages les plus consultés' type='PopularPosts'/> 

7. Collez le code ci-dessous à l’endroit où était le gadget «messages les plus consultés» que vous venez d’effacer à l'étape précédente.

<b:widget id='PopularPosts1' locked='false' title='Messages les plus consultés' type='PopularPosts'> 
<b:includable id='main'> 
   <b:if cond='data:title'> 
    <h2><data:title/></h2> 
   </b:if> 
   <div class='widget-content popular-posts'> 
    <ul> 
     <b:loop values='data:posts' var='post'> 
      <li> 
       <b:if cond='data:showThumbnails == &quot;false&quot;'> 
        <b:if cond='data:showSnippets == &quot;false&quot;'> 
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> 
        <b:else/> 
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a> 
        </b:if> 
       <b:else/> 
        <b:if cond='data:showSnippets == &quot;false&quot;'> 
         <b:if cond='data:post.thumbnail'> 
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/> 
         <b:else/> 
          <img alt='no image' class='item-thumbnail' src='http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/> 
         </b:if> 
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> 
         <div class='clear'/> 
        <b:else/> 
         <b:if cond='data:post.thumbnail'> 
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/> 
         <b:else/> 
          <img alt='no image' class='item-thumbnail' src='http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/> 
         </b:if> 
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a> 
         <div class='clear'/> 
        </b:if> 
       </b:if> 
      </li> 
     </b:loop> 
    </ul> 
   </div> 
  </b:includable> 
</b:widget> 

8. Enregistrez votre modèle. 

Et voilà ! Vous avez un nouveau gadget «messages les plus consultés» multicolore avec des numéros affichés pour chaque article listé.

Paramétrage du gadget

- Allez sur Mise en page >> Cliquez sur “modifier” pour le gadget «messages les plus consultés» et choisissez l’affichage de 5 articles puis enregistrez les modifications.

- Vous pouvez facilement changer les couleurs du gadget en allant sur Modèle, >> Présentation >> Avancé et là, changez les couleurs pour background1, background2, background3 ainsi de suite jusqu'à background7..

Source

@+



14 commentaires:

  1. Un template en cours de changement ... Un nouvel article ...
    Le retour de la revanche de Rodney le Super Héro venu d'Afrique ???

    Je m'disais bien aussi qu'il se tramait quelque chose sur Blogger au bout des doigts depuis quelques jours ...

    Bwaaaaahhhhh !!!

    RépondreSupprimer
    Réponses
    1. Hahahaha, t'a pas perdu ton humour. ça fait toujours plaisir de constater que tu garde un oeil sur le blog, c'est bien. @+

      Supprimer
  2. C'est une technique de super hero !!!

    RépondreSupprimer
  3. Réponses
    1. Merci pareillement la maraine de Blogger au bout du doigt

      Supprimer
    2. Bonsoir Rodney
      J'ai essayé ton code html mais j'ai eu le message suivant:

      The widget with id "PopularPosts1" cannot contain element: "#text". A widget can only contain b:includable elements.

      As-tu une solution a ma proposer?

      Supprimer
    3. il n'existe pas l'élement "#text" dans le widget que j'ai proposé. Vérifie que tu a bien copié le code, plus simple, récopie bien le code.

      Supprimer
  4. Le pb est sur la ligne


    avec cette écriture lorsque j'enregistre, il ne prend pas en compte les lignes suivantes et l'ancienne ligne réapparait.
    C'est à dire:

    il y a le / en plus si je le rajoute j'ai un message d'erreur.

    J'ai fini par abandonner!

    RépondreSupprimer
  5. Salut,

    Savez-vous pourquoi les images miniatures ne s'affichent pas sur mon blog ?
    voici l'adresse http://htcaddict.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Ça fonctionne, j'ai reglé le problème ;-)

      Supprimer
  6. Mes vives félicitations pour votre site! Ça m'a beaucoup aidé et plu, surtout que tous vos partages sont intéressants. Longue vie à votre site. Surtout ne vous découragez jamais ; votre blog est vraiment au top !

    voyance gratuite par mail ; voyance par mail gratuite

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT