Chers utilisateurs francophones de Blogger, le blog Blogger Code cessera de fonctionner à partir du 31 juillet prochain.
Afin de répondre à vos questions, le forum Blogger reste à votre disposition.

Soraya

Gadget Liste de liens avec vignettes (avec bitpixels)

Posted by : at : 4 mai 2013
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

Dernière modification : 2015-04-19T20:09:55Z
PageSpeed | MobileFriendly | TestingTool | FBTool | Modifier l'article
Partager cette publication
Discussions Discussions Flux

Twitter : Bouton Tweeter / Tweeter button

Le bouton Tweet de Twitter , configuration pour Blogger , validé HTML5 . Diverses configurations pour les modèles standards, dynamiques,...

Facebook : Open Graph protocol

Contrôlez les éléments de votre blog à partager sur Facebook. Convient pour les modèles standards et dynamiques. Configuration de la bal...
Scan express du blog
Les forums des produits Google