Mémo 15 (atelier informatique du 25/11/2015) : Création du Blog - Insertion de gadgets

Utilisation des gadgets

Accéder à la mise en page

• Ajouter un gadget

• choisir le gadget

•  Configurer et enregistrer le gadget 

• Listes des Gadgets utiles

	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.

Mémo 14 (atelier informatique du 18/11/2015) : Création du Blog - Insertion zone de texte, PDF, tableau, site dans le blog

Utilisation de Google Drive:

• Accéder à Google Drive

• Créez un compte google et/ou connectez-vous

• créer/importer un dossier

• ajouter des fichiers

• créer des documents,textes, tableurs, présentations...

• Partager les fichiers et les dossiers

Utiliser le menu contextuel

Partage - mode avancé

résultat et lien de partage

Intégrer des documents stockés sur Google Drive

MÉTHODE : vous aurez à copier/coller du code, puis le modifier.  vous pouvez utiliser le bloc notes pour réaliser ces opérations (voir ci-dessus). Lorsque le code est finalisé, il suffit de le coller dans l'article de Blogger, en mode HTML 

Télécharger ou créer le fichier sur Google Drive, puis le partager afin d'obtenir son URL du type :

https://drive.google.com/file/d/0B6Uwn-CRRjnZRm0tVTF0SUFMQk0/view?usp=sharing 

Dans l’URL copiée la partie en fluo jaune représente l’identifiant du fichier partagé. Il s'agit de la partie entre les 2 slashs /IDENTIFIANT/, Il faudra bien l'identifier puis le copier.

Choisir le mode HTML pour insérer le document 

En mode HTML, il faudra copier le code ci-dessous et remplacer  l'identifiant du fichier par le votre. Voici le  code selon le type de fichier concerné

IMAGE

[integration directe via Blogger> icône  "Insérer une image"]

ou

<img src="https://drive.google.com/uc?id=IDENTIFIANT" />

Faire une image cliquable qui renvoie vers un site ou un message

<a href="ADRESSE_DU_LIEN_DE_DESTINATION" target="_blank"><img src="ADRESSE__DE_L'IMAGE" title="AFFICHAGE_AU_SURVOL_DE_L'IMAGE" /></a>
ou

<a href="ADRESSE_DU_LIEN_DE_DESTINATION" target="_blank"><img src="https://drive.google.com/uc id=IDENTIFIANT" title="AFFICHAGE_AU_SURVOL_DE_L'IMAGE" /></a>

Exemple

 FICHIER AUDIO

mp3

[code intégration  uniquement via cette méthode !]

sans démarrage automatique

<audio controls="" src="https://drive.google.com/uc?id=IDENTIFIANT">Votre navigateur n'est pas à jour !</audio>

avec démarrage automatique

<audio controls autoplay="" src="https://drive.google.com/uc?id=IDENTIFIANT">Votre navigateur n'est pas à jour !</audio>

Exemple

FICHIER PDF

[code intégration  uniquement via cette méthode !]

<iframe src="https://docs.google.com/file/d/IDENTIFIANT/preview" width="600" height="850"></iframe>

Exemple

FEUILLE DE CALCUL 

(tableur)

[code intégration  disponible via Google docs, Menu fichier> Publier sur le web > Intégrer]

ou

<iframe width="500" height="300" frameborder="1" src="https://docs.google.com/spreadsheet/pub?key=IDENTIFIANT&output=html&widget=true"></iframe>

Exemple

PRÉSENTATION

(Diapos de type Powerpoint)

[code intégration  disponible via Google docs, Menu fichier> Publier sur le web > Intégrer]

ou

Code avec démarrage auto

<iframe src="https://docs.google.com/presentation/d/IDENTIFIANT/embed?start=true&loop=true&delayms=5000" frameborder="0" width="480" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

ou

Code avec démarrage non auto

<iframe allowfullscreen="true" frameborder="0" height="569" mozallowfullscreen="true" src="IDENTIFIANT/embed?start=false&amp;loop=false&amp;delayms=5000" webkitallowfullscreen="true" width="680"></iframe>

Exemple

DESSIN 

(type Google drawings)

[code intégration  disponible via Google docs, Menu fichier> Publier sur le web > Intégrer]

ou

<img src="https://docs.google.com/drawings/d/IDENTIFIANT/pub?w=480&amp;h=360">

Exemple

DOCUMENT TEXTE

(Google Docs) 

[code intégration  disponible via Google docs, Menu fichier> Publier sur le web > Intégrer]

ou

<iframe src="https://docs.google.com/document/d/IDENTIFIANT/pub?embedded=true"></iframe>

(fichier Word)

[code intégration  uniquement via cette méthode !]

<iframe src="https://docs.google.com/file/d/IDENTIFIANT/preview" width="600" height="845"></iframe>

Exemple 

 VIDÉOS  

[integration directe via Blogger> icone  "Insérer une  vidéo"]

ZONE DE TEXTE

(Google Docs) 

Le Système d'Echange Local

permet de réaliser ses projets,

de se faire aider dans sa vie quotidienne,

de trouver l'objet de ses désirs,

sans utiliser le moindre centime.

Basé sur la solidarité, l'entraide, l'échange,

SEL' AVENIR Dracénie

est votre point d’accès à une économie solidaire moderne.

 Rejoignez-nous 

Permanence tous les vendredis

de 10 heures à 12 heures

Maison de la solidarité

boulevard Bernard de Trans

DRAGUIGNAN

Vous pouvez vous pré-inscrire

en cliquant ci-dessus

sur "Rejoignez-nous"

ou en vous rendant à la

permanence

TABLE

<table class="ccm" style="background-color: white; border-collapse: collapse; border-spacing: 0px; color: #303030; font-size: 14px; line-height: 21px; width: 100%px;"><tbody>
<tr><th style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></th><th style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></th></tr>
<tr><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td></tr>
<tr><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td></tr>
<tr><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td></tr>
<tr><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td></tr>
<tr><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td><td style="border: 1px solid rgb(48, 48, 48); padding: 5px; vertical-align: top;"><br /></td></tr>

</tbody></table>

SITE

<iframe src ="url de la page" width="600" height="800">
  <p>Your browser does not support iframes.</p>
</iframe>

Impression

<span style="font-weight: bold; text-align: center;color:#3333ff;"><a href="javascript:window.print()">Imprimer cette page</a></span>

Imprimer cette page