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.

Gadget populaire du message en mode galerie



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:

    gadget message populaire

    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.

2 commentaires:

  1. bonjour j'ai essayé mais la disposition des messages est horizontale

    RépondreSupprimer
  2. il faut ajouter le gadget dans la colonne de ton blog et ajuster la taille des images avec les chiffres en bleu.

    RépondreSupprimer

Laisser un commentaire

💯 Meilleurs Articles sur LeBlogger.fr : Astuces Blogger et Blogspot

 
LeBlogger.fr - Astuces Blogger et Blogspot © 2013. Tous Droits Reservés. Produit Par Biz-Media

Le site le plus complet d'aide aux créateurs de blogs avec Blogger. Tutoriels, conseils et astuces.
LeBlogger est une plateforme d'actualité. C'est un service qui offre l'actualité Web, Astuces iPhone et astuces Facebook et des milliers de couverture pour vos page Facebook.
Services gratuits pour webmasters , des widgets pour votre site ou blog, pour mieux capter l'attention de vos visiteurs.
Top