Nouveau widget : carrousel en colonne de contenu

Et si vous donniez un petit look de magazine à votre blog ? Vous nous demandez régulièrement via le support comment intégrer au sein de votre colonne de contenu un carrousel d'images, comme ceux que l'on voit parfois sur les magazines en ligne.

Comme la mise en place de ce genre d'artifice peut être fastidieuse lorsque l'on ne connaît pas les rudiments du code HTML et Javascript, nous avons décidé de vous proposer un widget qui met en place cette fonctionnalité pour vous.

Son principe est simple, vous lui indiquez le blog et la catégorie que vous aimeriez voir ainsi présenté, le format qu'utilise votre blog et le widget va vous générer un carousel des 4 dernières notes en images qui sera affiché en en-tête de votre colonne de contenu.

Pour accéder directement à la page de configuration c'est ici, et pour plus d'explications sur sa configuration cliquez sur le lien "lire la suite".

La configuration se fait toujours en 3 étapes (hors options particulières que vous souhaiteriez appliquer) :

1. Saisie de l'ID du blog pour lequel vous souhaitez ce widget

 


Vous pouvez utiliser le ID Finder pour trouver cet ID depuis une URL de blog

2. Saisie de la catégorie du module (Optionnel)

Si cette saisie est optionnelle, nous vous la recommandons car elle vous permet :

• de mieux préparer le contenu qui sera affiché (vous pouvez créer une catégorie "à la une" dédiée à l'alimentation de ce carrousel)
• d'éviter les doublons avec les notes présentées en accueil
• de choisir des notes avec images qui auront meilleure allure

La catégorie saisie doit être le libellé exact de votre catégorie de blog.
Si vous ne saisissez rien dans ce champ, les notes retournées seront les dernières toutes catégories confondues.

 

3. Saisie du titre du carrousel (Optionnel)

Si vous souhaitez que le carrousel soit préfixé par un titre, il vous suffit de saisir un libellé dans ce champs.

 

4. Format du blog

Ce paramètre est essentiel pour que le carrousel s'insère au bon endroit, sinon vous risquez de le voir s'afficher en colonne latérale, et à moins que celle-ci ne soit large, le rendu ne sera pas du meilleur effet.
Veillez donc à sélectionner le format actuellement appliqué au blog sur lequel vous voulez insérer le carrousel (depuis la section "Habillage > Formats" en cas de doute).

5. Sur quels éléments ce caroussel doit apparaître ?

Selon les usages, vous pouvez choisir de le faire afficher partout, ou uniquement sur certains éléments (notes individuelles, archives mensuelles), à vous de choisir ce qui sied le mieux.

 
Une fois les paramètres saisis, cliquez sur "Prévisualiser et installer". Cela vous permettra de vérifier que des contenus sont effectivement retournés avant insertion sur vos blogs. A noter qu'une mise en forme "nue" et indicative est appliquée à ce widget à la base, une fois publié sur votre blog, il prendra le style de base en oeuvre sur votre blog.

Il ne vous reste plus qu'à cliquer sur "installer ce widget maintenant". Vous vous retrouverez alors dans l'interface classique de TypePad pour l'ajout de widget.

Sélectionnez le ou les blogs sur lesquels ajouter ce widget, validez et c'est
terminé. Comme tout widget, vous pouvez le retrouver dans la section "Habillage
> Contenu" pour en modifier l'emplacement ou le supprimer au besoin.

A noter que, comme pour nos autres widgets dernièrement publiés, vous pouvez reprendre l'apparence des éléments du caroussel via la fonction "CSS personnalisé" de TypePad.
Seule astuce en cas de modification de la largeur du carrousel, utiliser un hack CSS "!important".
Par exemple, sur le blog de démonstration, nous avons changé la taille et le style de police utilisés dans les cartouches et modifié la largeur du caroussel via :

#control_wrap h2 {
    font-size: 12px;
font-family:Georgia;
}

#slideshow_wrap, #container_slideshow{
width:440px !important;
}

dans notre section "Habillage > CSS personnalisé".

Allez hop, à vous de jouer : rendez-vous sur la page de configuration !