Blog test de prac

Faire un sommaire

2011-03-17T13:19:00.000-07:00

Le style

.c_temp
{
color: #de7008;
text-decoration: none;
cursor: pointer;
font-size: 0.85em;
}

ul.chap, ul.chap li
{
list-style-image: none;
list-style-type: none;
}

Le Script

Le HTML

<ul class="chap">

<li id="ch00t" class="c_temp" onclick="poke('ch00');">► Les Gadgets</li>

<ul id="ch00" style="display: none;">

<li><a href="http://viti-vino.blogspot.com/2009/06/sonoriser-ses-images-avec-dewplayer.html"
title="Sonoriser ses images avec Dewplaye" target="_blank">Sonoriser ses images avec
Dewplayer</a></li>
<li><a href="http://viti-vino.blogspot.com/2008/12/des-gadgets-pour-son-blog.html"
title="Ajouter du son et des videos sur son Blog" target="_blank">Ajouter du son et des
videos sur son Blog</a></li>
</ul>

<li id="ch01t" class="c_temp" onclick="poke('ch01');">► Les Diaporamas</li>

<ul id="ch01" style="display: none;">

<li><a href="http://viti-vino.blogspot.com/2008/12/des-gadgets-pour-son-blog-2.html"
title="Des Gadgets pour son Blog" target="_blank">Des Gadgets pour son Blog</a></li>
<li><a
href="http://viti-vino.blogspot.com/2008/10/un-diaporama-dans-le-corps-du-message.html"
title="Un Diaporama dans le corps du message" target="_blank">Un Diaporama dans le corps du
message</a></li>
</ul>

<li id="ch02t" class="c_temp" onclick="poke('ch02');">► Les bordures</li>

<ul id="ch02" style="display: none;">

<li><a href="http://viti-vino.blogspot.com/2010/07/ombrer-boites-box-shadow.html" title="Les
bords ombragés" target="_blank">Les bords ombragés</a></li>
<li><a href="http://viti-vino.blogspot.com/2008/07/mettre-ses-photos-en-valeurs.html"
title="Mettre ses photos en valeur" target="_blank">Mettre ses photos en valeur</a></li>
</ul>

<li id="ch03t" class="c_temp" onclick="poke('ch03');">► Autre</li>

<ul id="ch03" style="display: none;">

<li><a href="http://viti-vino.blogspot.com/2010/03/code-qr-liens-telephone-mobile.html"
title="Un QR Code sur son Blog" target="_blank">Un QR Code sur son Blog</a></li>
<li><a href="http://viti-vino.blogspot.com/2010/01/fichiers-joints-podcasting-blogger.html"
title="Fichiers joints et Podcasting" target="_blank">Fichiers joints et Podcasting</a></li>
<li><a href="http://viti-vino.blogspot.com/2009/12/google-web-elements.html" title="Les
Google Web Elements" target="_blank">Les Google Web Elements</a></li>
<li><a href="http://viti-vino.blogspot.com/2008/12/google-maps-dans-les-messages-du-blog.html"
title="Google Maps sur son Blog" target="_blank">Google Maps sur son Blog</a></li>
</ul>

</ul>

Le Résultat

► Les Gadgets

► Les Diaporamas

► Les bordures

► Autre

Diaporama Flickr - Plus de 20 images

2010-06-28T13:00:00.000-07:00

La limite des 20 images à contourner avec un Yahoo Pipe

Voir ici

Utiliser le Gadget Flickr à insérer dans un iframe. Couleur et taille sont paramétrables !

L'adresse du Flux (remplacer & par %26 en insérant le flux comme paramètre up_File)

http://pipes.yahoo.com/pipes/pipe.run?_id=ggi_H7jn2xGoWGzY6UjTQA%26_render=rss%26n
um=500%26set=72157609076361497

le code du iframe

Le résultat

Gadget Google - Diaporama Flickr

Essai pour le Blog de S_amo

Gadget Google - Diaporama Flickr http://www.liens-du-vin.ch/slide-show-media-rss.html

Les Polices supplémentaires de Google

2010-06-18T14:00:00.000-07:00

Texte écrit en Tangerine 48px

Test Facebook Profil

2010-06-18T13:36:00.001-07:00

Chappuis Philippe | Create Your Badge

Testing 1Bit Audio Player

2010-05-01T13:14:00.000-07:00

1Bit Audio Player

Original informations, 1Bit Audio Player Site

The script to add into the page

Script to call the player, defining the options

The Result

Carmina Burana

Bach Gloria Patri

We can use Google Sites to host the various files (js, swf and mp3).

More tips for Blogger : Le Blog de Prac

Reader from lala.com

2010-04-03T08:30:00.001-07:00

Testing reader form lala.com

Bad Romance - Lady GaGa

Forever - Drake, Kanye West, L...

Flash File from http://www.swishzone.com

2010-03-20T10:49:00.000-07:00

A Flash File from Swishzone

Flash File hosted by Google Sites: bounce.swf

Tips and Tricks on Google Sites

test audio player

2010-02-23T13:53:00.001-08:00

Slideshow from Gallery2RSS

2010-02-23T12:56:00.000-08:00

Display a slideshow from gallery2RSS - http://www.liens-du-vin.ch/slide-show-media-rss.html

How to add the code : Use an iframe to embed a Google Gadget

Using Feed from Google Alert

2010-01-26T12:49:00.000-08:00

Subscribe in Google Reader

Include the feed in a Folder.

Define the Folder as Public

Then use Setting / Folders and Tags

Select Add a Clip to Your Site

Test Microformats

2010-01-24T14:41:00.000-08:00

Festival International des Ballons

Festival International des Ballons, Châteaux d'Oex. Obrist SA est le fournisseur officiel des vins et champagne (Nicolas Feuillatte).

Quand : 23 au 31 janvier 2010

Où :

Association Semaine de Ballons - Château-d'Oex,
La Place,
1660 Château-d'Oex,
Suisse

Catégorie :
Exhibition

Test Orkut Share

2009-12-20T08:32:00.000-08:00

test recherche

2009-12-20T06:26:00.000-08:00

Test

Blogger Play sur son Blog

2009-12-18T13:18:00.000-08:00

Insérer Blogger Play sur son Blog

Avec un iframe, obtenu à partir du gadget play.xml, selon la méthode décrite sur le Blog d'Aide pour Blogger, un Gadget dans un message.

Afficher un
diaporama des photos mises à jour sur Blogger. Plus d'informations sur les diaporamas : http://www.liens-du-vin.ch/slide-show-media-rss.html

More informations : Slideshow using Media RSS Feed

Testing YouTube Playlist

2009-11-25T14:42:00.000-08:00

Dewplayer Playlist

2009-11-16T13:06:00.000-08:00

Un essais du nouveau Dewplayer Playlist d'Alsacréations.

Clip Alloclips

2009-09-21T13:23:00.000-07:00

Image flottante

2009-08-31T09:18:00.001-07:00

Cette image flotte à droite. Pour arriver à ce résultat, faire Parametres / Mise en page, puis Activer l'alignement flottant : OUI. Lors de l'insertion d'une image, choisir dans Choisissez une mise en page : Gauche ou Droite.
Saisir le texte sous l'image. Le texte viendra à gauche (si l'image flotte à droite) ou à droite (si l'image flotte à gauche).

Présentation PPS

2009-05-04T16:04:00.001-07:00

Présentation de Slideshare

Plus d'info

Lecteur Flash

Un gadget dans le corps du message

La geolocalisation des messages

2009-02-24T09:48:00.001-08:00

Une réalité

Plus d'informations sur le Blog d'Aide pour Blogger

Une image Map

2009-02-18T06:24:00.000-08:00

Un essais d'une image cliquable

Plus d'informations

La farandole des Vins du Valais.

Cave St-Pierre.

Message de test pour souscription par mail

2009-02-16T08:32:00.000-08:00

Nouveau message suite à l'insertion de la souscription par mail.

Les adresses des flux

Flux Feedburner

Flux Blogger

Plus d'informations

Google Reader - Un lecteur de flux

Une Video : Flux RSS - utilité et fonctionnement

Flux RSS et Blogger, quelques explications

Essais Liens vers ce message

2009-01-30T12:04:00.000-08:00

Pour aider Le Camp des Toisons :

Suite à un échange sur le Groupe d'aide pour Blogger, je fais un lien vers le message de Mohair et Soie :

Le Camp des Toisons: * * * * * * * LE CAMP DES TOISONS : ACTUALITES RECENTES * * * * * * *

Réalisé le samedi 30 janvier, 21h10 heure suisse.

A vérifier

Espaces insécables

2009-01-30T02:57:00.000-08:00

Méthode 1

Dans le html du message :

 

Methode 2

Au clavier : alt+0160 ce qui génère :  

Texte : les 2 points sont précédés et suivis d'un espace insécable, comme ce point d'exclamation !

Contenu dynamique

2009-01-20T07:53:00.000-08:00

Un iframe avec id="dynamic_frame" et name="dynamic_frame" :

Des liens avec target="dynamic_frame"

Using iframe as an alternative to Ajax and XMLHttpRequest. Fixed menus and dynamic content

Bolle - Bujard - Chasselas - Grapillon - Henri de Villamont - Lavaux - Maurice Gay
Mont d'Or - Obrist - Badouxthèque - Aigle - Salvagnin
Cave St-Georges - Cave St-Pierre - tendance9

Plus d'explications : Dynamic content and fixed menu

test image

2009-01-06T02:30:00.000-08:00

Une image avec le tag <img> entre <center> et </center>

La même image entre les balises <div> et </div>, pour centre j'utilise style="width: 120px margin:auto;"

Cette fois le boc div est large de 100% et je centre l'image avec text-align: center :

Avec l'insertion image :

Avec l'insertion image, mais en supprimant display:block du style de l'image :

Google Maps

2008-12-26T13:12:00.000-08:00

Une mise en oeuvre du Gadget créé pour Google Sites

Cave St-Pierre Chamoson - Valais

Une carte avec itinéraire

Insertion du iframe fournit par Google Maps

Google Maps - Intinéraire Aubonne Allaman

Agrandir une image au passage de la souris

2008-12-16T15:14:00.000-08:00

Dans le style (avant </head>). On admet que la classe concernée est c_h

.c_h img
{
border: 0 none;
}

a.c_h
{
text-decoration: none;
}

a.c_h:hover img
{
width: 200px;
}

a.c_h:hover
{
width: 200px;
}

Note : Un seule dimension pour conserver l'échelle des images

Le html

Résultat

Essais a 500px

Note bas de page (bis)

2008-11-28T11:58:00.000-08:00

"Des occupants je ne me suis soucié ,
Messieurs pimpants, dames panachées:
Faire de leur nez¹
Le marcheur au bord de la chaussée."

Faire de leur nez : belgicisme, se vanter

Slideshow from slide.com

2008-11-28T09:42:00.001-08:00

Essais de note bas de message

2008-11-26T08:40:00.001-08:00

Note bas de message

Le texte normal. Introduisons le renvois² par les tags <sup> et </sup>

Pour créer un lien, encapsulons les tags <sup> par une ancre :

<a href="URL#1" title="renvois"> ... </a>

URL : adresse du message courant

La suite du texte. Essayons une deuxième note³. C'est primitif mais cela fonctionne. On arrive sur les notes par des liens internes.

La fin du message

Du texte ............. ............... .........

Suite ................

La note elle-même : un span avec id=1, 2, 3 ...

Un peu lourd comme methode !!!

2.- Le renvois .........

3.- Note ..........

test gif

2008-11-23T09:40:00.000-08:00

image gif sur picasa

Gadget Google dans le corps du message

2008-11-10T09:26:00.000-08:00

Plus d'informations sur le gadget : Un diaporama a partir d'un Flux Media RSS. Affiche le titre du Flux Media ainsi que la légende des photos.

Afficher un diaporama avec les photos de Picasa Albums Web

Retrouver le code du iframe à insérer, sur le Blog d'Aide pour Blogger

Un autre exemple :

Yahoo News

Afficher un diaporama avec les photos de Yahoo News

Indentation de paragraphes

2008-10-26T09:01:00.001-07:00

Un premier paragraphe, sans changement par rapport au defaut. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Un paragraphe avec indentation positive de 30 pixels. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Un paragraphe avec indentation négative de 30 pixels. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

En savoir plus : Indentation

Paragraphe entre <blockquote> et </blockquote>

(retrait de l ensemble du paragraphe)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Une playlist de www.myplaylist.org

2008-10-18T06:13:00.000-07:00

Incorporer une Playlist dans un message

Modifier le code HTML

Attention : src=" " et href= " " (guillemets) et fermer le tag embed !!

Autres trucs et astuces pour Blogger : Le Blog d'Aide pour Blogger

message test

2008-10-06T05:54:00.000-07:00

Test lien dans commentaire

Video dailymotion

2008-10-05T13:26:00.000-07:00

Bella Ciao - Modena City Ramblers
envoyé par williamoff

Une carte dans le message

2008-07-28T13:14:00.000-07:00

La carte du Lavaux.

Option Earth disponible.

Carte du Lavaux

Sous IE6 les contrôles disparaissent lors de l'utilisation de l'option Earth.

Des cadres pour vos photos de vacances

2008-07-25T11:41:00.000-07:00

A consulter sur le Blog d'Aide pour Blogger

Des cadres pour ses photos de vacances

Essais photos

2008-06-30T01:57:00.001-07:00

Insertion photos resto-mer

choix inserer image : petit

image s200 et le lien s1600-h. Remplacer le lien par s400-h par exemple :

Affichage de l image s400 et lien s800-h, target="_blank" :

Modification taille