ajouter gadget html/javascript texte image

obtenir ces boutons

Ajouter un gadget à un blog

HTML/JavaScript - Texte - Image - Champ de recherche

Gadget HTML/JavaScript : suivre la procédure suivante :

1) Se connecter à un site qui diffuse des gadgets.

2) Choisir un gadget.

3) Copier le code.

4) Dans le "Tableau de bord" de Blogger, cliquer à côté du nom du blog concerné sur :

"Mise en page" ;
"Ajouter un gadget" ;
remarque : si ce lien n'existe plus, consulter : restaurer le lien "Ajouter un gadget".
"HTML/JavaScript",

5) Coller le code.

6) Enregistrer.

7) Déplacer éventuellement le gadget à un autre endroit, en le faisant glisser avec la souris.

* * * * *
On peut aussi ajouter un "gadget texte" que l'on complètera soi-même par un texte, des liens et/ou des images.

Suivre la procédure suivante :

1) Cliquer sur :

"Mise en page" ;
"Ajouter un gadget" ;
remarque : si ce lien n'existe plus, consulter : restaurer le lien "Ajouter un gadget".
"Texte",

2) Écrire un texte ou insérer des liens ou des images.

Un lien doit avoir été créé, par exemple dans un message (qu'on peut laisser au brouillon ou supprimer par la suite) de Blogger. On récupère son adresse (voir ci-après un exemple) dans la version html du message, et on la colle dans la version html du gadget texte.

exemple :

<a href="http://hieroglyphes-egyptiens-accueil.blogspot.com/" target="_blank">Un ouvrage de 300 pages consacré à l'égyptologie</a>

Pour une image, il faut qu'elle soit enregistrée, par exemple dans un message (qu'on peut laisser au brouillon ou supprimer par la suite) de Blogger. On récupère son adresse (voir ci-après un exemple) dans la version html du message, et on la colle dans la version html du gadget texte.

exemple:

<img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 27px; height: 24px;" src="http://1.bp.blogspot.com/_sPwH_KmuNT8/Sv1mVcSI2MI/AAAAAAAAATU/B-1tP7im8mQ/s320/fleche_115.gif" alt="" id="BLOGGER_PHOTO_ID_5403587646470019266" border="0" />

3) Enregistrer.

4) Déplacer éventuellement le gadget à un autre endroit, en le faisant glisser avec la souris.

* * * * *
On peut aussi ajouter directement une image ("gadget image") dans un gadget.

Suivre la procédure suivante :

1) Cliquer sur :

"Mise en page" ;
"Ajouter un gadget" ;
remarque : si ce lien n'existe plus, consulter : restaurer le lien "Ajouter un gadget".
"Image",

2) Choisir une image existant sur le web ou sur le disque dur de l'ordinateur.

3) Enregistrer.

4) Déplacer éventuellement le gadget à un autre endroit, en le faisant glisser avec la souris.

* * * * *
On peut aussi ajouter directement un "Champ de recherche" dans un gadget.

Cela fonctionne parfaitement et est utilisé sur ce site : voir "Rechercher sur ce site" dans la colonne de gauche.

Suivre la procédure suivante :

1) Cliquer sur :

"Mise en page" ;
"Ajouter un gadget" ;
remarque : si ce lien n'existe plus, consulter : restaurer le lien "Ajouter un gadget".
"Champ de recherche",

2) Enregistrer.

3) Déplacer éventuellement le gadget à un autre endroit, en le faisant glisser avec la souris.

* * * * *
Les gadgets peuvent allonger inutilement la colonne latérale. Pour raccourcir la colonne latérale, on peut très facilement remplacer des gadgets par de simples liens. En cliquant sur ces liens, on fait apparaître les gadgets cachés.

Exemple : dans la colonne de gauche de ce site, se trouve le lien : FORMULAIRE DE CONTACT ▼. En cliquant dessus, le gadget apparait.

En cliquant ensuite sur "fermer ▲", le gadget est à nouveau masqué.

Autre exemple : plus bas dans la colonne de gauche de ce site, cliquer sur le lien : MUSIQUE EN LIGNE ▼.

On peut faire cela avec tous les gadgets : méthode : consulter la page disponible ici.

10 commentaires:

ÉGALITÉ... sans guillemets a dit…

Bonjour et merci pour les éléments de réponse que vous m'avez fournis précédemment. Je vous prie de m'excuser de revenir sur ma question initiale, mais malgré votre aimable réponse, je n'arrive pas à trouver la solution à ma question posée alors. Je rappelle donc mon souci: je sais ajouter une image au Commentaire (ou article principal) de mon blog... pas de problème à ce niveau-là. Mais je ne parviens pas à ajouter une image au texte du gadget de la colonne placée à gauche (ou à droite selon le modèle de blog sélectionné). Soit, je trouve un gadget permettant d'ajouter une image et alors, je n'ai pas de place pour y insérer un texte; soit je trouve un gadget permettant d'ajouter un texte, mais alors je n'ai pas de place pour y insérer une image. C'est soit l'un, soit l'autre... Y a-t-il un gadget permettant à la fois, de placer une petite image ou photo et qqs lignes de texte dans la colonne latérale?

Meiser a dit…

Ajoutez un gadget HTML/JavaScript. Vous pouvez y mettre à la fois du texte et des images (pour simplifier copier-coller une petite image ajoutée à un message).


Les Boucles d'Alice a dit…

Bonjour

Sur mon blog www.lesbouclesdalice.com,j'ai réussi à mettre 2 images et leurs liens respectifs (Facebook et Pinterest) sous forme de colonnes, mais je souhaiterais rajouter une troisième image à côté. Comment faire? Voici le code utilisé :

div style="width: 45%; float: left;"
div style="width: 45%; float: right;"

div style="clear: both;"



Merci!!!

Meiser a dit…

Bonjour.

<img ... style="float: left;">
<img ... style="float: left;">
<img ... style="float: left;">

<div style="clear: both;"></div>

Si les images sont trop grandes, ajouter des "width: 30%;" par exemple.


bibifashionaddict a dit…

Super,
Je débute et depuis hier, je crée mon blog comme une grande.
En plus ce n'est vraiment pas très compliqué,et c'est si bien expliqué!
Quand je pense que j'ai payé un webmasteur-arnaqueur 1200 euros alors que grâce a toi je le fais toute seule.
Merci

Anaïs Cayla a dit…

Merci pour ce blog et cet article en particulier.
Je ne maîtrise pas bien le code et grâce à vos explications très claires, je suis parvenue à associer des images à des URL (icônes d'outils sociaux et flux rss dans la colonne de droite) grâce au gadget html.
Mille mercis et bonne continuation.

4pattesaubled a dit…

Bonsoir,
- Depuis quelques temps déjà, il m'est impossible d'ajouter un gadget texte (ou image, cela me fait pareil pour les 2) : la fenêtre s'ouvre, je tape mon texte, mais impossible d'enregistrer, ce qui est très frustrant, car cela m'empêche de terminer la structure de mon blog. J'ai cherché à de nombreuses reprises sur le net, mais n'ai rien trouvé pour solutionner ce problème. Pouvez-vous me guider ?
- j'avais également essayé d'ajouter un gadget HTML/JAVA, impossible aussi, mais là je pense que j'avais une erreur quelque part, bien que suivant les tutos présentés. J'avais le titre du gadget qui apparaissait comme du texte sur le blog.
- Je débute sur Blogspot (ancienne OB) et je suis bien loin de maîtriser...
Alors grand merci par avance pour votre aide éventuelle.

Emilie Hawlena a dit…

Hello 4pattesaubled, j'ai exactement le même soucis!!! J'ai pas de problème pour enregistrer les gadget tout fait proposés par blogger mais dès que je veux en ajouter un (ex: Instagram ou Hellocoton) Je copie/colle le texte du gagdet via HTLM/JAVA et ensuite j'essaye d'enregistrer mais RIEN! Aucune réaction et ça me bloque aussi. As tu trouver une solution depuis ton post?
Merci d'avance

4pattesaubled a dit…

à Emilie Hawlena : malheureusement non !... aucune solution trouvée à ce jour.. et donc toujours les mêmes problèmes... J'ai recherché sur bon nombre de sites, forums, etc. n'ai toujours pas pu finaliser mon blog et sa présentation. Je ne sais plus où m'adresser...

Meiser a dit…

Bonjour.

Pour : 4pattesaubled et Emilie Hawlena

1) Consulter :
http://modifier-les-modeles-de-blogger.blogspot.be/2011/06/lien-ajouter-un-gadget.html

2) On peut ajouter un gadget directement dans le modèle qui se présente comme ceci :

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='HTML1' locked='false' title='' type='HTML'>...</b:widget>
<b:widget id='Text1' locked='false' title='' type='Text'>...</b:widget>

</b:section>

- Copier par exemple
<b:widget id='HTML1' locked='false' title='' type='HTML'>...</b:widget>
- le coller dans une section à l'endroit où l'on veut le placer et remplacer HTML1 par un autre nom qui n'existe pas encore HTML5 ...