mercredi 25 avril 2012

Un gadget Blogger pour traduire son blog

Il existait différentes alternatives à cette absence de produit Blogger.
Maintenant c'est réglé : un gadget officiel labellisé Blogger est disponible.

Pour l'insérer, c'est comme d'habitude et très simple : Mise en page / Ajouter un gadget / Traduire [1].

et le petit + [2] pour la sélection :

La fenêtre suivante vous permet de paramétrer [3] votre widget : titre, style, d'avoir un Aperçu du gadget avant de l'enregistrer [4].

A+

jeudi 12 avril 2012

Réaliser une image cliquable

Nous venons de voir dans le précédent message comment faire une image cliquable.
C'est la méthode pour ceux qui veulent se casser la tête ;-)
Pour les besoins de tous les jours, nul besoin de faire aussi compliqué !

Vous savez insérer une image ?
Vous savez introduire un lien ?
Vous savez donc faire une image cliquable toute simple.

Insérer l'image
Je ne vais pas rentrer dans le détail ici de comment faire. C'est suffisamment basique pour ne poser de problème à personne. 

Sélectionner l'image
Dans un second temps, il faut cliquer sur l'image pour voir apparaître une barre de liens supplémentaire.

Introduire le lien de redirection
Ensuite cliquer sur le bouton Associer en haut du menu.
Préciser le lien de destination.
Pour ceux qui auraient oublié comment faire, lire ici.

Voilà, c'est terminé, vous avez une image qui renverra au clic vers une nouvelle page.

A+

mardi 10 avril 2012

Réaliser un lien à partir d'une image

Faire une image cliquable qui renvoie vers un site ou un message ?
Dans l'absolu, ce n'est pas compliqué :
<a href="ADRESSE_DU_LIEN_DE_DESTINATION" target="_blank"><img src="ADRESSE__DE_L'IMAGE" title="AFFICHAGE_AU_SURVOL_DE_L'IMAGE" /></a>
Si vous avez besoin que je vous décortique l'affaire :

1 - Hébergement de l'image

Il vous faut commencer par choisir l'image qui servira de lien sur votre blog.
Ensuite il vous faut cliquer sur le lien Insérer une image.
Positionner l'image au bon endroit.
Puis dimensionner l'image à la taille désirée.
Une fois tout ceci réalisé vous devez avoir une image telle que celle çi :
Si je regarde ce que j'obtiens par l'onglet HTML, j'ai le résultat suivant :
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-4mCrh6A9EiY/Ta9Ez3LtMvI/AAAAAAAAI-g/rC1Uk1CfVsI/s1600/boite_outils.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="183" src="http://2.bp.blogspot.com/-4mCrh6A9EiY/Ta9Ez3LtMvI/AAAAAAAAI-g/rC1Uk1CfVsI/s200/boite_outils.jpg" width="200" /></a></div>
2 - URL de l'image

Dans ce que j'ai obtenu plus haut ce qui m'intéresse c'est l'adresse précise de l'hébergement de l'image, sa dimension et son nom, ce sont les données suivantes :
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-4mCrh6A9EiY/Ta9Ez3LtMvI/AAAAAAAAI-g/rC1Uk1CfVsI/s1600/boite_outils.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="183" src="http://2.bp.blogspot.com/-4mCrh6A9EiY/Ta9Ez3LtMvI/AAAAAAAAI-g/rC1Uk1CfVsI/s200/boite_outils.jpg" width="200" /></a></div>
Je retiens donc ceci :
http://2.bp.blogspot.com/-4mCrh6A9EiY/Ta9Ez3LtMvI/AAAAAAAAI-g/rC1Uk1CfVsI/s200/boite_outils.jpg

3 - URL du site de destination

Il me faut trouver l'adresse précise (URL) vers lequel je veux que mon image pointe.
Pour l'exercice, je veux que mon image pointe vers mon blog :  
http://mestrucspourblogger.blogspot.com/
4 - Message sur l'image

Je dois réfléchir au message que je veux voir affiché lorsque mes lecteurs survoleront cette image.
Je pense qu'il est souhaitable de leur indiquer l'action offerte et le résultat.
En l'occurence :
Pour accéder à Mes trucs pour Blogger 
me semble un bon compromis.

5 - Et voici le résultat

Je reprends ma proposition du début :
<a href="ADRESSE_DU_LIEN_DE_DESTINATION" target="_blank"><img src="ADRESSE__DE_L'IMAGE" title="AFFICHAGE_AU_SURVOL_DE_L'IMAGE" /></a>
et je remplace avec les données précédemment mises de côté.
Ce qui donnera au final :

<a href="http://www.mestrucspourblogger.blogspot.com/" target="_blank"><img src="http://2.bp.blogspot.com/-4mCrh6A9EiY/Ta9Ez3LtMvI/AAAAAAAAI-g/rC1Uk1CfVsI/s200/boite_outils.jpg" title="Pour accéder à Mes trucs pour Blogger" /></a>
soit en image cliquable le résultat suivant :



Quelle utilisation pour tout ceci ?
On pense bien évidemment aux colonnes de widget où des affichages peuvent être égayés de cette manière si on veut faire des présentations personnelles sur une extraction de ses libellés par exemple.
On peut penser aussi à des images pour remplacer les titres des menus ou onglets.

A+

mercredi 4 avril 2012

Les gadgets Google+

Deux nouveaux gadgets viennent de nous être proposés par Blogger :
  1. le bouton +1
  2. le badge Google+.
Le bouton +1
Le +1 existait déjà au niveau d'un message.
Ici, il est intégré pour permettre de ressortir sur l'ensemble du blog tel qu'on peut le consulter sur Google.
Il permet aussi à vos lecteurs de le partager avec leurs amis à travers notamment leurs cercles G+

Le badge Google+
Quant au badge, celui-çi est officiel.

--------------

Ils sont accessibles, comme d'habitude, par  Mise en page / Ajouter un gadget.

Comme pour tous les gadgets, il est possible de régler certains paramètres supplémentaires en cliquant sur le bouton + bleu à côté de la sélection du blog.

A+

Lister les gadgets proposés

Nous avons vu dans un précédent message comment insérer un gadget.
Voyons maintenant la liste des gadgets proposés.

Bouton +1 - Pour permettre aux visiteurs de recommander le contenu dans la recherche Google et le partager sur Google+
Membres Google+ - Pour mettre en avant votre audience totale sur Google+ (nombre de visiteurs et quelques photos) et offrir aux visiteurs la possibilité de vous suivre sur Google+.
Badge Google+ - Pour obtenir plus de recommandations du blog dans les recherches Google et développer l'audience sur Google+
Traduire - Pour traduire votre blog en plusieurs langues
Suivre les mises à jour par e-mail - Pour permettre aux lecteurs de s'inscrire afin de suivre les mises à jour du blog par e-mail
Articles les plus consultés - Affiche la liste des articles les plus consultés de votre blog
Statistiques du blog - Affiche les statistiques de votre blog
Pages - Afficher une liste des pages autonomes de votre blog
AdSense - Pour gagner de l'argent (? ;-) en affichant des annonces sur votre blog.
Membres - Pour afficher une liste des membres de votre blog
Champ de recherche - Pour effectuer une recherche sur votre blog, sur votre blogroll et sur tout ce à quoi vous êtes connecté. .
HTML/JavaScript - Pour ajouter une fonctionnalité tierce ou un autre code à votre blog.
Texte - Pour ajouter quelques lignes à votre blog (une présentation rapide du blog, un message de bienvenue par exemple).
Image - Pour insérer une image présente sur votre ordinateur ou le Web.
Diaporama - Pour ajouter un diaporama de vos photos à votre blog.
Barre de recherche de vidéos - Pour afficher des extraits provenant de YouTube et de Google Video que vos lecteurs pourront regarder sans quitter la page.
Sondage - Pour effectuer une enquête auprès des visiteurs en ajoutant un sondage à votre blog.
Liste des blogs - Pour montrer ceux que vous lisez avec un blogroll de leurs actualités.
Liste des liens - Pour ajouter une liste de vos sites, blogs ou pages Web favoris.
Liste - Pour ajoutez la liste de vos livres ou de vos films préférés, ou tout ce qu'il vous plaira.
Flux - Pour ajouter le contenu d'un flux RSS ou Atom à votre blog.
Newsreel (actualités) - Pour ajouter automatiquement les titres de Google Actualités à votre blog.
Libellés - Pour afficher tous les libellés (les rubriques) des messages dans votre blog.
Liens d’inscription - Pour autoriser vos lecteurs à s’inscrire à votre blog à l’aide de lecteurs de flux populaires.
Logo - Pour choisir selon les différents logos Blogger à ajouter à votre page.
Profil - Pour afficher des informations sur vous-même (infos saisies sur le Tableau de bord).
Archives du blog - Pour afficher les liens vers des messages plus anciens.
En-tête de la page - Pour afficher le titre et la description du blog.
Attribution - Pour afficher les données d'attribution du blog.

A+

LinkWithin

Related Posts with Thumbnails