Tutoriel : bannière personnalisée

Par François-Xavier Menard

Pas-à-pas : créer une bannière personnalisée pour votre blog Typepad

La technique consiste à utiliser les templates standards de Typepad, à récrire le module "banner", et à le référencer partout en lieu et place du module "banner" fourni.

Etape	Notes	Chemin Typepad
Abonnement pro	Cette technique est accessible uniquement avec un abonnement Pro. Donc adoptez cette option si vous n'y êtes pas encore inscrit.	Admin >  Tableau de bord >  Votre compte >  Changer de niveau d'offre
Edition des habillages	Naviguez vers la page d'édition des habillages.	Admin >  Weblogs >  [votre_blog] >  Habillage
Habillage avancé	Convertissez votre habillage courant en habillage avancé s'il ne l'est pas déjà.	[...] >  Gestion des habillages >  [sélectionnez votre habillage] >  Convertir en habillage avancé.
Définition d'un nouveau module	Créez un module dans lequel vous insèrerez le code de votre bannière. Nommez le nouveau module "banner" et insérez un code html semblable à l'exemple ci-dessous. <!-- banner --> <div id="banner"><div id="banner-inner" class="pkg"> <table border=0 width=100%><tr> <td align=left><a href=<$MTBlogURL$> title=<$MTBlogURL$>> <img src= "http://www.sixapart.com/i/tp_06_logo.gif"> </td> <td align=right> <a href= "http://www.votre_site.com/bienvenue.php"> Menu1</a> | <a  href= "http://www.votre_site.com/clients"> Menu2</a> | <a href="http://www.votre_site.com/produits"> Menu3</a> </td> </tr></table></div></div>	[...] >  Habillage >  Modifier >  Créer un nouveau module de gabarit
Mise à jour de la feuille de style	Si vous aviez précédemment une image-bannière, supprimez tout le paragraphe préfixé /* banner image */. Tous ces styles sont en effet surchargés pour ne montrer que l'image, ce qui n'est plus votre souhait. Modifiez également la définition de #banner (et ses dérivés) pour rétablir un style "normal". Si vous ne conaissez pas trop les css, supprimez simplement toutes les références de couleur (j'avais pour ma part du blanc sur blanc...).	[...] > Habillage > Gestion des habillages > [votre_habillage] > Modifier l'habillage > Stylesheet
Référencement	Maintenant, éditez les 5 gabarits suivants pour référencer votre bannière en lieu et place de la bannière standard : Archive index template, Main index template, Category Archives, Databased Archives et Individual archives. Pour chacun, remplacez l'expression <$MTWeblogIncludeModule module="banner"$> par <$MTInclude module="banner"$>.	[...] > Habillage > Gestion des habillages > [votre_habillage] > Modifier l'habillage > [gabarit]
Appliquer le nouvel habillage	Il n'est pas possible de tester le nouvel habillage sans le publier (car c'est un habillage avancé). Appliquez donc les 3 prochaines étapes consécutivement et à une heure de faible affluence. Sélectionnez le nouvel habillage comme habillage actif de votre blog.	[...] > Habillage > Gestion des habillages > [votre_habillage] > Appliquer l'habillage
Publication	Publiez-le en sélectionnant "Publier seulement la table des matières".	[...] > Habillage > Modifier > Publier votre Weblog
Tests	Contemplez le beau résultat sur votre blog préféré. Faites les ajustements nécessaires sur les gabarits. Dès lors que le résultat vous convient, vous pouvez publier l'ensemble des pages.

Et hop !...

Pour voir un exemple de mise en oeuvre : http://jitb.typepad.com

François-Xavier Menard Consultant free-lance Conseil et réalisation logiciels email : fx point menard chez free point fr