Nouveau widget de Blogger blogroll avec des vignettes d'écran

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.

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