Astuce : créer un pied de blog enrichi

Pour faire suite à la mise à disposition du nouveau thème "Urban Borough" sur TypePad, nous vous proposons ci-dessous un petit tutoriel simple pour la création d'un pied de blog "riche", c'est à dire figurant plus que les liens proposés dans son mode basique.
Dans l'esprit, cela s'apparente à ce que vous pouvez faire avec l'utilisation du widget de type "inclure votre propre HTML", mais nous allons ici essayer de vous rendre plus simple la génération de la partie HTML/CSS que cela nécessite pour le résultat que vous pouvez voir ci-dessous :


Côté technique, c'est assez simple, nous allons utiliser l'éditeur WYSIWIG de TypePad pour générer le contenu du pied de blog.
Ceci nous permettra de générer la partie "contenu" en HTML.
Nous vous fournirons ensuite le CSS nécessaire à la mise en forme.
Partant de ces 2 éléments, vous aurez ensuite tout le loisir de modifier ce pied de blog au gré de vos envies.

Astuce : utilisation de polices de caractères Google web fonts

Dans TypePad, si vous souhaitez sortir des sentiers battus côté police de caractères, vous pouviez utiliser TypeKit pour amener plus de diversité sur l'un ou l'autre des éléments de votre blog (titre, corps de note, modules…).

Des alternatives à TypeKit existent, dont notamment Google web fonts, qui s'est récemment dôté d'une interface plus ergonomique, l'occasion pour nous de vous expliquer comment en tirer parti pour votre blog.

Pour commencer, démonstration par l'exemple, via un blog récemment redesigné, celui d'Art de Vivre.
Sans Google web fonts

Avec Google web fonts

Si la version sans Google web fonts est tout à fait agréable (et standard web), vous noterez que celle utilisant ce service est plus agréable à la lecture, tout en offrant une petite touche personnelle bienvenue.

Vous pouvez vous aussi arriver à ce résultat en vous rendant sur l'interface de Google web fonts pour faire votre marché de police de caractères.

Intégrer du contenu riche en colonne latérale

Il nous est régulièrement demandé comment intégrer du contenu un peu personnalisé en colonne latérale : images, texte mis en forme, bio vous permettant de vous décrire, vidéo, etc... Par défaut, si vous voulez mettre en place ce type de contenu, il vous faut ajouter un widget HTML et taper votre texte en y incluant les balises HTML permettant de le mettre en forme, ou dans le cas des images, avoir envoyé l'image dans le gestionnaire de fichier au préalable, puis inclure le bout de code HTML qui va bien. C'est relativement peu accessible pour la majorité d'entre vous qui ne maîtrisez pas le langage HTML.

Hors il existe une petite astuce qui va vous permettre d'intégrer ce type de contenu facilement.

Intégrer le bouton +1 de Google pour son blog (1/2)

Première partie d'une astuce qui se découpera en deux temps, nous vous proposons de découvrir aujourd'hui comment intégrer le bouton +1 de Google à votre blog.

Ce bouton, récemment mis à disposition par le célèbre moteur de recherche afin d'ajouter une dimension recommandation à ses résultats, et de concurrencer le bouton Like de Facebook, vous permet de marquer votre intérêt pour un site, ou un article.

Lorsque vous cliquez sur ce bouton, vous donnez la possibilité à vos contacts Google de savoir que vous avez apprécié ce site si celui-ci apparaît dans des résultats de recherche. Le nom des contacts ayant cliqué sur ce bouton apparaîtra en effet en marge des liens correspondants. A terme, il y a fort à parier que cela ait également un impact sur le référencement.

Si vous voulez en apprendre plus sur le fonctionnement et l'esprit de ce bouton, nous vous invitons à vous reporter à l'article rédigé sur le TypePad Magazine.

Nous allons nous concentrer ici sur son intégration à votre blog. 2 actions peuvent être mises en place. La première consiste à intégrer un bouton générique pour l'ensemble du blog. La seconde consiste à ajouter un bouton dans le bas de chacun de vos articles. Cette seconde option fera l'objet d'une autre note.

 

Pour intégrer un bouton générique à votre blog, il vous faut vous rendre dans la rubrique Habillage > Contenu de celui-ci.

Commencez par ajouter un widget permettant d'inclure son propre HTML, comme montré sur la capture d'écran ci-dessus. Nommez le "Google +1 Script" par exemple, puis collez-y le code suivant :

<!-- Placez cette balise dans la section <head> ou juste avant la balise de fermeture </body> --> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"><!-- {lang: 'fr'} // --></script>

Cliquez sur ok, et placez le module apparu en colonne latérale de votre blog, tout en bas de celle-ci.

Ajoutez un nouveau module permettant d'inclure son propre HTML. Nommez le cette fois "Google +1 button", et insérez le code suivant :

<!-- Placez cette balise à l'endroit où vous souhaitez que le bouton +1 s'affiche --> <g:plusone size="medium" href="http://chroniquesdunbreton.com"></g:plusone>

Remplacez l'adresse http://monblog.typepad.fr par l'adresse de votre blog. Cliquez sur ok et placez cet élément à l'endroit où vous souhaitez le voir apparaître en colonne latérale.

Il ne vous reste plus qu'à enregistrer. Vos visiteurs pourront désormais cliquer sur le bouton +1 sur votre site pour marquer leur intérêt pour celui-ci et le faire savoir à leurs contacts, si votre site apparaît dans des résultats de recherche.

 

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".

 

Les fonctions méconnues de TypePad : le partage de notes facile

Comme pour ma note concernant l'insertion de vidéos, je vais vous faire ici un résumé des méthodes disponibles dans TypePad pour ajouter des services de partage à vos notes (partager sur Twitter, Facebook, et tutti quanti…).

Pour cela, j'aborderai les 3 chapitres suivants (du plus standard au véritable sur-mesure) mais sans avoir recours à l'habillage avancé (soupir de soulagement dans les tribunes) :

• Fonctions de partage incluses dans TypePad
• Utilisation de widgets fournis par des services tiers
• Mise en place d'un pied de note personnalisé en habillage classique (utilisation de JavaScript)

Les fonctions méconnues de TypePad : insertion de vidéo facile

C'est une fonctionnalité qui est sans doute passée un peu inaperçu lors de la mise en place du nouveau TypePad, mais nous avons grandement amélioré la capacité de TypePad à vous simplifier le partage de vidéo.

La plupart d'entre vous connaissent sans doute la méthode rudimentaire : un clic sur l'onglet "HTML" lors de la rédaction et un copier/coller du code barbare fourni par le service vidéo visé (appelé aussi code EMBED).

Je vous passe les fabuleuses avancées techniques qui ont permis la mise en place de nouvelles fonctionnalités (notamment l'avènement et l'implémentation du standard appelé oEmbed) et vais plutôt tenter de vous faire un bref résumé des possibilités qui sont désormais les vôtres :

• Publication de vidéo facile via WYSIWYG TypePad
• Utilisation du bookmarklet TypePad
• Publication par email
• Streaming depuis une vidéo téléchargée sur votre blog

Utiliser TypeKit sur TypePad

Peut-être l'avez vous déjà vue, mais dans la section "Paramètres" de vos blogs, nous avons ajouté une nouvelle rubrique intitulée "Modules additionnels" (j'en profite pour rendre hommage à Loïc pour cette traduction en français de l'anglais Add-ons ;-)).

Dans cette rubrique nous avons rangé Google Analytics, que vous devez déjà connaître, ainsi qu'un nouveau module intitulé TypeKit. Comme son nom ne le laisse pas présager, TypeKit n'a rien à voir avec TypePad, c'est en fait un service tiers de polices de caractères.

Mékéskidi ? Pour des tas de raisons passionnantes (pas de maîtrise du poste client, universalité...), les applications web se limitent généralement à un jeu de polices limité. TypeKit vous propose de faire fi de tout cela via quelques lignes de code et un éditeur autorisant des centaines de polices pour habiller votre blog.

Pour en bénéficier c'est très simple, il vous suffit de créer un compte TypeKit depuis leur site web, de saisir l'identifiant qui vous sera attribué par TypeKit dans la rubrique "Modules additionnels" de TypePad puis de faire votre choix de polices.

Nous vous avons fait un article dans la base de connaissances pour expliciter la mise en oeuvre.

Je vous ai aussi fait un exemple en utilisant le blog maltraité avec TweetPad pour que vous puissez voir ce que cela donne.

A noter que TypeKit est un service sur abonnement, l'offre gratuite vous permet de choisir 2 polices de caractères sur un blog donné.

Widget : ReTweet Bouton

Si vous êtes accro à Twitter et que vous avez implémenté la fonction de publication croisée, Tweetmeme vous propose désormais d'installer un widget pour :

• voir les discussions suscitées par chaque note sur Twitter
• retweeter ce même article (tout comme la fonction native "Tweeter cela" disponible dans TypePad