Gadget Liste de liens avec vignettes (avec bitpixels) | Blogger Code

Quoi de mieux que d'afficher une liste de vos liens favoris montrant une capture d'écran de ceux-ci. La réalisation est possible. Il suffit de modifier quelques lignes du code HTML du gadget "Liste de liens", de combiner le service BitPixels et le tour est joué.

Présentation des vignettes Configurer le code HTML du gadget Le code du gadget Les paramètres du gadget Modifier le thème ou/et la taille des miniatures dans le code du gadget Liens divers

Présentation des vignettes

Retravaillé complètement par rapport à la première version que j'avais développé en 2011, pour cette nouvelle mise à jour, j'ai ajouté un certain nombre de points :

• Nouvelle ossature HTML
• Nouveaux styles CSS
• Choix entre 2 présentations :
  1. Vignette simple
  2. Vignette volte/face
• Réglages options liens : Fenêtre cible et rel="nofollow".
• etc...

Vignettes simples, 100/120/200 pixels
Tomate Joyeuse	Parkstrip.fr	Les Zinfos

Vignettes volte/face, 100/120/200 pixels
Le blog de Prac, les outils Google	Southern Speakers	Dicas Para Blogger

Haut de page

Configurer le code HTML du gadget

Choisissez d'abord les paramètres dans ce tableau. Ensuite, recopiez les codes ci-dessous aux endroits mentionnés.

N° d'identification du gadget	Choisir entre 1 et 999. Si vous avez déjà installés des gadgets "libellés" sur votre blog, veillez à ne pas choisir le même numéro.
Afficher dans la version mobile personnalisée ?	OUI NON
Titre du gadget
Thème	Simple Volte/Face
Taille de la miniature	100 120 200 px
Ouverture des liens	Dans la même fenêtre Dans une nouvelle fenêtre
liens rel="nofollow"	Non Oui
Condition d'affichage	Toutes les pages Messages Pages statiques Index Archive L'accueil Messages Pages statiques Index Archive L'accueil

Haut de page

Le code du gadget

<b:widget id='LinkList501' locked='false' mobile='yes' title='Liens avec vignette' type='LinkList'>
<b:includable id='main'>
<!-- Thumbnails linkList by Blogger Code - Ref.: http://goo.gl/nA8ZW -->
<link href='https://sites.google.com/site/bloggercodebc/home/widget/BCThumbnailsLinkList.css?attredirects=0&amp;amp;d=1' rel='stylesheet' type='text/css'/>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
  <b:loop values='data:links' var='bcThumbLink'>
    <div class='bcmode1 bc100'>
      <a expr:href='data:bcThumbLink.target'>
        <div class='thumbLink'>
          <img expr:src='&quot;http://www.bitpixels.com/getthumbnail?code=BloggerCode&amp;amp;size=100&amp;amp;url=&quot; + data:bcThumbLink.target' alt=''/>
        </div>
        <div class='nameLink'>
          <data:bcThumbLink.name/>
        </div>
      </a>
    </div>
  </b:loop>
</div>
<div class='thumbnailscredits'>
  <a href='http://www.bitpixels.com/'>Website thumbnails provided by BitPixels</a>
  <span class='item-control blog-admin'>
    <a expr:href='&quot;//www.blogger.com/rearrange?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;widgetType=&quot; + data:widget.type + &quot;&amp;amp;widgetId=&quot; + data:widget.instanceId + &quot;&amp;amp;action=editWidget&amp;amp;sectionId=&quot; + data:widget.sectionId' expr:onclick='&quot;return _WidgetManager._PopupConfig(document.getElementById(&apos;&quot; + data:widget.instanceId + &quot;&apos;));&quot;' expr:target='&quot;config&quot; + data:widget.instanceId' expr:title='data:edit-link'><data:edit-link/></a>
    <a href='http://bloggercode-blogconnexion.blogspot.com/2011/01/widget-liste-de-liens-avec-image.html' target='_blank' title='Tutoriel'>Tutoriel</a>
  </span>
</div>
</b:includable>
</b:widget>

Où copier ce code ?
Tableau de bord ► Modèle ► Modifier le code HTML

Emplacement	A copier juste avant
Au-dessus du gadget blog1	<b:widget id='Blog1' locked='true' title='Messages du blog' type='Blog'>

Si vous avez suivi toutes les étapes, dans la mise en page, le gadget est à présent visible dans la colonne centrale juste au-dessus des messages.

Si l'emplacement ne vous convient pas, déplacez-le à votre convenance.

Haut de page

Les paramètres du gadget

Étant donné qu'il s'agit d'un gadget "liste de liens" modifié, les paramètres sont identiques à ceux du gadget "liste de liens (logique).

Tous les paramètres ont été conservés. Titre, nombre de liens à afficher, triage, nom et url.

Pour chaque blog ou site n'ayant jamais fait appel à BitPixels, la thumbnail mettra un peu de temps à s'afficher (quelques jours).

Haut de page

Modifier le thème ou/et la taille des miniatures dans le code du gadget

Le fichier CSS a été incorporé dans le code HTML du gadget. Il contient les 3 tailles (100-120-200) et les 2 thèmes (simple et volte/face). Si pour une raison ou une autre vous avez besoin de modifier ces paramètres, changez les données directement dans le code HTML du gadget :

A noter que le gadget n'apparaîtra sur le blog que si il contient au moins un lien.


Haut de page

Liens divers

• Documentation - Code original (Gadget : Liste des liens)
• Développement similaire - Liste des liens avec thumbnails (Avec Apercite)
• Service - bitpixels.com