De nous à vous...

Nous vous avons présenté Delicious dans une note précédente intitulée « Delicious : outil d'organisation et de partage de pages web ». L'objectif de cette nouvelle note est d'aller plus loin en vous accompagnant dans la mise en place d'un flux Delicious sur votre blog. Il s'agit en fait du flux RSS de votre Delicious.

Pour ce faire, il faut :

-          se connecter sur sa page Delicious.

-          se mettre sur la page exacte dont on souhaite récupérer le flux. Par exemple, si nous voulions le flux général de Solidaires du monde, nous irions à la page : http://delicious.com/solidairesdumonde.org/

Et si nous voulons un flux spécifique d'un tag ou d'un bundle, comme par exemple        celui des OMD, il faut se rendre sur la page dédiée :           http://delicious.com/solidairesdumonde.org/omd

-          cliquer sur l'onglet Tools (le deuxième bouton tout en bas de page)

Là, vous arrivez sur la page générant les flux comprenant 5 sous-catégories permettant de générer vos flux de différentes façons.

 

La deuxième catégorie « Add your bookmarks and tags to your website or blog » est celle qui nous concerne. Pour information, les catégories offrent des fonctionnalités tout aussi intéressantes :

-          La catégorie « Browser buttons and add-ons for your browser or website » permet d'ajouter un onglet dans la barre de navigation de votre navigateur (Google, Firefox, etc...).

-     La catégorie « Add badges that encourage people to bookmark your website or your blog » permet d'ajouter un bouton pour que votre blog se fasse bookmarker (spécial geek J).

 

La deuxième catégorie « Add your bookmarks and tags to your website or blog » permet de générer un flux selon :

-          Linkrolls (pour faire un flux faisant défiler les bookmarks)

-          Tagrolls (pour afficher juste les tags Delicious)

-          Network badges (pour afficher un petit widget comme ci-dessous)

 

 

 

 

 

A noter que chaque élément est personnalisable. On peut choisir d'afficher, ou non, son identifiant, le nombre de bookmarks, le nombre de personnes dans notre réseau, etc.

-          Une fois le code récupéré (commençant par la balise <script type=...>), copier ce dernier là où vous souhaitez que votre flux apparaisse. Par exemple, si vous voulez que votre flux Delicious apparaisse dans votre colonne de droite, Allez dans Présentation>Configuration Avancée Puis Allez sur « Modèle de la colonne de droite »  en cliquant sur « Modifier Template ».

-          Dans un second temps, vous devez allez dans Présentation>Contenu des colonnes. Allez en bas de la page et cliquez sur « Ajouter le code HTML/Javascript ».

Une fenêtre s'ouvre.

-          Renseignez le titre que vous voulez donner à votre flux Delicious puis dans la partie « Contenu de l'élément », copiez le code de votre flux (le même que celui copié dans votre colonne de droite).

-          Enregistrez l'élément.

-          Puis choisissez d'ajouter dans la colonne de votre choix (à droite dans l'exemple ci-dessus) l'élément Delicious.

-          Mettez à jour ces informations.

Votre flux Delicious apparaît alors sur votre blog mais n'est pas mis en forme.

Si vous souhaitez personnaliser l'aspect de votre Delicious, vous pouvez copier le code ci-dessous (en modifiant les éléments selon votre convenance) dans votre feuille de style CSS présente dans Présentation>Configuration Avancée Puis Allez sur « Feuille de styles»  en cliquant sur « Modifier Template »:

.delicious-posts { width: 160 px; font-family: arial; font-size:12px; text-align:justify;padding: 0.60em;}

.delicious-posts ul, .delicious-posts li, .delicious-banner { margin: 0; padding: 0;

.delicious-post { border-top: 1px solid #eee; padding: 0.10em; font-size: 14px;  }

.delicious-banner a { font-size: 16px; color:#a15426; }

.delicious-posts a:hover { text-decoration: underline;  color:#04a1ff ; }

.delicious-posts a { text-decoration: none; color:#04a1ff  padding: 0.1em;  }

.delicious-post a { color: #04a1ff ;}

 

La traduction de ce code CSS :

.delicious-posts { width: 160 px; font-family: arial; font-size:12px; text-align:justify;padding: 0.60em;} (permet de personnaliser l'apparence générale du texte et la largeur de la colonne)

.delicious-posts ul, .delicious-posts li, .delicious-banner { margin: 0; padding: 0; }(permet de personnaliser l'apparence et l'emplacement des tirets)

.delicious-post { border-top: 1px solid #eee; padding: 0.10em; font-size: 14px;  } (permet de personnaliser l'apparence du titre des bookmarks)

.delicious-banner a { font-size: 16px; color:#a15426; } (permet de personnaliser le titre de la colonne de Flux « My Bookmarks Delicious »)

.delicious-posts a:hover { text-decoration: underline;  color:#04a1ff ; }(permet de changer l'apparence d'un lien lorsqu'on passe la souris dessus)

.delicious-posts a { text-decoration: none; color:#04a1ff  padding: 0.1em;  }

.delicious-post a { color: #04a1ff ;} (permet de personnaliser la couleur du titre des bookmarks)

 

L'image ci-dessous vous montre le résultat final:

 

Vous avez maintenant toutes les cartes en main pour vous lancer dans la mise en place d'un flux Delicious sur votre blog. Vos témoignages et remarques sont bien entendu les bienvenus.