Comment afficher Gadget Message populaire avec juste des images

Un des Widgets les plus populaires utilisés par les blogueurs sur
Blogger. Le Widget officiel "Message populaire". 

J'ai donc décidé de modifier le gadget,




Et de lui donner un autre style :

Et oui vous pouvez afficher le gadget "Message Populaire" en image.
Donc, voici les étapes pour faire de votre gadget messages populaire comme une grille d'image :
1. Aller à la page Mise en page et ajouter le gadget populaire messages, si vous n'avez pas déjà ajouté.

2. Modifier les paramètres des gadgets de sorte qu'il affiche les vignettes et non l'extrait de

3. Maintenant, allez à Modèle / Conception > Edit HTML . 

NE PAS Cliquez sur Développer le gadget template. Laissez-la décochée, et chercher :PopularPosts1 (Faites un Ctrl + F pour le trouver dans votre modèle) et vous obtiendrez une ligne comme celle-la 

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

4. Modifiez cette ligne 

<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 == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (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 == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title'>
<b:if cond='data:post.thumbnail'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
<b:else/>
<img alt='' border='0' expr:height='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW6B4DiR_L3YFV6g2xovw6C5ZJVUx_JvsIlh3P1v3x0Yvm-YpGfPTdK4zAfho1NRNWetQ-a1DJnK7TeDDZv5jtMtjijQwXYaFP-W7tEk_T7vYXQiMaQxnZGlyGT3vTwG5heOTjCR2WZJo/s72-c/default.png' expr:width='data:thumbnailSize'/>
</b:if>
</a>
</div>
</div>
<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>

5. Enregistrer votre modèle

6. Maintenant, allez dans le Concepteur de modèle > Avancé > Ajouter CSS et collez le code suivant CSS là, et s'appliquent à votre Blog

.popular-posts .item-thumbnail{float:left;}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}

La présente URL de l'image dans le code du widget est la vignette par défaut qui sera affiché si l'article n'a pas une image qui lui est associée. 

Vous pouvez le modifier pour obtenir une vignette personnalisée par défaut. 

Revenant Retour à l'ancienne

Si vous n'êtes pas satisfait par la façon dont elle regarde, puis revenir en arrière. 

Voici les étapes:

Il suffit de retirer le Widget populaire messages de la mise en page Page.If vous avez besoin de la version originale, puis ajoutez-le à nouveau
Retirez le CSS qui vous avez ajouté à Designer modèle> Avancé> Ajouter CSS
C'est tout.
Source du Tuto : http://lebloggers.blogspot.fr