Nouveau thème : Urban Borough

Un nouveau thème a été mis à votre disposition aujourd'hui, il s'appelle Urban Borough.


C'est le premier ajout dans un nouveau jeu de thèmes dénommé Scene. 4 thèmes sont prévus au final.
Les points communs entre ceux-ci seront :
- des colonnes larges (images panoramiques et widgets)
- globalement épuré (meilleure tenue sur la longueur)
- des contenus aérés

Accessoirement ils seront optimisés pour une vue sur terminaux mobiles.
Vous remarquerez également que le pied est légèrement différent des autres thèmes, il est en effet prévu pour accueillir une version HTML plus complète.
Nos collègues américains ont déjà fait un tutoriel pour cela, nous vous le proposerons traduit dans les prochains jours pour un impact maximal.

Problème de redirection vers BlogBar.org

Certains d'entre vous nous ont signalé un problème de redirection de leur blog vers le site BlogBar.org. Lorsque le visiteur arrive sur leur blog, celui commence à se charger avant d'être redirigé vers un site proposant de l'achat de noms de domaines.

Avant toute chose, sachez qu'il ne s'agit de rien de grave, que vous ne vous êtes pas fait pirater votre compte TypePad. Le problème est lié à un widget que vous aviez dû installer il y a quelques temps de cela. BlogBar était initialement un moteur de recherche pour les blogs. Abandonné par ses créateurs il y a plusieurs mois déjà, ce module, si vous l'aviez installé sur votre blog, avait simplement dû disparaître de l'affichage sans que vous ne vous en rendiez compte, jusqu'à ce que le nom de domaine, blogbar.org soit racheté récemment par un cybersquatteur. Celui-ci a alors mis en place une redirection de tous les sites utilisant un widget avec ce nom de domaine, vers le site blogbar.org qu'il possède, et sur lequel il a mis de la publicité.

Pour résoudre ce problème de redirection, il vous suffit donc de supprimer le module qui pose problème. Pour ce faire, rendez-vous dans la rubrique Habillage > Contenu de l'administration de votre blog, et supprimez le module BlogBar de la colonne latérale de celui-ci. N'oubliez pas d'enregistrer pour que la modification prenne effet.

Tout devrait alors être rentré dans l'ordre.

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

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.

Google +1 sur les blogs TypePad

Après Twitter, Facebook et la fonction native de "Favoris" de TypePad, vous pouvez désormais ajouter le bouton Google +1 en 1 clic à vos pieds de notes depuis l'interface TypePad.

Rendez-vous pour cela dans la section "Habillage > Contenu" de votre blog et cliquez sur le crayon figurant en face de "Pied de la note".

Cochez alors dans la fenêtre qui s'ouvre la case figurant en face de "Google +1", enregistrez tous vos changements. C'est terminé !

Pour mettre ce bouton au niveau du blog je vous invite à vous reporter à la note faite sur ce même blog il y a peu.

A noter que l'espace blanc à droite du bouton n'est pas de notre ressort (le fonctionnement du bouton Google +1 étant identique à celui du bouton Facebook Like).

 

Nouveau widget : Google +1 pour vos articles (2/2)

Pour faire suite à notre précédent article concernant l'intégration du bouton Google +1 sur votre blog, nous mettons à votre disposition un widget vous permettant d'ajouter celui-ci pour chacune de vos notes.
Il est construit sur le même modèle que le wigdet Joliprint (que nous vous recommandons également) et ne requiert pas de connaissances techniques.
Il s'adresse uniquement aux utilisateurs TypePad ayant choisi un habillage basique dans TypePad, ceux ayant un habillage avancé peuvent suivre à la lettre les indications fournies par Google pour l'ajout du bouton.

La configuration du widget se fait à partir d'une page dédiée, nous détaillerons ci-dessous les principales options offertes.

Créez votre design sur-mesure avec Kameleoon

Kameleoon est un outil qui va vous permettre d'intégrer facilement n'importe quel design à votre blog. Vous n'aurez pour ce faire, besoin que d'inspiration ; aucune compétence technique ne sera requise.

Pour commencer, rendez-vous sur le site de Kameleoon et créez-vous un compte gratuit. Cela vous imposera d'insérer une bannière en colonne latérale de votre site. Si vous ne souhaitez pas afficher cette bannière, il vous faudra opter pour l'offre payante à 4€/mois.

Une fois le compte créé, vous pourrez ajouter un site / blog à celui-ci dans Kameleoon. Il vous suffira de founir un nom ainsi que l'adresse du blog que vous souhaitez ajouter. Kameleoon vérifiera alors que tous les paramètres sont au vert. Normalement ce ne devrait pas être le cas. Kameleoon mettra en avant le fait que vous n'avez pas encore inclus le code Javascript qui permettra à l'outil de fonctionner, ni celui de la bannière.

Dans les deux cas, vous n'aurez qu'à copier ce code, puis à vous rendre dans la rubrique Habillage de votre blog, et à ajouter un widget permettant d'inclure son propre HTML.

Votre blog est désormais prêt à être personnalisé. Pour cela, il vous suffit de saisir l'adresse de votre blog, et de rajouter à la fin de celle-ci le paramètre ?kameleoon=true (ex : http://monblog.typepad.fr/?kameleoon=true). Vous devriez alors voir apparaître une barre de chargement. Il vous sera éventuellement demandé de vous connecter pour pouvoir accéder au panneau de configuration.

Une cinématique vous guidera dans l'usage de cet outil pour vous aider à faire vos premiers pas. Pour le reste, le principe est assez simple. Tout élément est sélectionnable. Une fois sélectionné, un panneau latéral apparaît et vous propose un certain nombre d'options de personnalisation. Vous pourrez ainsi, dans la majeure partie des cas, changer la couleur d'arrière-plan, éventuellement utiliser une image si vous avez créé un graphisme sous Photoshop qui requiert l'insertion d'images en arrière-plan, modifier la police, la taille, la couleur du texte, modifier les paramètres de survol, etc...

 

Si vous êtes un lecteur assidu de ce blog, le design ci-dessus devrait vous rappeler dans les grandes lignes un ancien design présenté par Florent. Nous en avons simplement réintégrer l'essentiel pour la démo.

Les modifications que vous effectuez de la sorte sont immédiatement appliquées à votre blog. Rien ne change dans votre interface d'administration de TypePad. Le code que vous avez initialement inséré permet à Kameleoon d'appliquer les modifications sans que cela ne requiert d'action de votre part.

Vous êtes donc en mesure d'intégrer à votre blog tout design que vous auriez vu sur Internet, et ce sans en passer par le CSS personnalisé.

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.

 

Intégrer le nouveau bouton "suivre" de Twitter

Dans la lignée du bouton Like de Facebook, permettant de montrer le fait qu'on apprécie un site et d'afficher le nombre de personnes aimant également ce site, Twitter vient de lancer un bouton Suivre.

A la différence des précédents boutons existants, celui-ci ne renvoie pas vers le site de Twitter. La personne qui décide de vous suivre et clique dessus restera sur votre blog, et verra simplement un changement de format du bouton.

Il permet également de valoriser votre audience en affichant le nombre de personnes qui vous suivent.

Pour intégrer ce bouton, il vous suffit de copier le bout de code ci-dessous :

<a href="http://twitter.com/twitterapi" class="twitter-follow-button" data-lang="fr">Follow @twitterapi</a> <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

Une fois copié, rendez-vous dans la rubrique Habillage de votre blog, puis cliquez sur l'onglet Contenu.

Vous pourrez alors choisir d'insérer un widget pour inclure votre propre HTML, en cliquant sur les éléments visibles ci-dessous.

Choisissez alors une étiquette pour votre module (elle n'apparaîtra pas sur le blog, c'est juste pour vous aider à organiser vos modules), puis collez le bout de code précédemment copié.

Remplacez les deux mentions de "twitterapi" par le nom de votre compte Twitter.

Cliquez sur ok, placez le module qui est apparu en colonne latérale où vous le souhaitez dans la colonne et enregistrez en bas de page.

Votre nouveau bouton devrait apparaître comme c'est le cas dans la colonne de droite ici présente (dans notre cas, nous avons fait le choix de ne pas afficher le nombre de nos followers).

Si vous voulez plus d'informations, vous pouvez vous rendre sur la page dédiée de la documentation Twitter (en anglais).