DéveloppementsReconversion de gadgets

Gadget Liste de liens avec vignettes (avec bitpixels)


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Description Gadget Gadget Version Template Version
Thumbnails ajoutés au gadget Blogger : Liste de liens. Choix entre 2 présentations, paramètres des liens, 3 tailles des vignettes, etc. Screenshots générés par bitpixels.
LinkList
1
1
2
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


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


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


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).


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.


Liens divers

Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

  • Populaire
    Il fait à la fois office de badge , de timeline et de poster d'abonnés, c'est le remplaçant de la LikeBox pour les pages Facebook . Générateur spécifique pour les blogs Blogger , code validé HTML5 . Ce module permet à vos lecteurs de se souscrire à votre page Facebook. Il affiche le lien de la page, accompagné du bouton LIKE , des derniers posts et des vignettes des profils des abonnés. Diverses configurations pour les modèles standards ou pour éditeurs HTML standards. Fourni également via un gadget Add-To-Blogger. Réglages : dimensions, profils, timeline, couverture, restriction d'affichage, etc.
  • Populaire
    L'un des avantages avec Blogger, c'est que l'on peut éditer tout ce que l'on veut (ou presque). L'éditeur des articles est pourvu d'un mode "rédaction", avec des fonctionnalités qui permettent d'enrichir facilement le contenu. Très pratique pour ceux qui veulent écrire des articles rapidement. Et puis, il y a le mode "HTML" qui permet de compléter ou de corriger le contenu des articles. Dans ce mode, on peut envisager par exemple, de créer un tableau avec des images. Ça tombe bien, c'est le sujet de cette publication :D.
  • Variables d'habillage - Les arrière-plans [background]
    Populaire
    Le terme background est employé pour qualifier une variable d'habillage. Une variable de type background contient les paramètres d'un arrière-plan .
  • Gadget : Diaporama [Slideshow]
    Populaire
  • Facebook : Bouton partager [Share button]
    Populaire
    Le bouton Partager de Facebook , configuration pour Blogger , validé HTML5 . Diverses configurations pour les modèles standards, dynamiques, éditeurs HTML standards et gadgets AddToBlogger. Raccordement de l'url de l'article, de la page courante, du blog, ou à une simple adresse web. 2 formats : Bouton ou lien. 6 apparences : Lien et icône. Lien seul. Icône seul. Bouton simple. Bouton compteur vertical ou horizontal. Le bouton emploie automatiquement la langue du blog. Autres réglages : Dimensions, identifiant application, CSS personnalisés, etc.