Se jouer des apparences : Leçon 2

Dans TypePad, une petite fonctionnalité fort prisée est la fonction de mise en avant.
Elle vous permet d'assurer à une note une visibilité étendue quelle que soit votre cadence de publication.
Cette fonction est appréciable, mais évidemment, elle ne peut être appliquée qu'à une note à la fois.
Si dans votre blog, il est une rubrique que vous aimeriez promouvoir plus qu'une autre, je vous propose une petit tutoriel pour animer l'en-tête de votre blog avec les X notes d'une rubrique. C'est ce qui a été mis en place sur le blog de la Communauté pour le club VIP.

1. Mettre en place les fichiers utiles
Pour réaliser cette mise en page, il nous faut en premier lieu récupérer un petit bout de code Javascript (dénommé Javascript Tabifier).
Vous trouverez le code utile ici :
http://www.barelyfitz.com/projects/tabber/
Section Download
Le fichier le plus important est le JavaScript en lui-même (tabber.js) ainsi que la mise en forme (example.css).
Téléchargez ce fichier à l'emplacement de votre choix (pour le blog de la Communauté, nous l'avons mis dans http://communaute.typepad.fr/js/tabber.js.

Ouvrez le fichier example.css et copiez/collez son contenu dans votre feuille de style (styles.css) en toute fin de fichier.

2. Faire appel à ces fichiers dans les gabarits
Pour la feuille de style, vous n'avez rien à faire, sauf si vous décidez de gérer les styles de cette fonction indépendemment.
Pour l'appel Javascript, il vous suffit d'ajouter ces lignes dans le header de votre gabarit :

<script type="text/javascript">
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
var tabberOptions = {manualStartup:false};
function begForMoney()
{
  if (!arguments.callee.stopBegging) {
    arguments.callee.stopBegging = true;
  }
}
</script>
<script type="text/javascript" src="https://communaute.typepad.fr/js/tabber.js"></script>

3. Créer le module TypePad
Dans votre habillage actuel, créez un nouveau module de gabarit.
Pour l'exemple visible sur blog de la Communauté, j'ai choisi d'avoir 3 notes accessibles depuis mon gabarit index.html.
Le contenu du module créé est le suivant :

<div class="tabber"><MTEntries lastn="1" category="Club VIP">
<div class="tabbertab tabbertabdefault">
<h2><$MTEntryTitle$></h2>
<div class="pkg">
<$MTEntryBody$>
</div>
<a id="more"></a><p><a href="<$MTEntryPermalink$>">Lire la suite &raquo;</a></p>
</div>
</MTEntries>

<MTEntries offset="1" lastn="2" category="Club VIP">
<div class="tabbertab">
<h2><$MTEntryTitle$></h2>
<div class="pkg">
<$MTEntryBody$>
</div>
<a id="more"></a><p><a href="<$MTEntryPermalink$>">Lire la suite &raquo;</a></p>
</div>
</MTEntries>
</div>

Ce module est constitué de 2 parties quasi-identiques.
Le premier container gère la note par défaut (sans action de l'utilisateur), elle doit avoir la classe "tabbertab tabbertabdefault". Je demande donc à TypePad de m'afficher la dernière note (lastn="1") de la catégorie Club VIP (category="Club VIP").
Pour les 2 autres notes, la classe utilisée est "tabbertab", je demande donc à TypePad de me donner les 2 dernières notes (lastn="2"), toujours dans la catégorie Club VIP (category="Club VIP"), mais après la note la plus récente pour qu'elle ne figure pas 2 fois (offset="1").
Dans tous les cas, je respecte la nomenclature donnée par les créateur du script. Le titre de la note figure en <h2> et mon module est encapsulé dans un <div> dont la classe est "tabber".

4. Inclure ce module dans le gabarit de votre choix
Là il suffit de faire un simple <$MTInclude module="Mon Module"$> à l'emplacement de votre choix.
Pour ma part, afin de ne pas casser le style du blog, j'ai inclus le module dans un <div> de classe "entry", de telle sorte que son affichage reprenne la mise en forme de mes notes classiques.
Ce qui donne le code suivant :

<div class="entry">
<h1 class="entry-header">A la une</h1>
<$MTInclude module="leaderboard">
</div>

inséré avant la liste des notes dans mon gabarit Index.

5. Mettre à jour le style (optionnel).
En étape 1, je vous ai fait coller le code donné dans styles.css, vous pouvez bien entendu modifier les paramètres de style donnés par défaut.
Pour le blog de la Communauté, j'ai notamment modifié la taille des titres et les couleurs des liens gérés par ce module.

Autres usages possibles :
Vous pouvez utiliser ce code pour générer un aperçu du dernier article dans chaque catégorie.
Pour cela le code du module fera un appel
<MTEntries lastn="1" category="Chaque catégorie">...</MTEntries> pour chaque catégorie pour laquelle vous voulez avoir le dernier article.
Il vous faudra définir quelle catégorie doit apparaître par défaut (classe appliquée "tabbertab tabbertabdefault"). Le contenu du container MTEntries n'a pas besoin d'être changé.
Vous pouvez aussi utiliser ce module pour afficher les derniers contenus d'un blog sur un autre sans pour autant en vampiriser l'affichage.
Pour cela au lieu de générer un module, il suffit de générer un JavaScript. Vous pouvez vous reporter à la première leçon du thème "Se jouer des apparences" pour voir comment faire.
Le JavaScript généré n'aura plus qu'à être appelé sur n'importe quel autre blog ou site via la ligne :

<script type="text/javascript" src="https://moncompte.typepad.com/monblog/monjavascript.js">

C'est notamment de cette façon que les 3 dernières vidéos Seesmic de Mry sont affichées en colonne latérale.