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

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.

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXXsW62RG506EaOc4vlIJog7AsycEqqNvLSFujmmKzCLIRLEtvl6L1kLnD_qnOQXk-gbt8g0leQCLyGLx0vf3py85MpJt1vh1OR6pl7E4VmXyoWk-jZWdtyGU0SiNALhzNzJXrB4jwoY/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXXsW62RG506EaOc4vlIJog7AsycEqqNvLSFujmmKzCLIRLEtvl6L1kLnD_qnOQXk-gbt8g0leQCLyGLx0vf3py85MpJt1vh1OR6pl7E4VmXyoWk-jZWdtyGU0SiNALhzNzJXrB4jwoY/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

@+