Développements Gadget Liens Gadget Liste de liens avec vignettes (avec bitpixels)

Gadget Liste de liens avec vignettes (avec bitpixels)

Gadget Liste de liens avec vignettes (avec bitpixels)
Gadget Liste de liens avec vignettes 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

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

Vignettes volte/face, 100/120/200 pixels


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 ?
Titre du gadget
Thème
Taille de la miniature px
Ouverture des liens
liens rel="nofollow"
Condition d'affichage


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='Articles 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 articles.

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


Déplacer le gadget


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.


Gadget Liste de liens avec vignettes


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 :


Modifier thème et taille


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


Haut de page


Liens divers



Haut de page


Dans le même dossier



Haut de page


Les discussions Blogger Google+ Facebook
Les publications populaires de la semaine
Plan du blog
Les forums
Liens de la page
URL
HTML
BB Code
Licence CC BY-NC-SA 3.0
Droits de propriété intellectuelle
Cette page intitulée « Gadget Liste de liens avec vignettes (avec bitpixels) » issue de Blogger Code (http://bloggercode-blogconnexion.blogspot.com/) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, remixer, arranger, et adapter le contenu de cette page à des fins non commerciales dans les conditions fixées par la licence, tant que le code ci-dessous est intégré dans la copie.