Blogger au bout du doigt

Afficher le top des auteurs d’un blog d’équipe

By Rodney // 1 commentaire:

Après avoir vu comment afficher une photo de l’auteur à chacun des articles de celui-ci dans un blog animé par une équipe, nous allons aujourd’hui voir comme afficher le hit parade des auteurs qui publient le plus dans un blog tenu par plusieurs, un excellent moyen pour motiver ceux-ci à plus publier.

Ce widget a été conçu par Blogger plugins pour vous permettre d’amener votre blog vers des nouvelles dimensions.

1. Assurez-vous d’être connecté à votre compte blogger.

2. Rendez-vous sur l’installateur du widget « top des auteurs » en cliquant sur bouton suivant :

3. Dans la fenêtre qui s’ouvre, remplissez le formulaire de la façon suivante :

- Pour “Widget Title”, mettez le titre que portera le widget à la place de “Top authors”

- Pour “Blog url”, mettez l’url de votre blog. Surtout, ne mettez pas le slash à la fin de l’url de votre blog, il sera automatiquement ajouté par l’installateur.

- Pour “No of Top Authors:”, mettez le chiffre correspondant au nombre d’auteurs que vous avez sur votre blog.

4. Cliquez sur le bouton « customize » puis sur le bouton “Add wiget to my blog”.Une nouvelle page s’affichera. Vérifiez bien que c’est le blog pour lequel que vous voulez installer le widget qui est affiché et cliquer sur « ajouter le gadget ».

Dites merci à Blogger plugins et faites un bisou à Rodney.

Résumé d'articles à l'accueil en un clic

By Rodney // 6 commentaires:

Parmi les nouveautés ajoutées par l'équipe Blogger depuis que la plateforme a totalisé ses dix ans, c'est la possibilité d'avoir un résumé de ses articles à l'accueil en un clic.

Pour que cette fonction soit disponible pour vous, il vous faut passer au nouveau éditeur de messages. Vous trouverez dans celui-ci un bouton, le dernier, qui permet d'insérer un saut à n'importe quel endroit de votre texte pour indiquer à Blogger que seule la partie précédente doit être affichée à l'accueil.

Ainsi, vous avez le choix entre les articles dont vous voulez qu'une partie soit affichée à l'accueil et les articles à afficher intégralement à l'accueil (là je pense aux petits articles de quelques lignes).

Vraiment utile cette nouvelle fonctionnalité, surtout pour ceux qui n'arrivaient pas à toucher à leur code html.

@+

Passer au nouveau éditeur des messages

By Rodney // 8 commentaires:

Depuis peu, Blogger offre la possibilité de passe au nouveau éditeur des messages qui a plus des fonctionnalités que l'ancien et est plus maléable. C'est l'éditeur de messages qui est installé sur la version brouillon de Blogger.

Pour changer d'éditeur des messages, il vous faut aller sur votre compte Blogger puis sur "Paramètres" et sur la nouvelle page, allez jusqu'au bas de la page (voir où il est écrit "paramètres globaux"). Cochez y "Editeur mis à jour". Notez que si vous avez plus d'un blog, tous auront le nouveau éditeur.

Si l'éditeur ne vous plaît pas, vous pourrez toujours le changer pour l'ancien à n'importe quel moment.

@+

Mille abonnés ! Et puis quoi encore ?

By Rodney // 5 commentaires:

Voilà, c’est fait. Blogger au bout du doigt vient d’enregistrer son 1000^ème abonné depuis quelques heures. Dire qu’au début de l’année nous étions encore à 365 abonnés. C’est grâce à vous, chers lecteurs, que les choses sont devenues ce qu’elles sont aujourd’hui.

En mai 2009, Eric de Presse citron avait publié un article où étaient affichés les bureaux de 22 bloggeurs occupant le top du classement Wikio à l’époque. Cet article que j’ai lu il y a quelque temps, m’a poussé à me demander s’il fallait aussi que j’attende de figurer dans un Top 20 pour faire voir à mes lecteurs mon environnement de travail. Pas du tout me suis-je dis. Si mon ami Link, qui est comme moi très loin de figurer dans le top 20 a pu publier des photos de son environnement de travail, pourquoi pas moi ? Alors, à l’occasion de la célébration du millième abonné de ce blog, permettez que je vous présente le nouveau bureau de Rodney SANKINKA.

D’abord, voici le bureau où je travaillais quand j’ai commencé ce blog.

A l’époque, je bloguais très loin de chez moi et utilisais un Windows 98 sur une machine de 6 giga (64 MB Ram) qui se plantait tellement que cela m’avait permis à rendre mes nerfs plus élastiques dans les situations de crise.

Je n’aurais jamais imaginé qu’un blog crée un soir où je m’ennuyais pourrait avoir le succès qu’il a aujourd’hui (même si maintenant j’en veux plus) et me permettra de gagner tout ce que j’y ai gagné en matériels comme immatériels.

Aujourd’hui, grâce à une de mes lectrices, je prépare les articles de mes blogs à domicile avec un XP pack 3 installé sur un laptop Toshiba Satellite U200 qui se bat pour ne pas me décevoir (93 GB H.D., 1.66 GHz et1 GB Ram), fini les brouillons sur papier.

Il faut aussi noter qu'il m'arrive de travailler avec ma nièce sur les génoux. C'est une admiratrice de Dora l'exploratrice qui a transformé mon pc en cinéma depuis que la deuxième télé à passé l'arme à gauche. Heureusement pour elle, ce petit bijou a un lecteur DVD.

Il ne reste plus qu’à me brancher sur la toile de mon domicile et je serai encore plus comblé. Comme pour le Laptop qui est un rêve devenu réalité, je crois que ce rêve qui n’est pas aussi gros que cela deviendra réalité l’un de ces quatre matins, surtout que l'un des providers de la place (Zain) vient de porter un coup très dure à la concurrence en mettant son modem à 60$ et une facture de 70$ pour un mois de connection sans limite de megabites (ou gigabites) à utiliser. J'espère pouvoir rassembler ce montant d'ici peu et amener encore ce blog vers des nouvelles dimensions. Un coup de pouce de votre part serait le bienvenu.

Tout cela pour dire que si ce blog est ce qu’il est aujourd’hui, c’est grâce à vous qui avez parlé de ce blog à vos amis ; vous qui l’avez mis dans la blog roll d’un de vos blogs ; vous qui êtes restés abonnés même quand il était en léthargie ; vous qui avez mis entre mes mains les moyens pour continuer à vous aider ; vous qui m’avez soutenus et défendus là où l’on me jetait des pommes pourries sur le visage ; vous qui avez répondus à la question d’un lecteur en désespoir et vous qui m’avez soutenus de tant d’autres manières (comme en restant anonymement un lecteur passionné de mes articles). Je vous dis à tous un grand merci.

Je sais que vos attentes sont énormes, et vous promet de faire de mon possible (et cela dans la mesure du possible) pour assouvir un tant soit peu votre désir de faire un blog à votre image, selon vos goûts.

Alors que nous mettons le cap vers le chiffre de 10.000 abonnés pour les mois à venir, je suis conscient du fait que ce blog doit subir beaucoup d’améliorations dans sa présentation, afin de rendre plus agréable vos visites, ainsi que dans son contenu qui ira comme je l’ai toujours souhaité au-delà de la configuration des blogs pour toucher le SEO, l’accroissement du nombre des visites, l’affinage du contenu, etc. car je ne vois pas l’intérêt d’avoir un beau blog si personne ne le visite (à moins qu’il soit privé).

Que Dieu nous prête vie afin qu’ensemble nous puissions amener nos blogs vers des nouvelles dimensions.

Qui sera le millième abonné ?

By Rodney // 1 commentaire:

Si seulement je pouvais le savoir, peut être que je lui aurai faxé un gros bisou ! Bon, en l'attendant, je vous fait à tous des gros gros gros calins.

Ajouter votre propre navbar

By Rodney // 3 commentaires:

Il existe des blogs hors blogger où installé une navbar inamovible au dessus du Blog. Même en descendant la page, la navbar reste au même endroit et reste toujours visible. Beaucoup des bloggeurs ont ainsi vendu cet espace publicitaire à des annonceurs pour des centaines de dollars (en tout cas, il faut signaler que sur la blogosphère anglaise).

En passant sur Blogger au bout du doigt, vous constaterez que j’ai ajouté une telle navbar sur le blog afin de plus inciter les nouveaux visiteurs à s’abonner.

Pour avoir une navbar fait maison sur votre blog, il vous faut :

1. Vous connecter à Blogger et aller ensuite sur "Mise en page" puis sur "Modifier le code html"

2. Collez le code ci-dessous juste avant la balise ]]><b:skin> pour afficher la navbar au dessus de la page

#mta_bar { background: #FFFFE1; border-bottom: 1px solid #808080; margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 0; left: 0; width: 100%; overflow: auto; position: fixed; }

* html #mta_bar{ /*IE6 hack*/

position: absolute; width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); }

#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}

#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}

#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}

#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}

#left_bar a { text-decoration: none; color: #0000FF; }

#left_bar a:hover { text-decoration: underline; color: #0000FF; }

Pour afficher la navbar au bas de la page, mettez plutôt ce css juste avant ]]><b:skin>

#mta_bar {

background:#003366;

border-top: 3px solid #6699ff;

margin: 0;

padding: 7px 0;

z-index: 100;

bottom:0px;

right:0px;

width: 100%;

overflow: auto;

position: fixed;

}

* html #mta_bar{

/*IE6 hack*/

position: absolute;

width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");

}

#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}

#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}

#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}

#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}

#left_bar a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjyMgar3GpcJWcdusN1413WijnWPj6GM7s7W04oXhJ22Bd8fBwaa12xBWDdsIUzoegkZYcb5bnXmo2g-HKSzsR55Rt6piuqz4Iz3oro00w9XtJ4UCgXw7A5WfWM2jQENVpwLueXIHk_0Y/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}

#left_bar a:hover { text-decoration: underline; color: #fff; }

3. Collez le code suivant juste avant la balise </head>

//<![CDATA[

var mta_arr = new Array();

var mta_clear = new Array();

function mtaFloat(mta) {

mta_arr[mta_arr.length] = this;

var mtapointer = eval(mta_arr.length-1);

this.pagetop = 0;

this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;

this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);

this.mtasrc.height = this.mtasrc.offsetHeight;

this.mtaheight = this.cmode.clientHeight;

this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);

var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';

mtabar = mtabar;

eval(mtabar);

}

function mtaGetOffsetY(mta) {

var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);

var parentOffset = mta.mtasrc.offsetParent;

while ( parentOffset != null ) {

mtaTotOffset += parentOffset.offsetTop;

parentOffset = parentOffset.offsetParent;

}

return mtaTotOffset;

}

function mtaFloatInit(mta) {

mta.pagetop = mta.cmode.scrollTop;

mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";

}

function closeTopAds() {

document.getElementById("mta_bar").style.visibility = "hidden";

}

//]]>

</script>

4. Mettez le code ci-après juste au dessus de la balise </body>

<div id='left_bar'><span class='left'><a href='URL DE VOTRE FLUX RSS' target='_blank'>PHRASE A AFFICHER</a></span></div>

Dans le code ci-haut, la navbar invite les non abonnés à s’inscrire au flux rss du blog. Pour mettre les indications propres à votre blog, remplacez les éléments en gras par l’url de votre flux rss, le lien de votre blog et le texte qui doit apparaître.

Enregistrez le modèle et allez admirer le résultat. Dites Merci à O-o.com

Notez que vous pouvez changer la couleur de la barre (notre article Comprendre le css de votre blog 2 peut vous y aider) et même l’utiliser à d’autres fins, comme faire la pub d’un autre de vos blogs. Dans ce cas, à la place de l’url flux rss vous mettrez l’url du flux de celui-ci, pour la phrase, vous mettrez « visitez aussi mon blog xxxx » et ensuite vous mettre l’url de celui-ci.

Un voyage à haut risque

By Rodney // Aucun commentaire:

Et dire que vous vous plaignez quand vous voyagez en troisième classe. D'après vous, c'est la quantième classe ça ? La centième ?

Source : Debout Congolais

Partager un blog Blogger

By Rodney // 1 commentaire:

Certains le savent et d'autres pas (surtout ceux qui ont envoyé promener la navbar de Blogger), mais, depuis peu, Blogger offre aux visiteurs d'un blog Blogger la possibilité de le partager sur Twitter, Facebook ou Google Reader.

Il a été insérer sur la navbar Blogger un bouton "partager" pour permettre la vulgarisation d'un Blog Blogger dans les trois services précités.

Si vous aviez complétement caché la navbar et voulez quand même de temps en temps la faire réapparaître pour permettre à vos lecteurs de bénéficier de cet outil, voyez notre article "jouer à cache cache avec la navbar Blogger".

Espéront qu'il permettra aux blogs qui ont la navbar affiché d'être un peu plus diffusé dans les alentours.

Changer la taille du formulaire des commentaires

By Rodney // 7 commentaires:

L’une des caractéristiques de lecteurs de ce blog ainsi que de tous ceux qui fouillent le net à la recherche d’astuce pour améliorer leur blog, c’est qu’ils veulent avoir un blog différent de celui du voisin.

Cette différence vous pouvez l’avoir même dans la taille du formulaire des commentaires fournit par Blogger. Pour cela, il vous suffit de vous connecter sur Blogger, d’aller sur « Mise en page », puis sur « Modifier le code html » et là, cochez sur « Développer des modèles de gadget ».

Trouvez le code suivant et changez-en la valeur selon votre goût (voir les éléments en gras ).

Enregistrez votre modèle et allez admirer le résultat. S’il ne vous plaît pas, vous toujours revenir changer de nouveau les valeurs.

Connaître les statistiques des blogs avec top des blogs

By Rodney // Aucun commentaire:

En naviguant sur le net, je suis tombé sur le site Le Top de blogs. Il a la particularité de pouvoir vous donner les statistiques de n'importe quel blog sur la toile. Pour cela, il vous suffit d'entre l'url du blog et de cliquer sur le bouton "analyser".

Les statistiques sont diverses, il y a entre autre :

- Un classement propre au site LeTop des blogs où l'on donne la position occupé par le blog parmi les blogs les plus lu (ce blog est le 319ème blog le plus lus en ce moment), sa position en terme d'abonné (292ème pour ce blog), sa position sur Google, sur délicious, et sur Yahoo.

- Pour feedburner : le nombre d'abonnés et la moyenne de lecture (cela dépendra évidement de votre rythme de publication)

- Pour wikio : La place du blog dans le classement général et dans sa catégorie;

- Pour Technorati : la position dans le classement, l'autorité et le nombre des liens entrants ;

- Pour Google et Yahoo : Le nombre des pages indexées, et des liens entrants (ajoutez le Page rank pour Google);

Il paraît qu'avec un compte premium on peut même avoir des statistiques plus détaillés sur ces blogs, notamment l'estimation de trafic, données démographiques, etc.

Alors, si vous voulez connaître les statistiques d'un blog, n'hésitez pas d'utiliser Le Top de blog.

Gagner de l’argent avec des vidéos Goviral

By Rodney // 2 commentaires:

Il y à peu près un mois de cela, j’avais été invité à rejoindre une plateforme de diffusion des vidéos rémunérées appelée Goviral. C’est ainsi que depuis quelques temps, vous voyez des vidéos du genre celle qui suit sur mon blog.

Les vidéos proposées ont une largeur minimum de 300 pixels et peuvent être mises dans un article, dans la siberbar de votre blog ou tout endroit visible par les visiteurs.

Les prix de ces vidéos varient selon les annonceurs. Mais, à ce que j’ai remarqué, elles varient de 0, O2 euro à 0, 05 euro (parfois c’est plus). A 0,02 euro, vous gagnez 20 euro pour 1000 visionnements.

La particularité de cette plateforme, est que les vidéos qui sont proposées les sont pour des pays cibles et les bloggeurs sont invités à n’afficher que des vidéos ciblant les pays de provenance de leurs visiteurs (il est donc important de savoir les 5 premiers pays de provenance de vos visiteurs). Avec cette option, une vidéo visionnée 50 fois, mais seulement 36 fois dans les pays ciblés par la publicité, ne sera payée que pour ces 36 visions cibles.

J’ai aussi aimé leur système de paiement (même si le virement bancaire ne marche pas pour moi à cause de ce fichu IBAN). Les paiements sont effectués par virement bancaire ou Paypal chaque 22 du mois suivant celui où vous avez atteint 50 euro dans votre compte.

Comme j’ai toujours conseillé de diversifier les sources de revenus de son blog (à ceux qui les monétisent), histoire de ne pas mettre tous ses œufs dans le panier de Google, je vous invite à essayer Goviral pour ajouter quelques sous de plus dans votre tirelire.

Des balises meta pour votre blog

By Rodney // 18 commentaires:

En passant sur le blog d’Anne, Papilles et pupilles, j’ai eu l’idée de jeter encore une fois un coup d’œil au code source de ce blog combien populaire et voilà que je remarque qu’il y a plus de balises meta que sur mon blog.

J’en ai récolté l’essentiel, dont je vous donne la liste ici. Il vous suffit de changer les indications en gras en ceux qui conviennent pour votre blog. A mettre juste avant les balises <title></title>

Ces trois premières balises ne doivent être ajoutées que si elles n’existent pas encore sur votre blog (genre si vous aviez déjà inséré l’astuce pour insérer des balises meta dynamiques).

La balise qui suit instruit les robots moteurs de recherche sur le nombre de jours après lequel revenir examiner le blog. Vous pouvez changer le 2DAYS (2 jours) en 3DAYS, 4DAYS ou 7DAYS. Tout dépend de votre rythme de publication.

C’est cette dernière balise que j’ai aimé. Il semble qu’elle instruit les versions antérieures d’Internet Explorer d’émuler la 7^ème version (dites-moi si je me trompe).

Générateur des coins arrondis pour images

By Rodney // 7 commentaires:

Des images avec des coins arrondis sont d’une grande utilité quand on désire avoir un blog avec des bords arrondis pour l’entête, la partie centrale ou les sidebars. C’est aussi parfois beau d’avoir une image avec coins arrondis dans ses articles. Ça peut même constituer votre marque à vous de n’avoir que d’images avec coins arrondis pour illustrer vos articles, un peu comme c’est la marque de Dosh Dosh d’avoir des images des mangas pour illustrer les articles de son blog.

Pour vous mesdames et messieurs, voici un générateur des coins arrondis fournis par Roundpic.

Widget Facebook : Installation et adaptation

By Rodney // 8 commentaires:

Ceci est un article de Mathieu, du blog The Geek Station, actualité Geek, Hacking, astuces Windows et Linux, et conseils et techniques underground ! Déjà un peu plus de 200 articles :)

Bonjour à tous,

Je voudrait vous présenter un widget très pratique et de quoi l'adapter a votre cher blog.

Tout d'abord, vous devez inscrire votre blog en tant que Page ou Groupe sur Facebook. Choisissez bien les informations, le titre, la description, et l'image qui fera logo. Ensuite invitez vos amis et vos lecteurs à s'inscrire. Pour les lecteurs il existe un widget - et c'est de ça qu'on va parler.

Donc, pour avoir ce widget, connectez-vous sur Facebook, allez sur la page de votre Blog, et cliquez sur "Ajouter un espace Fan à votre site Web"

Ensuite, selectionnez votre blog, et modifiez les deux options comme vous le voulez : Inclure le fil d'actualité et Afficher les fans (Je vous recommande les deux)

Cliquez sur + Blogger.

Ensuite allez sur Mise en page, puis déplacez votre widget sur la colonne de votre choix. Quand vous l'aurez positionné, modifiez le et regardez ceci :

fb:fan connections="x" width="y" profile_id="110083063877" stream="z"

Vous pouvez remplacer x par le nombre de fan que vous voulez faire apparaitre (je vous recommande un nombre paire pour un meilleur affichage), y par la largeur de votre colonne en pixel, et par 0 ou 1 pour afficher ou nom le stream (le fil d'actualité).

Voici d'autre option

css : Votre propre feuille de style pour le widget

height : hauteur du widget en pixel

Vous pouvez aussi enlever le lien en petit en dessous sans brusquer le widget (par "Format RTF")

J'espère que ça vous aura servi !

Vous pouvez retrouver Mathieu sur son blog The Geek Station où il se fera un plaisir de répondre à vos questions et vous faire découvrir son univers pas comme les autres. Pour s'abonner à son blog, cliquez sur le lien suivant : http://feeds.feedburner.com/GeekSource-RSS

Créer une bannière avec menu en images cliquables grâce à GIMP

By Rodney // 15 commentaires:

Ceci est article de Phil du blog Coccxyphil.

Salut à tous, voici un petit tuto qui vous permettra d’avoir une bannière avec un menu en images cliquables en son sein. Mise à part le temps passé pour la création de l’image, il ne faut pas s’inquiéter pour la taille du mode d’emploi : en fait, il m’a fallu beaucoup moins de temps pour mettre mon menu sur orbite que pour faire le tuto …

Avant de commencer : attention, l’image doit bien entendu être compatible avec la « largeur » du blog (ici 980px pour le blog et l’image) !! Faites donc vos réglages au préalable, sinon : problèmes …

Pour réaliser cette astuce, il est important de posséder l’éditeur d’image GIMP (vous pouvez le télécharger ici).

1/ Préparer l’image avec gimp, les calques pour les zones de textes, etc …

- Quand vous avez fini la conception de votre image, dans un premier temps enregistrez-le au format « GIMP » : voir « Enregistrer sous », au bas, développer « sélectionner le type de fichier » à choisir IMAGE GIMP XCF

Vous aurez ainsi tout loisir pour rajouter plus tard des menus sans reprendre tout à zero …

- Ensuite, la réenregistrer au format plus habituel jpg …

Cela donne, par exemple, pour ma bannière (J’ai préparé les différents titres qui deviendront plus tard mes menus de navigation…)

2/ Se connecter dans BLOGGER

Aller sur « Mise en page » puis « Modifier » l’en tête pour mettre l’image au format jpg dans la bannière du blog …

Pour cela, après avoir cliqué sur « modifier » pour le widget en-tête, dans la pop-up qui s’ouvre, choisir :

à Importer une image

à Substituer au titre et à la description

3/ Affichez vote blog

Vous avez maintenant une belle bannière (qui ne sert encore qu’à faire beau). Récupérez l’adresse de cette image. La noter … (par exemple, avec Firefox, faire « copier l’adresse de l’image », puis collez l’adresse dans un fichier Word, wordpad ou notepad.

L’url en question aura cette forme :

http://1.bp.blogspot.com/_dbI1dBfeX2s/SsJhhLycgsI/AAAAAAAAIbs/ZaZap-UFsnk/S1600-R/blanc.jpg

Cette adresse vous servira plus tard.

4/ Maintenant, reprendre notre image sauvegardée sous format GIMP :

Puis, aller dans les menus filtre>>web>>image cliquable

Vous verrez une nouvelle fenêtre apparaître, dans laquelle vous allez créer vos menus :

Sur la gauche, en fonction de ce que vos voulez faire, choisir zone rectangulaire, ou ronde, …

Sélectionnez votre première zone cliquable avec la souris, vous verrez une nouvelle fenêtre apparaître. Cochez « site web » (vous pouvez adapter au besoin : messagerie, …)

Mettez l’URL de la page vers laquelle sera dirigé le visiteur après avoir cliqué sur le nom du menu. Ajoutez éventuellement un texte alternatif …

Faire appliquer, valider, et recommencer de même avec toutes les zones que l’on veut rendre « cliquable » … Attention à ce qu’elles ne se chevauchent pas.

Voilà, c’est presque prêt …

Quand tout est prêt, faire « enregistrer sous » … GIMP propose d’enregistrer le plan de l’image sous le nom « nomdevotreimage.jpg.map » à remplacer par « nomdevotreimage.txt »

5/ Maintenant, ouvrir ce fichier texte …avec le bloc-notes

Chez moi, ça donne (j’ai raccourci) :

<img border="0" usemap="#map" width="980" src="MONDEVOTREIMAGE.JPG" height="300"/>

<map name="map">

<!-- #$-:Image map file created by GIMP Image Map plug-in -->

<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->

<!-- #$-:Please do not edit lines starting with "#$" -->

<!-- #$VERSION:2.3 -->

<!-- #$AUTHOR:phil -->

<area shape="rect" coords="826,61,875,83" alt="Retour à l&apos;accueil" href="http://coccxyphil.blogspot.com/"/>

ETC … ETC …

</map>

Il faut remplacer l’adresse de l’image donnée par GIMP ci-dessus EN ROUGE par l’adresse copiée au point 3, soit l’adresse réelle de votre bannière sur votre blog :

<img border="0" usemap="#map" width="980" src=" http://1.bp.blogspot.com/_dbI1dBfeX2s/SsJhhLycgsI/AAAAAAAAIbs/ZaZap-UFsnk/S1600-R/blanc.jpg

" height="300"/>

ETC … ETC …

Tout est prêt …

Voilà pour exemple, la totalité du fichier de mappage pour notre site, à copier puis à coller dans blogger, avec la bonne adresse pour l’image :

<img border="0" usemap="#map" width="980" src=" http://1.bp.blogspot.com/_dbI1dBfeX2s/SsJhhLycgsI/AAAAAAAAIbs/ZaZap-UFsnk/S1600-R/blanc.jpg

" height="300"/>

<map name="map">

<!-- #$-:Image map file created by GIMP Image Map plug-in -->

<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->

<!-- #$-:Please do not edit lines starting with "#$" -->

<!-- #$VERSION:2.3 -->

<!-- #$AUTHOR:phil -->

<area shape="rect" coords="826,61,875,83" alt="Retour à l&apos;accueil" href="http://coccxyphil.blogspot.com/"/>

<area shape="rect" coords="852,105,938,135" href="http://coccxyphil.blogspot.com/search/label/N%C3%A9pal?max-results=5"/>

<area shape="rect" coords="872,158,949,190" href="http://coccxyphil.blogspot.com/search/label/Italie?max-results=5"/>

<area shape="rect" coords="818,217,928,245" href="http://coccxyphil.blogspot.com/search/label/Espagne?max-results=5"/>

<area shape="rect" coords="15,217,103,243" href="http://coccxyphil.blogspot.com/search/label/Vercors?max-results=5"/>

<area shape="rect" coords="118,220,230,242" href="http://coccxyphil.blogspot.com/search/label/Chartreuse?max-results=5"/>

<area shape="rect" coords="250,222,371,244" href="http://coccxyphil.blogspot.com/search/label/Belledonne?max-results=5"/>

<area shape="rect" coords="383,224,521,243" href="http://coccxyphil.blogspot.com/search/label/Ailleurs?max-results=5"/>

<area shape="rect" coords="539,223,607,243" href="http://coccxyphil.blogspot.com/search/label/Vid%C3%A9os?max-results=5"/>

<area shape="rect" coords="619,221,667,243" href="http://coccxyphil.blogspot.com/search/label/jeux?max-results=5"/>

<area shape="rect" coords="680,221,774,245" href="http://coccxyphil.blogspot.com/search/label/Trombino?max-results=5"/>

<area shape="rect" coords="129,257,257,285" href="http://coccxyphil.blogspot.com/search/label/Topo%20rando?max-results=5"/>

<area shape="rect" coords="285,261,427,288" href="http://coccxyphil.blogspot.com/search/label/Topo%20escalade?max-results=5"/>

<area shape="rect" coords="461,262,565,290" href="http://coccxyphil.blogspot.com/search/label/Paratruc?max-results=5"/>

<area shape="rect" coords="597,264,703,288" href="http://coccxyphil.blogspot.com/search/label/Grimpe?max-results=5"/>

<area shape="rect" coords="69,9,800,197" href="http://coccxyphil.blogspot.com/"/>

</map>

6/ Connectez-vous à nouveau sur votre compte blogger,

Allez sur « Mise en page », « modifier le code html », puis cochez la case « développer les modèles de gadgets ». Faites une sauvegarde de votre modèle complet, au cas où …

Chercher :

</a>

</div>

Remplacez tout ce qui est en rouge par le code de mappage que vous venez de créer …

Enregistrez … Le tour est joué !

Allez sur votre blog : un beau menu qui marche ! Bien ça J

Ça fonctionne sur notre blog : http://coccxyphil.blogspot.com Et je viens de créer un blog test avec les mêmes images pour faire les copies d’écran, même résultat …

A+

Vous pouvez retrouver Phil sur son blog Coccxyphil, où il se fera un plaisir de répondre à vos questions et vous faire découvrir son univers pas comme les autres. Pour s’abonner à son blog, cliquez sur le lien suivant.

Image:
ou URL:

SEO & REFERENCEMENT