DéveloppementsReconversion de gadgets

Gadget Liste de liens avec vignettes (avec Apercite)


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, 19 tailles des vignettes, etc. Screenshots générés par Apercite.
LinkList
1
1
2
Thumbnails linklist with Apercite
A quelques détails près, c'est le même développement présenté précédemment. Mêmes caractéristiques, même design, même construction, sauf...
...que la différence vient du fait que les captures ne proviennent pas du même service.
bis repetitas

Présentation des vignettes

Comme vous le constaterez, le design et les options restent inchangés.

Les screenshots sont générés par Apercite. Ce service propose gratuitement pas moins de 19 tailles différentes réparties en deux séries (4/3 et 16/10). Les tailles varient de 80 pixels jusqu'à 800px.


Vignettes simples, 80x60, 100x75, 120x90, 160x120, etc

Vignettes volte/face, 80x60, 100x75, 120x90, 160x120, etc


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='LinkList502' locked='false' mobile='yes' title='Liens avec vignette' type='LinkList'>
<b:includable id='main'>
<!-- Thumbnails linkList by Blogger Code - Ref.: http://goo.gl/6avy6 -->
<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 bc80x60'>
      <a expr:href='data:bcThumbLink.target'>
        <div class='thumbLink'>
          <img expr:src='&quot;http://www.apercite.fr/api/apercite/80x60/oui/&quot; + data:bcThumbLink.target' alt=''/>
        </div>
        <div class='nameLink'>
          <data:bcThumbLink.name/>
        </div>
      </a>
    </div>
  </b:loop>
</div>
<div class='thumbnailscredits'>
  <a href='https://www.apercite.fr/'>Website thumbnails provided by Apercite</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/2013/05/widget-thumbnail-linklist-apercite.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


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 toutes les tailles 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 :
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

DéveloppementsMulti-versions
Facebook : Bouton J'aime [Like button]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire