Mettez en valeur le lien vers les commentaires

Nous savons que les commentaires sont une dimension extrêmement importante de l'activité de blogging. L'interaction entre le blogueur et le lecteur est cruciale pour acquérir une audience plus large ; vos lecteurs partagent avec leurs amis qui partageront également avec leurs amis, et ainsi de suite. Nous souhaitons donc vous faire profiter de quelques-uns de nos conseils favoris pour mieux mettre en valeur le lien "Commentaires" dans le pied de vos notes, pour vous aider à construire une communauté au sein de votre blog, entre vous et vos lecteurs.

(Note : les conseils qui suivent requièrent l'usage du CSS Personnalisé, fonctionnalité qui n'est accessible qu'à partir de l'offre Unlimited, et qui se trouve dans la rubrique Habillage de l'administration de votre blog.)

 

Nous avons ci-dessus un exemple générique de pied de note. Il appartient à une note de blog qui n'attend qu'une chose, c'est d'être commentée. Comme vous pouvez le voir, il n'y a pas encore de commentaires, mais nous pouvons améliorer ceci grâce aux conseils qui suivent.

 

Personnalisation du module de recherche

Cela fait pratiquement un an que le module de recherche a été rendu public. Beaucoup d'entre vous ont ajouté ce module à leur blog, facilitant ainsi la recherche de notes.

Nous avons reçu pas mal de questions sur la manière de personnaliser ce module, particulièrement son en-tête. Avec le CSS Personnalisé - fonctionnalité disponible pour les abonnements illimités et supérieurs - vous pouvez customiser ce module.

Dans Habillage > CSS Personnalisé, vous pouvez entrer le CSS fourni ci-dessous avec quelques conseils.

 

Cachez l'en-tête du module

Dans la mesure où le bouton affiche le terme "Rechercher", vous pouvez légitimement penser qu'il est inutile d'afficher une en-tête à ce module de recherche. Le code CSS pour cacher cette en-tête est :

.module-search .module-header { display: none !important; }

 

Alignez le bouton "Rechercher" à côté du champ de recherche

Pour gagner de l'espace dans la barre de recherche, vous pouvez souhaiter que le champ de recherche et le bouton soient affichés sur la même ligne. Pour ce faire, collez le code CSS ci-dessous :

.module-search input[type="search"] {
width: 175px !important;
float: left !important;
display: inline !important;
}

.module-search input[type="submit"] {display: inline !important;}

Il est possible que vous ayez besoin d'ajuster la largeur du module en changeant la valeur du paramètre "width", en fonction de la largeur de votre colonne.

 

Changez l'en-tête du module de recherche

Il est possible d'ajouter du contenu avant ou après l'élément "Rechercher" dans l'en-tête. Si vous voulez ajouter le nom de votre blog par exemple, vous pouvez utiliser un bout de code CSS similaire à celui-ci :

.module-search .module-header:after { content: " sur ce blog" !important; }

Libre à vous de changer " sur ce blog" par le texte qui vous convient. L'espace après le premier guillemet est cependant nécessaire pour séparer votre texte du mot "Rechercher".

 

En bref : nouveautés, séminaire, usages avancés et tutoriels vidéos

Pour clore ce premier mois de 2011, et même si la plupart d'entre vous ont reçu la lettre d'informations de TypePad de janvier, nous vous dressons un bref récapitulatif des nouveautés autour de TypePad, à savoir:

• des exemples d'usage avancé de TypePad,
• des tutoriels vidéos,
• quelques améliorations techniques.

 

Spécial Astuces : mise à jour de la base de connaissances

Plusieurs articles à vous signaler ajoutés à la base de connaissances dernièrement :

1. Contenu de barre latérale personnalisé

Cet article vous montre comment coller vos propres contenus (widgets/JS/HTML dans vos colonnes latérales) - il aurait pu faire l'objet d'un article "les fonctions méconnues de TypePad" de par la description du module "Inclure votre propre HTML".

2. Afficher du contenu au-dessus de votre bannière

Envie d'afficher une méga-bannière ou une barre de menu avant votre bannière blog, cet article vous explique comment faire.

3. Personnaliser la police de caractères de votre blog

La police proposée par TypePad ne vous revient pas ? Faîtes lui afficher votre préférence.

Vous souhaiteriez voir un autre article, un autre thème abordé en priorité ? Laissez-nous un commentaire !

Se jouer des apparences : Leçon 3

Pour cette 3ème édition de notre série "Se jouer des apparences", je vais m'en remettre à un tutoriel publié il y a quelques mois déjà par Yannick Lejeune.
Il consiste simplement à rendre plus dynamique le nuage de catégories proposé comme module TypePad de base.

 

Pour réussir à le mettre en place, il suffit de suivre les indications données par Yannick sur sa note, à savoir :

1. Placer 2 fichiers sur votre blog (via le gestionnaire de fichiers de TypePad)
2. Créer un module spécifique avec le code donné par Yannick et spécifier l'emplacement des 2 fichiers placés au préalable sur votre compte
3. Faire appel à ce module à l'emplacement de votre choix sur votre blog

Vous pouvez voir la mise en oeuvre de ce module chez Yannick dans sa bannière et sur le blog de Yann Savidan en colonne latérale.
Il vous faut évidemment disposer d'un compte Pro TypePad, car il est nécessaire d'avoir accès aux habillages avancés pour créer le module.

Flux de syndication cassé ?

Dernièrement, nous avons eu une recrudescence de cas de flux de syndication détectés comme invalides par FeedBurner.
En regardant en détail le contenu du flux généré par TypePad, il est apparu que la cause de ce dysfonctionnement soit liée à un copier/coller depuis Word.
Lorsque vous faites un copier/coller depuis Word vers l'interface de publication, en plus du texte saisi côté Word, vous allez aussi envoyer sur TypePad de nombreuses balises propriétaires.
Par exemple, vous avez saisi :

Lorem Ipsum

dans Word, une fois copié/collé dans TypePad, la source du texte ci-dessus devient :

<p class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: justify; line-height: normal;"><span style="font-family: &quot;Arial&quot;,&quot;sans-serif&quot;;">
Lorem Ipsum
<o:p></o:p></span></p>

Dans le code HTML ci-dessus, une balise en particulier pose problème, il s'agit de <o:p></o:p>.
Si votre flux affiche des caractères curieux en lieu et place des accents, et que vous utilisez Word pour publier via copier/coller, alors vous devriez revoir la source HTML vos notes pour supprimer ces balises <o:p></o:p>.
Il vous suffit normalement de reprendre les 10 dernières notes (ou X dernières selon la configuration de votre flux) pour remettre de l'ordre dans votre flux.
En cas de doute, envoyez un message au support.
Et si vous appréciez le confort de Word pour mettre en forme vos notes, utilisez plutôt Windows Live Writer de Microsoft, ou, si vous disposez de Word 2007, lisez cet article pour publier directement sur TypePad sans copier/coller.

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.

Se jouer des apparences : Leçon 1

Dans cette suite de 3 articles autour des habillages avancés de TypePad, nous allons vous montrer comment réutiliser simplement les contenus déjà publiés sur votre blog pour :

1. Inviter les lecteurs à découvrir une rubrique particulière de votre blog
2. Rendre votre blog visuellement plus attractif en laissant parler vos contenus

Les pré-requis :
- Etre en habillage avancé,
- Avoir quelques notions CSS/HTML

Attirer l'oeil sur une catégorie
Pour commencer en douceur, nous allons ici nous intéresser à un tag TypePad particulier : MTEntryBodyFirstImage.
Les habitués de la langue de Shakespeare auront tout de suite compris son objet, récupérer la première image insérée dans le corps d'une note.
Il est de plus possible de faire appel à ce tag au sein du container MTEntries, celui-là même qui vous permet de filtrer vos notes par catégorie ou par période.
Vous voyez tout de suite où nous allons en venir : la création d'un module affichant les dernières notes d'une catégorie mais sous forme de mur d'images.

Modifier votre bannière avec un CSS personnalisé

Andy Wibbels un membre de l'équipe TypePad US nous explique un peu ce qu'est le CSS personnalisé.  Ses explications ne ferons pas de vous un expert du CSS, néanmoins vous bénéficierez d'astuces pouvant se révéler utiles.

Une brève introduction aux CSS
CSS est un acronyme pour "Cascading Style Sheet" (feuilles de style en cascade) et c'est une méthode qui permet de personnaliser la mise en page et le design de votre blog sans avoir besoin de convertir votre habillage en habillage avancé.

Une feuille de style CSS est un petit fichier qui explique à votre navigateur les règles à appliquer au design de votre blog. Il définit la largeur des colonnes, la police, les tailles et couleurs, les marges et l'image au fond et plein d'autres options encore. Comme ça, vous n'avez pas à créer des balises html chaque fois que vous voulez un titre en gras ou dans une police différente.  Toutes les informations de design sont centralisées dans un fichier.

Le CSS personnalisé est disponible sur les offres TypePad Pro et Business class. Pour accéder au CSS personnalisé, identifiez-vous sur TypePad puis cliquez sur Weblogs> (Mon Weblog)> Habillage. Descendez et cliquez sur "Éditez un CSS personnalisé". La page du  CSS personnalisé s'affiche avec une grande zone de texte où vous pouvez coller et sauvegarder votre CSS personnalisé.

Nouveauté : Tutoriel vidéo en base de connaissances

Parce qu'une petite vidéo vaut parfois bien mieux que de très longs articles, nous commençons la publication de tutoriels vidéos pour accompagner les articles publiés dans la base de connaissances.

Pour débuter cette série, nous en avons produit une première assez complète à l'adresse des néophytes, qui explique les étapes de création de compte et offre un aperçu de la publication de contenu sur TypePad.

Vous pouvez la retrouver dans l'article "Comment bien débuter avec TypePad ?".Vous pourrez repérer ces vidéos via l'image ci-dessous, qui sera insérée dans les articles pour lesquels une vidéo est disponible :

Si vous avez des suggestions de sujets pour lesquels vous aimeriez disposer d'un tutoriel vidéo, n'hésitez pas à en faire part via les commentaires.
Remercions au passage Mathieu et Khalifa pour le travail préliminaire effectué sur ce sujet lors de leur passage à Six Apart.