14/06/2011

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.

image from everything.typepad.com

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.

Kameleoon-tableau-lateral
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...

 

Kameleoon-design-blog-modifie

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

07/06/2011

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.

Ajout-widget-inclure-propre-HTML

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 :

Google-1-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 :

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.

Bouton-1-Google 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.

 

01/06/2011

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.

Follow-button-states

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 :

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.

Capture d’écran 2011-06-01 à 15.02.21

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

Capture d’écran 2011-06-01 à 15.03.03
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).

Créez votre blog !

Solution complète. Aucune installation. Simple et puissant.

Nos recommandations

    Statut TypePad