30 mai 2012

Ajouter Des Liens Non Statiques au Gadget PageList Blogger

Widget Pagelist Blogger
Nous allons voir dans ce tutoriel comment ajouter des liens "non statiques" au gadget PageList de Blogger.
En fait, il existe deux méthodes pour ajouter des URLs (liens externes, urls de libellés, adresse d'un article etc...) au menu de pages Blogger :
- La première méthode (la plus simple) consiste à utiliser la nouvelle interface Blogger.
- La deuxième (un peu plus compliqué) consiste à modifier le code Html de votre modèle.





Méthode 1 : à l'aide de la nouvelle interface Blogger

1. Cliquez sur le lien 'Effectuer la mise à jour dès maintenant' en haut du tableau de bord Blogger. (Vous pouvez toujours revenir à l'ancienne interface à tout moment)
Mise à Jour Nouvelle Interface Blogger
2. Cliquez sur le menu 'gris' à côté du blogue dans lequel vous souhaitez ajouter des liens, puis sélectionnez 'Pages'
Nouvelle Interface Blogger

3. Cliquez maintenant sur 'Nouvelle Page' puis 'Adresse web'
Nouvelle Page Blogger

4. Entrez le titre et l'URL du lien puis cliquez sur 'Enregistrer'
Add Link to Blogger PageList

Méthode 2 : En Modifiant le code HTML

1. Si vous n'avez pas encore installé le gadget "PageList", alors rendez-vous dans l'onglet "Mise En Page" de votre blog, et cliquez sur "Ajouter un gadget".
Dans la liste des gadgets proposée par Blogger, sélectionnez "Pages". Vous pouvez ensuite configurer ce gadget en choisissant un titre et les pages à afficher.

2. Allez maintenant à "Modèle" > "Modifier le code HTML" > "Développer des modèles de gadgets"

3. Rechercher le code du gadget "Pages", comme ceci :
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>

    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>
        </b:loop>
    Insérer vos liens ICI
      </ul>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

4. Insérer les liens entre les balise </b:loop> et </ul> de la façon suivante
<li> <a href="URL_du_lien">Titre Du Lien</a></li>

Voila c'est tout pour ce tutoriel, espérant qu'il répond à vos attentes.

3 commentaires:

  1. bonjour et tout d abord merci beaucoup pour ce tuto j ai un petit probleme je n arrive pas a tous mes articles dans les differents libelles

    RépondreSupprimer
  2. mais de cette manière est ce qu'on peux ajouter plusieurs liens et alors avoir plusieurs articles dans le mm onglets? comme pour les sites, (comme ça s'affiche sur le votre)?Merci! Votre blog est super!!!

    RépondreSupprimer