Widget blogroll est un gadget Blogger qui propose une liste de liens de vos blogs ou les blogs que vous aimez en un gadget blogroll avec des vignette des blogs ou sites préférés.
Nouveau widget de Blogger blogroll avec des vignettes d'écran
DEMO
 
Ce widget blogroll est une meilleure façon d'afficher une liste de vossites  préférés en montrant les vignettes ou Capture d'écran qui serait plus attrayant et originale.

Comment ajouter widget blogroll avec des vignettes d'écran sur votre blog?


 Aller sur Tableau de Bord ►Modéles ► Modifier le code HTML

- Cochez le développer widgets

Trouver le code suivant (appuyez sur ctrl + F) par la recherche de Blog1 ou type = 'Blog'
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
 Ajoutez le code suivant au-dessus de th e trouvé le code
<b:widget id='LinkList987' mobile='yes' locked='false' title='Blogroll links list' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<div id='linklistthumb'>
<ul>
  <b:loop values='data:links' var='link'>
    <li>
      <a expr:href='data:link.target' target='_blank'>
        <img expr:src='&quot;http://www.bitpixels.com/getthumbnail?code=96168&amp;amp;size=100&amp;amp;url=&quot; + data:link.target'/>
      <div><data:link.name/></div>
      </a>
    </li>
  </b:loop>
</ul>
</div>
    <b:include name='quickedit'/>
  &lt;/div>
</b:includable>
</b:widget>
Maintenant, vous devez mettre le widget blogroll style dans la section css

Aller à Modèles ► Personnaliser ► Avancé ► Ajouter CSS puis ajoutez le code de style de blogueur Blogroll

#linklistthumb {
  width: 100%;
  overflow: hidden;
  display: block;
}
#linklistthumb ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#linklistthumb ul li {
  list-style: none;
  float: left;
  color: #333;
  margin: 5px;
  margin-top: 0px;
  margin-left: 0px;
  padding: 0px;
}
#linklistthumb ul li a:link,
#linklistthumb ul li a:visited {
  background: #f1f1f1;
  float: left;
  padding: 5px;
  font-size: 10px;
  text-align: center;
  display: block;
  overflow: hidden;
}
#linklistthumb ul li a:hover {
  background: #f9f9f9;
  color: #3F200C;
  text-decoration: none;
}
#linklistthumb ul li a img {
  border: 0px;
  float: none;
  display: block;
}

Comment personnaliser widget blogroll avec des vignettes d'écran?

- Vous pouvez modifier la taille des miniatures blogroll en changeant le nombre de tailles disponibles rouges sont 100, 120 et 200

maintenant passer à ► layouts puis modifier l'élément de blogroll comme d'habitude ajouter autant de liens que vous aimez

1 commentaires:

  1. " Ajoutez le code suivant au-dessus de th e trouvé le code " ^^" je comprend la..

    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