DéveloppementsReconversion de gadgets

Gadget Liste de liens avec vignettes (avec bitpixels)

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

  • Facebook : Boîte de commentaires [Comments Box]
    La boîte des commentaires Facebook, configuration pour Blogger. Code validé HTML5. Avec ou sans mode administrateur. Version HTML ou gadget AddToBlogger. Divers réglages : largeur, ordre de tri, thème, nombre de commentaires, etc. etc.
  • Résumés des articles avec images réactives [Pack 2016]
    Ce développement permet d'automatiser les résumés des articles dans les index d'un blog Blogger, ainsi que d'afficher des images réactives. Le pack contient les dernières évolutions du langage XML et un codage inédit permettant à l'utilisateur de le personnaliser aisément section par section. Les solutions intégrées sont totalement inédites et n'ont jamais été publiées sur le web.
  • 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.

Fiches les plus consultées de ce blog

  • Gadget : Blog [Blog]
  • Gadget : Diaporama [Slideshow]