Gadget populaire du message en mode galerie

Découvrez le Widget message populaire en mode Galerie, qui est intéressant, voir l'image ci-dessous. Mais le widget peut être installé directement sur le blog qui utilisent l'image de l'article et le titre.

DEMO

Si vous êtes intéressés, voici comment faire:

1. Connectez-vous pour Blogger avec votre compte
2. Après cela, allez sur Modifier le modèle HTML >> 
3.  Ensuite, entrez le code suivant au-dessus ]]></b:skin> :
   

   .PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}

   .PopularPosts ul{padding:5px 0}

   .PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}

   .PopularPosts .item-content{position:relative;float:left;margin:0}

   .PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}

   .PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}

   .PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}

   .PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

   Code couleur rouge ci-dessus est la longueur et la largeur de la vignette ou image, vous pouvez modifier et d'ajuster la largeur de la barre latérale sur le modèle de votre blog.
    
4. Ensuite, allez à Mise en place >> Ajouter un gadget  
5. Après l'ouverture du gadget message populaire,  faite les réglages comme sur l'image ci-dessous:
   
   
   
   
   
   Il convient de laisser seulement une vignette, laissez la case vierge n'a pas besoin d'être vérifié extrait. Titre et le nombre de messages que vous souhaitez afficher à vous.
6. Après les étapes ci-dessus, retournez à Modifier le code HTML (Développez Modèles Widget vérifier), trouver le code suivant :
   <b:widget id='PopularPosts1' locked='false' title='Popular Posts' 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;'>
               <!-- (1) No snippet/thumbnail -->
               <a expr:href='data:post.href'><data:post.title/></a>
             <b:else/>
               <!-- (2) Show only snippets -->
               <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               <div class='item-snippet'><data:post.snippet/></div>
             </b:if>
           <b:else/>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (3) Show only thumbnails -->
               <div class='item-thumbnail-only'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               </div>
               <div style='clear: both;'/>
             <b:else/>
               <!-- (4) Show snippets and thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                 <div class='item-snippet'><data:post.snippet/></div>
               </div>
               <div style='clear: both;'/>
             </b:if>
           </b:if>
         </li>
         </b:loop>
       </ul>
       <b:include name='quickedit'/>
     </div>
   </b:includable>
   </b:widget>
7. Une fois que vous le trouvez, remplacez-le par le code suivant:
   
   <b:widget id='PopularPosts1' locked='false' title='Most Product View' 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;'>
               <!-- (1) No snippet/thumbnail -->
               <a expr:href='data:post.href'><data:post.title/></a>
             <b:else/>
               <!-- (2) Show only snippets -->
               <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               <div class='item-snippet'><data:post.snippet/></div>
             </b:if>
           <b:else/>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (3) Show only thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               </div>
               <div style='clear: both;'/>
             <b:else/>
               <!-- (4) Show snippets and thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                 <div class='item-snippet'><data:post.snippet/></div>
               </div>
               <div style='clear: both;'/>
             </b:if>
           </b:if>
         </li>
         </b:loop>
       </ul>
       <b:include name='quickedit'/>
     </div>
   </b:includable>
   </b:widget>
8. Enfin, enregistrer des modèles voient les résultats.