blog d'aide pour blogger

Des cadres pour ses photos de vacances

2008-07-26T22:19:00.012+02:00

Un cadre semi-transparent

En jouant sur l'opacité et la transparence, d'un bloc div, nous allons créer un cadre semi-transparent.

Un bloc extérieur va recevoir la photo comme image de fond et le bloc intérieur, sans contenu, servira à définir la bordure.

Important

La saisie des 2 blocs doit se faire sans retour à la ligne.
La dimension de l'image est de 320 par 210, pour une bordure de 10.
Le bloc interne fait donc 320 - 2 * 10 = 300 par 210 - 2 * 10 = 190.

Chardonne - Mont-Pélerin : La carte

Un cadre doré

Un seul bloc div contenant l'image. Le cadre est réalisé par la propriété bordure. La couleur dorée, gold correspond au code couleur #ffd700.

Important

La saisie du bloc doit se faire sans retour à la ligne.
La dimension de l'image est de 320 par 210, pour une bordure de 6.
Le bloc fait donc 320 + 2 * 6 = 332 par 210 + 2 * 6 = 222.
Pour certain template de Blogger, ajouter margin-bottom: 0; dans le style de l'image (*).

Chardonne - Mont-Pélerin : La carte

Un cadre façon Polaroid

Un bloc div externe contenant la photo et un bloc div pour le bas, simulant la bande papier du polaroid.

<div style="width: 320px; margin: auto; padding: 15px;
background-color: #eeeecc; border: 1px solid black;
text-align: center; font-size: 0.75em;"><a href="URL lien sur l'image" title="titre du lien dur l'image" target="_blank"
style="border: 0 none; text-decoration: none; background-">
<img style="width: 320px; height: 210px; border: 1px solid black;"
src="URL image" title="titre image" alt="texte alternatif image" /></a><div style="margin: 10px auto 10px auto; ">
<a href="URL titre" target="_blank" title="titre"
style="border: 0 none ; text-decoration: none;">Titre</a></div></div>

Important

La saisie des 2 blocs doit se faire sans retour à la ligne.
La dimension de l'image est de 320 par 210, pour une bordure de 15. Pour certain template de Blogger, ajouter padding: 0; dans le style de l'image (*).

Chardonne - Mont-Pélerin - La carte

Un cadre double

Un seul bloc div contenant la photo.
C'est la bordure du bloc qui fait office de cadre.

<div style="border: medium double #558866; padding: 6px; background: #eeeecc;
width: 320px; margin: auto; text-align: center; font-size:11px; font-weight: bold; color: #a90707;">Titre de l'image<br/><br/><a href="URL lien sur l'image" title="titre du lien sur l'image" style="border: 0 none; text-decoration: none;" target="_blank"><img src="URL image" style="border: 1px solid #000; width: 320px; height: 210px; margin: 3px 0;" title="titre image" alt="texte alternatif image" /></a><br/><br/><a href="URL lien" title="titre du lien" target="_blank" style="border: 0 none ; text-decoration: none;">Lien</a></div>

Important

La saisie du bloc doit se faire sans retour à la ligne.
La dimension de l'image est de 320 par 210, pour une bordure latérale de 6. Pour certain template de Blogger, ajouter padding: 0; dans le style de l'image (*).

Château de Chardonne

Chardonne - Mont-Pélerin - La carte

(*) : Les corrections spécifiques, selon le template de Blogger utilisé

Il s'agit de corriger le style du message qui spécifie le style par défaut d'une image, par exemple pour ce blog :

.post img
{
margin-top:0;
margin-right:0;
margin-bottom:5px;
margin-left:0;
padding:4px;
border:1px solid #bbbbbb;
}

Afficher ses photos sur Blogger

Le gadget (widget) Diaporama de Blogger et les Flux Media RSS

Une ligthbox (slimbox) pour afficher ses images

Crédit

L'article original, le blog Mandarin Design

Photos, Regis Colombo et Clos Domaines et Châteaux

Un filtre de couleur pour ses photos noir blanc

2008-06-23T21:16:00.014+02:00

En complément de l'article Opacité et transparence - Appliquer un filtre, une petite astuce pour appliquer un filtre de couleur à ses photos noir blanc.

Rappelons que le taux d'opacité varie de 0 à 100 sous Internet Explorer et de 0.0 à 1.0 sous Firefox. Une opacité de 80% filtre 20% de lumière.

1. L'image de base

Utilisons l'image de base comme fond d'un bloc div :

240px et 207px étant les dimensions de l'image originale. On obtient :

2. L'application du filtre

Sous Internet Explorer, il faut appliquer un filtre alpha, et utiliser l'instruction opacity sous Firefox

3. La source de couleur

Créons la source de couleur avec un bloc div de la taille de la photo, de couleur rouge orangé (orangered - #ff4500)

Ce bloc source va servir de conteneur à l'image de base, ce qui donne comme code :

Et le résultat, la photo en sépia :

Le travail de l'Homme

La même photo, en utilisant le vert (#007700) comme source de couleur :

Le travail de l'Homme

Crédit photos : Régis Colombo et Clos Domaines et Châteaux.

Une vignette au survol du lien

2008-05-03T21:13:00.005+02:00

Pour afficher une vignette (thumbnail / screenshot / aperçu miniature) du site au survol de la souris sur un lien, j'utilise websnapr.

Obtenir les fichiers

Télécharger le fichier previewbubble.zip .

La clé d'accès

S'identifier sur websnapr, pour obtenir une clé d'accès.

L'image de fond

Enregister l'image de fond, bg.png chez un hébergeur, par example Google Page Creator

Modifier le javascript

Ouvir le fichier previewbubble.js avec notepad et effectuer les 3 modifications suivantes :

1 - Introduire la clé d'accès

var developerKey = 'nnnnnnnn';

2 - Définir le chemin d'accès de l'image de fond

var bubbleImagePath = 'URL/bg.png';

3 - Fixer le nom de classe qui déclenchera l'affichage de la vignette

lbActions=WSR_getElementsByClassName(document,"a","nom_de_classe");

Introduire le script dans le blog

Paramètres / Modifier le code HTML

Placer le script previewbubble.js entre </b:skin> et </head>

On peut aussi enregister le script chez un hébergeur, et placer le script suivant :

Mise en oeuvre - code html

Il suffit d'ajouter le nom de la classe définie plus haut, dans l'attribut class du lien

Des exemples

L'aperçu du Blog d'Aide pour Blogger

En savoir plus sur les vignettes : Vignettes et DMOZ

Afficher une partie du message

2008-03-13T16:52:00.006+01:00

Comment présenter son Blog en n'affichant qu'une partie du message

Quelques Blogs affichent le début du message suivi de l'indication Lire la suite... (Read more...) sous la forme d'un lien. En cliquant sur le lien, le message complet s'affiche.

Ce que voit le lecteur

Le début du message ...
Lire la suite...

Ce que l'auteur du blog doit saisir

Il faut utiliser Modifier le code HTML pour enregistrer les 2 tags <span>

Le début du message ...<span class="fullpost">
la fin du message</span>

Le tag <span class="fullpost"> joue le rôle d'un marqueur qui délimite la première partie du message, celle qui va figurer sur la page du Blog. Le nom de classe CSS fullpost (message complet) peut être choisi librement, mais j'ai choisi de conserver ce nom proposé par Blogger.

Definir le style du lien Lire la suite...

En utilisant les pseudo-classes du CSS il est possible de créer un style spécifique pour le lien qui encapsule le texte Lire la suite...

Les styles doivent figurer entre les balises <head> et </head> du blog (Mise en page / Modifier le code HTML). Nous pouvons définir la classe fullpost ainsi que les styles associées au lien Lire la suite... en utilisant la classe cl_suite. Les pseudos-classes doivent être saisies dans l'ordre link, visited, hover et active (en anglais, mnémotechniquement LoVe-HAte). Un exemple ci-dessous (les pseudo-classes peuvent être modifiées) :

.cl_suite a:hover
{color: #00ff00; background; #ffff00;}

.cl_suite a:active
{color: #ff0000;}

.cl_suite a:focus

{color: #ff0000;}

</style>

Modifier la structure du Blog

Il ne reste plus qu'à modifier la structure du Blog (Mise en page / Modifier le code HTML / cocher développer le modèle de widget). Rechercher le code :

et insérer après <data:post.body/> et avant </p> :

<b:if cond='data:blog.pageType != "item"'>
<span class='cl_suite'><a expr:href='data:post.url' target='_blank'>
Lire la suite...</a></span>
</b:if>

Enlever target='_blank' pour afficher le message complet dans la même fenêtre.

Limitation

Attention si votre blog comporte beaucoup de messages, lors de l'introduction de cette modification, tous les messages comporteront Lire la suite... en fin de chaque message.

Exemple

Mon blog de test : chappuis.blogspot.com

Un Diaporama pour Blogger

2008-02-23T00:45:00.046+01:00

Ajouter un Diaporama (Slideshow) à son Blog

Il est possible depuis novembre 2007 d'ajouter un Diaporama comme élément de page. Ce nouveau widget est compatible avec les hébergeurs qui fournissent un flux media RSS.

Le Flux Media RSS

La source du Diaporama doit être un flux RSS au format media RSS. Les principaux hébergeurs de photos sur Internet proposent maintenant ce format. C'est simplement un fichier texte en format xml/rss, contenant le descriptif des medias à diffuser (son, image ou vidéo).

Titre

Le titre du Diaporama. Limiter le nombre de caractères si le diaporama doit être dans une colonne.

Source - Picasa Albums Web

Picasa, l'hébergeur d'images de Google, offre 2 options, soit l'affichage des images avec une sélection par mot clé, soit l'affichage d'un album précis. Dans ce cas il faut saisir le nom de l'utilisateur Picasa, suivi du nom de l'album.
Important : L'option mot clé doit être utilisée avec précaution car elle affiche toutes les images publiques ayant ce mot clé (tag / étiquette). Pensons aussi aux éventuels problèmes liés au droit d'auteur.

Source - Flickr

Flickr offre aussi 2 options, sélection des images par mot clé et par client. Mot clé fonctionne comme pour Picasa, l'otion client quant à elle demande le nom d'utilisateur Flickr. Celui-ci figure dans la barre d'adresse de Flickr, après avoir ouvert votre compte et cliqué sur Your Photos. Dans mon cas, l'adresse est :

http://www.flickr.com/photos/prac53/

Et le client à saisir : prac53

Source - Photobucket

Cet hébergeur n'offre qu'une seule possibilité, par mot clé. Ce sont les tags placés sur les images. Ne jamais perdre de vue qu'avec cette option l'ensemble des photos de Photobucket, avec un mot clé donné, sera affiché.

Source - Autre

Cette dernière option est certainement la plus utile. La sélection par mot clé ne permettant pas d'afficher uniquement ses propres images, l'option autre va nous permettre d'indiquer le flux media RSS de l'album à afficher.
Pour Photobucket, par exemple, se rendre dans afficher un album, puis copier le raccourci du bouton Album Feed. On obtient alors une URL comme celle-ci :

http://s266.photobucket.com/albums/ii244/prac53/feed.rss

Il suffit de recopier cette adresse dans la zone Flux.

Modifier la taille du Diaporama

Créer le Diaporama, puis se rendre dans le panneau de contrôle de Blogger. Cliquer sur Paramètres puis Mise en page et Modifier le code HTML. Choisir Développer des modèles de Gadget.
Rechercher le bloc div suivant :

Ajouter les dimensions désirées, par exemple 350 x 260 :

Exemple

Un diaporama réalisé à partir de mon album sur Photobucket, Les Clos Domaines et Châteaux, sur le blog tendance9.

Utiliser directement le flux media RSS

Google, grâce à Google AJAX Feed API permet de configurer soi-même un diaporama, et d'y incorporer ses propres effets de transition et ses propres contrôles.

Incorporer la bibliothèque de code AJAX

Il suffit de 2 scripts :

Appel du Diaporama

Il est réalisé par le script suivant, qui définit la fonction de callback. Le détail des valeurs est donné dans le manuel de référence. La variable flux contient le nom du flux media RSS à traiter.

Positionner le Diaporama

Le code html suivant appelle le Diaporama :

<div id="travail_vigne" class="gss">En cours de chargement...</div>

Le style du Diaporama

Le style pour la classe gss :

.gss a img
{
border : none;
}

.gss
{
width: 229px;
height: 206px;
color: #dddddd;
background-color: #558868;
border: 1px solid red;
padding: 4px;
}

Pour ne pas alourdir ce blog avec ce style, je charge la feuille de style uniquement pour ce message, avec l'astuce décrite ici : Un style pour un seul message. La feuille de style peut être téléchargée ici.

Le résultat

Un Diaporama Le Travail de la Vigne - La Valeur de l'Homme (crédit photos : Regis Colombo pour l'Association Clos Domaines et Châteaux) :

En cours de chargement...

Le cas particulier de Yahoo

Yahoo, bien qu'à l'origine des spécifications du format media RSS fournit un flux d'actualité de photos qui n'est pas compatible avec ses propres recommandations.
Il faut corriger l'adresse du flux avec cette fonction :

function myUrlResolver(entry) {
var content = entry.content;
var start = content.indexOf("src=")+5;
var stop = content.indexOf(".jpg?",start)+4;
var thumburl = content.substring(start,stop);
return(thumburl); }

Ce qui donne la fonction callback suivante :

function load_yahoo() {
var flux = "http://rss.news.yahoo.com/imgrss/832";
var options = {
fullControlPanel: true,
fullControlPanelSmallIcons: true,
thumbnailSize: GFslideShow.THUMBNAILS_SMALL,
pauseOnHover: true,
displayTime: 2000,
transistionTime: 500,
linkTarget: google.feeds.LINK_TARGET_BLANK,
thumbnailUrlResolver : myUrlResolver
}

Et voici le résultat, avec le flux media RSS des photos des actualités science (disponible seulement sur yahoo.com en anglais) : :

En cours de chargement...

Rappel : Insertion de scripts sur Blogger

Les scripts mentionnés ici peuvent être insérés entre les balises <head> et </head> (Paramètres/Mise en page/Modifier le code HTML).
Dans ce cas ils seront actifs pour tous les messages du blog. Pour ne les activer que pour un seul message, il est possible de les saisir au début du texte. Attention cependant, dans ce cas, saisir le script sans retour à la ligne entre les balises <script> et </script>.

En savoir plus

Video : Utilité et fonctionnement des flux RSS

Utiliser un flux media RSS avec Google Page Creator

des problèmes de gestion des blogs avec Blogger et Google

2008-02-21T13:57:00.006+01:00

Sur le groupe d'aide Blogger, nous constatons une recrudescence soudaine des demandes de ré-installation de blogs "disparus". Je dois rappeler en préambule que, tant sur ce blog que sur le groupe d'aide, aucun représentant de Blogger n'est présent - en tous cas en tant que tel car il y en a peut-être pour s'inspirer de nos réponses pour améliorer leur service... - et que, par conséquent, il est inutile de les interpeler directement par ces canaux d'information.

Je vais essayer de synthétiser des remarques et réponses concernant certains points qui reviennent régulièrement ces derniers temps sur le groupe d'aide, ce blog ou bien directement sur mon mail. Je tiens à remercier les différents contributeurs et, en particulier, prac pour leur sérieux et leur disponibilité pour tenter de répondre à toutes vos demandes. L'informatique est une science exacte et tout le monde n'a pas la tournure d'esprit pour cela.

Les blogs marqués comme spam par erreur

Il suffit de suivre l'adresse indiquée lorsque l'on se connecte et Google libère le blog dans un délai de 1 à 7 jours.

Les problèmes temporaires d'accès à vos blogs

Il ne faut pas oublier de toujours consulter la page des statuts de Blogger (en anglais). Elle indique les pays et horaires de maintenance : http://status.blogger.com/

On peut aussi se reporter, en cas de problèmes, à la liste des erreurs connues ici : http://knownissues.blogspot.com/

Les blogs "disparus"

1/ Si l'on est co-auteur d'un blog, vérifier avec l'administrateur du blog que l'on figure toujours dans la liste des auteurs autorisés.
2/ Pour les autres cas, Google a prévu une procédure : http://help.blogger.com/?page=troubleshooter.cs&problem=&contact_type=blogdisappeared&Submit=Submit

Dans les cas de disparition définitive

Les conditions générales de Google signalent, et cela semble normal étant donné la gratuité du service, que ledit service est offert sans garantie. Google se réserve le droit de le supprimer n'importe quand et sans préavis !!!

Conclusion (provisoire?)

Toutes ces difficultés pourraient être relayées auprès de l'équipe technique de Blogger afin qu'ils soient au moins au courant. C'est pourquoi, je me propose de rechercher les moyens les plus rapides et les plus efficaces pour les joindre. Et je vous tiens au courant.

Une lightbox pour afficher ses images

2008-01-31T22:45:00.010+01:00

lightbox.js est un script de Lokesh Dhakar permettant d'afficher une image dans la page courante, avec un effet de transparence.

Un exemple, à partir d'une vignette ou d'un lien, affichons l'image agrandie à l'intérieur de la page courante :

Château de Vufflens - La noblesse des vins suisses

Les éléments à télécharger

Utiliser un hébergeur comme Google Page Creator, pour enregistrer à partir du site original :

Le script : lightbox.js

La feuille de style : lightbox.css

Une animation chargement en cours : loading.gif

L'icône fermer la fenêtre : close.gif

L'image utilisée pour l'effet de transparence (opacité 80 %) : overlay.png

Les modifications à apporter

Complèter l'adresse de 2 images dans le script (*URL* est à remplacer par le chemin de votre hébergement) :

var loadingImage = '*URL*/loading.gif';

var closeButton = '*URL*/close.gif';

De même, donner l'adresse de l'image de fond, dans la feuille de style (l'image blank.gif n'existe pas, c'est un leurre pour assurer le traitement correct de la transparence des fichiers PNG sous IE) :

#overlay {
background-image: url(*URL*/overlay.png) }

* HTML #overlay {
background-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src="*URL*/overlay.png", sizingMethod="scale");}

Pour configurer le conteneur de l'image, il faut modifier l'id lightbox :

#lightbox /*style du conteneur */
{
border-right: #666 2px solid; /* la bordure du conteneur */
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
border-bottom: #666 2px solid;
background-color: #eee; /* la couleur du conteneur */
}

L'utilisation avec Blogger

Pour utiliser lightbox dans un seul post, ajouter au début du post l'appel au script :

Placer ce script entre les balise <head> et </head> si lightbox doit être utilisé dans plusieurs posts.

De même, entre les balises <head> et </head>, faire l'appel à la feuille de style destinée à configurer l'affichage de l'image :

L'appel d'une image avec l'effet lightbox se fait simplement en ajoutant rel="lightbox" dans l'ancre :

<a href="URL de l'image à afficher" title="titre image" rel="lightbox">le lien pour l'image à afficher ou un tag <img> avec une vignette</a>

Le cas particulier des grandes images

Si l'ancre contient l'adresse d'une grande image (cas fréquent sur Blogger), l'adresse est du type :

L'insertion de rel="lightbox" ne fonctionnera pas ! Le répertoire s1600-h contient en effet des pages html avec l'image à afficher, et non pas une image en tant que telle. Il faut remplacer le nom du répertoire à utiliser :

Un exemple

lightbox 2 : Afficher un ensemble d'images

La version 2, du même auteur, utilise le Framework Prototype et la bibliothèque Scriptaculous. Si elle autorise des effets graphiques plus performants, elle impose néanmoins de charger sur les pages qui utilisent lightbox2, plus de 50K de code. Les images sont appelées en utilisant la technologie AJAX.
Le principal avantage de cette version réside dans la possibilité d'afficher un ensemble d'images.

Sauvez la DPI a réalisé une version française (des images gif avec les textes en français). Un grand merci donc, de mettre à notre disposition un fichier *.zip complet.

Plus d'informations

Une explication plus complète, pour Google Page Creator (version 1). Un ensemble d'images affiché avec la version 2.

Un clone de lightbox, slimbox

La série complète des photos (la noblesse des vins suisses) présentée avec un slideshow

Les article originaux : la version 1 de lightbox.js et la version 2. Slimbox, un clone de lightbox.

Sauvegarde intégrale du blog Blogger

2008-01-18T08:56:00.000+01:00

Blogger ne dispose pas d'une fonction d'exportation ou de téléchargement pour sauvegarder vos blogs. Toutefois, vous pouvez utiliser les instructions suivantes afin de créer un seul fichier contenant tous les messages que vous avez publiés et le copier ensuite sur votre propre ordinateur pour l'utiliser comme vous le souhaitez. Note: Si vous avez l'intention de continuer à utiliser votre blog, enregistrez une copie de votre modèle actuel dans un fichier sur votre ordinateur.

1. Connectez-vous à votre compte Blogger, puis 'modèle'>'modifier le code html'.

2. Faites une copie de votre modèle actuel ('sauvegarder/restaurer un modèle'>'Télécharger le modèle dans son intégralité').
Vous allez remplacer votre modèle Blogger par le modèle de page unique à l'étape 3, mais vous ne voulez probablement pas perdre votre modèle d'origine.

3. Remplacez votre modèle Blogger par le texte suivant (vous devrez remplacer les ' au début et à la fin des lignes suivantes lorsque vous les collez dans votre modèle Blogger):

'Blogger>
AUTHOR: <$BlogItemAuthor$>
DATE: <$BlogItemDateTime$>
-----
BODY:
<$BlogItemBody$>
--------
'/Blogger>

4. Cliquez sur 'Paramètres'> 'Publication' et modifiez le nom de fichier de votre blog dans "adresse BlogSpot", ce qui vous empêchera d'écraser votre fichier actuel d'index principal.
Notez le nom de fichier actuel de votre blog afin que vous puissiez restaurer une fois la procédure finie. [Note: Cela s'applique uniquement aux utilisateurs qui publient par FTP. Les utilisateurs de BlogSpot devront écraser leur page de blog existante, mais elle sera remplacée dès que le blog sera republié avec le modèle initial.]

5. Dans l'onglet 'Paramètres'> 'mise en forme', configurez votre blog afin d'afficher tous vos messages sur la page d'index principale. Il n'existe pas d'option spécifique pour cela : au lieu de cela, vous devez modifier le nombre de jours affichés sur votre page d'accueil (Voir N jours de messages sur la page principale, avec la limite de 500 messages) qui devra être supérieur ou égal au nombre de jours pendant lesquels vous avez posté depuis le début.

6. Dans le même onglet 'Paramètres'>'Mise en forme', donnez aux formats "Date/heure" les valeurs : JJ / MM / AAAA HH: MM: SS AM | PM. (Remarque: le format par défaut n'est pas comme ça dans le menu. Notez le paramètre actuel afin de pouvoir le restaurer après avoir fini.

7. Toujours dans 'Paramètres' > 'Mise en forme', configurez les sauts de ligne à la valeur "non".

8. Dans l'onglet 'Paramètres' > 'Archivage', configurez "fréquence d'archivage " à " aucune archive". Cela évitera que vos archives actuelles soit écrasées par le nouveau modèle.

9. Republiez votre blog, vous vous retrouverez avec un seul fichier contenant tous vos messages, présenté à l'aide du modèle ci-dessus, à l'emplacement spécifié dans vos paramètres (à l'étape 4, ci-dessus : nom de fichier BlogSpot). Ouvrez ce fichier dans votre navigateur Web et enregistrez le fichier sur votre disque dur local.

10. Restaurez les paramètres précédents (nom de fichier du blog, fréquence d'archivage, horodatage, etc) dans votre blog et remplacez le modèle temporaire, que vous venez de créer, avec votre copie enregistrée. Publiez le blog et la page pour vérifier que tout est correct.

Pour inclure les commentaires dans cette sauvegarde, il convient d'ajouter le code suivant à votre modèle, juste au-dessus du tag (vous devrez remplacer les ' au début et à la fin des lignes suivantes lorsque vous les collez dans votre modèle Blogger):

'BlogItemCommentsEnabled>
'BlogItemComments>
COMMENT-AUTHOR:<$BlogCommentAuthor$>
COMMENT-DATE:<$BlogCommentDateTime$>
COMMENT-BODY:<$BlogCommentBody$>
--------
'/BlogItemComments>
'/BlogItemCommentsEnabled>

J'ai rédigé cet article en traduisant l'aide blogger qui se trouve ici et j'ai l'impression que cette dernière manipulation n'est pas très recommandée, je ne comprends pas très bien pourquoi. Si quelqu'un pouvait préciser ce point - ainsi que corriger les erreurs éventuelles probables de traduction - ce serait bien.

Opacité et transparence - Appliquer un filtre

2007-12-18T23:11:00.000+01:00

Opacité et transparence

Firefox et Internet Explorer (5.5 et au-delà) disposent d'un filtre qui peut s'appliquer sur une image ou un bloc de texte.

La théorie

L'opacité (opacity) est définie comme le complément à 100 du taux de transparence (!) du filtre. Ainsi une opacité de 95% ne filtre que 5% de couleur, alors qu'une opacité de 5% retient 95% des couleurs.
Sous Firefox, le paramètre opacity varie de 0 à 1, alors que sous Internet Explorer, on utilise un filtre alpha (opacity) variant de 0 à 100.

L'utilisation

L'opacité peut être utilisée pour un bloc div, un paragraphe, des titres, une table complète ou des cellules. Elle s'utilise aussi avec une image. Pour le cas d'une image, Internet Explorer impose de définir au moins l'une des dimensions (width ou height).

Utilisation dans un bloc div

Le bloc div sans filtre

Le bloc div opaque à 90 % - filtre de 10 %

Le bloc div opaque à 70 % - filtre de 30 %

Le bloc div opaque à 50 % - filtre de 50 %

Le bloc div opaque à 30 % - filtre de 70 %

Le bloc div opaque à 10 % - filtre de 90 %

Le style du bloc div

// le bloc div opaque à 70 se définit comme suit, la clause opacity pour FF et le filtre pour IE
.opaque70 {
opacity: .7;
color: white;
filter: alpha(opacity=70);
}

Un filtre sur une image

L'image initiale est affichée avec une opacité de 20 %, le filtre est supprimé en passant le curseur de la souris sur l'image.

Les Liens du Vin

Le code

// la fonction agit comme un flip-flop et passe d'une opacite de 20 % à 100 % (pas de filtre)
// document.all permet de tester le type de navigateur
//
function changevisibility(lowvis,highvis)
{
force=(highvis==0)? 1 : 0.2
if (document.all)
lowvis.filters.alpha.opacity=force*100
else
lowvis.style.opacity=force
}

Un filtre sur une image qui change continuellement

Pour Noël, une image dont l'opacité varie par incrément de 5 %

Les images des Liens du Vin

Le code

// setInterval permet l'appel toutes les 250 millisecondes de la fonction
// l increment d opacite est de 5 %
// document.all permet de tester le type de navigateur
//
op=0;
var op_plus = 1;
var op_moins = 0;
//
function f_opacity()
{
if (op < op_plus="0" op_moins="1"> 0.05 && op_moins)
op-=0.05
else
{
op_plus=1
op_moins=0
}
if (document.all)
document.getElementById("testop_change").style.filter="alpha(opacity=" + 100 * op +")";
else
document.getElementById("testop_change").style.opacity=op;
}
setInterval("f_opacity()",250);

Le fichier style et le javascript sont enregistrés sur Google Page

Le fichier Javascript, opacity.js

La feuille de style, style-blogger-testopaque.css

Créer un effet de transition entre images

Un exemple sur Google Page, cliquer sur la vignette pour voir l'effet de transition

Mes meilleurs voeux à tous les amoureux de Blogger

Ameliorer la visibilite de son Blog

2007-11-13T21:03:00.004+01:00

Mieux référencer son Blog

Si la visibilité d'un Blog sur les moteurs de recherche dépend surtout du contenu des billets, le blogueur débutant oublie souvent quelques points de détail qui permettent d'améliorer le positionnement de son Blog dans les résultats de recherche pour une requête. Rappelons qu'en moyenne 80% des internautes cliquent sur les 3 premieres réponses dans les résultats de recherche.

Les paramètres du Blog

Sous Standard, Ajouter le blog à nos listes (Add your Blog to our listings) : Oui

Permettre aux moteurs de recherche de trouver votre Blog (Let search engines find your blog) : Oui

Le Blog va figurer sous Blog Search et des Pings seront envoyés

Ping : envoyer un signal vers d'autres sites ou blogs dès qu'on publie un nouveau billet

Sous Flux d'actualisation, définir tous les flux sous complet

Flux : le fichier XML contenant les billets publiés sur le blog, voir un billet précédent

Modèle, Modifier le code HTML, Dans la section <head> :

Créer un tag <meta> title : Définir en 80 mots au plus, le titre du Blog

Créer un tag <meta> description : Une courte description (200 caractères maximum) du Blog

Créer un tag <meta> keywords : De 15 à 20 mots clés ou expressions, séparés par une virgule

Inscrire son blog

Dans l'index Google

Sur Site Explorer de Yahoo

Créer un sitemap

Sitemap : un fichier en format xml, qui liste l'ensemble des billets du Blog

Pour Google, rendez-vous sur les outils pour webmasters et inscrivez l'adresse du Blog.

Comme sitemap, indiquez (en remplaçant aide-blogger-fr par le nom du blog) :

http://aide-blogger-fr.blogspot.com/atom.xml

Plus d'informations ici

Pour prouver à Google que l'on est propriétaire du Blog, il faut placer une balise <meta> dans le Blog. Ajouter, dans la section <head> :

Pour Site Explorer de Yahoo, le principe est le même.

Choisir le titre de ses billets

Ne jamais utiliser des caractères accentués, Blogger crée une adresse URL à partir du titre.

Par exemple, Partager ses lieux géographiques favoris deviendra, malheureusement, partager-ses-lieux-gographiques-favoris , et le mot clé gographique n'amènera que peu de visiteurs !

Inscrire son Blog sur FeedBurner

FeedBurner propose un traducteur de Flux, et permet la création d'un bandeau de promotion pour son flux :

Publier ses Billets

Les Digg-like les plus courants :

Blogasty

Blog Memes

Bluegger

Digg

Fuzz

NUOUZ

Pioche

Romanding

Scoopeo

Paperblog

Les conseils de Google

Optimisez aussi votre site pour le moteur de recherche Google. Un article du Blog Inside AdSense, en français.

Optimisez vos contenus - Guide pour des éditeurs de sites web, une brochure de Google en anglais ou en français, en format *.pdf (180 K).

Référencer son Blog

Référencer son blog sur ToutLeMondeEnBlogue, selon ce billet

Autres trucs et astuces :

L'atelier de Mousie
Le Blog des Liens du Vin
Utiliser Google page Creator
Gpooo

Libellés "en nuage"...

2007-11-01T14:06:00.000+01:00

-Les libellés sont extrèmement utiles sur les blogs, mais la présentation proposée par Blogger n'est pas très esthétique...Alors lorsque j'ai découvert les "Libellés en nuage", j'ai craqué et je suis en train de les installer sur mes blogs...Pour voir un exemple voyez ce blog ou cet autre.

.............................................................
Réalisation:

-Elle est très bien expliquée en français dans ce blog: Narrow street, précisément à cette page ...
C'est assez simple, il suffit d'avoir de la patience, de bien ouvrir la page html en développant les gadgets.

-Lorsque vous aurez réalisé votre "nuage" vous pourrez personnaliser la taille des libellés et les couleurs...
Les petites lettres ont la taille 10 et les plus grandes 20. J'ai augmenté la taille des petites et mis 11.

-Quant aux couleurs, vous les trouverez à cette adresse:
RGB Color codes
Utilisez les codes RGB (uniquement composés de chiffres) pour les "nuages", séparez chaque groupe de trois chiffres par une virgule.

-Exemple : modèle de base:
var maxFontSize = 20;
taille de police la plus grande
var maxColor = [0,0,255];
couleur de la police la plus grande
var minFontSize = 10;
taille de la police la plus petite
var minColor = [0,0,0];
couleur de la police la plus petite
modifié comme suit:

var maxFontSize = 20; taille de police la plus grande
var maxColor = [255,222,173];couleur de la police la plus grande
var minFontSize = 11; taille de la police la plus petite
var minColor = [255,255,240]; couleur de la police la plus petite

.....................................................
Les codes de couleurs pourront aussi vous servir pour les polices, fonds, bordures...de votre blog. Dans ce cas utilisez les codes comprenant des chiffres et des lettres, code Hexadecimal.
.....................................................
Récapitulatif : adresses utiles pour ce travail:
Hélène Marcy
Narrow street
RGB Color codes

Commentaires...couleurs...

2007-10-24T18:11:00.000+02:00

Réponse à Sophie
..........................................
Il semble que tu n'as pas vu mes messages ...ce qui me fait penser que les nouveaux n'ont pas forcément vu qu'ils pouvaient être prévenus par mail à chaque fois que quelqu'un dépose un message sur leur blog...
Alors tu vas dans "paramètres", "commentaires"...
Au bas de la page tu vois une case : "adresse de notification des commentaires"...
Tu mets ton email et tu enregistres les changements...
et tu reçois chaque commentaire dans ta boite à lettres... c'est très pratique...
.......................................
Deuxième question: pour changer la couleur du fond d'un blog modèle "rounder" comme celui-ci, aller dans la page html et remplacer
body {
background:#aba
par
body {
background:#000000
Ok?
........................................
quand vous ne connaisssez pas le code d'une couleur, par exemple 000000 pour le noir, allez dans personnaliser, modèle, polices et couleurs
en cliquant sur une couleur le code s'affiche...celà vous permet des modifications plus faciles si vous avez une idée précise des couleurs désirées...

Bannière...image...en-tête...ultra simple...

2007-10-17T18:34:00.000+02:00

En raison des modifications de Blogger, il est maintenant très facile de mettre une bannière sur son blog. Allez sur "Modèle", "Eléments", "Modifier En-tête"...

Choisissez une image ou une photo sur votre ordinateur par "Parcourir" ou "sur le web"...

Mais attention à la taille de votre image, celle-ci ne doit pas bien sûr être trop grande...celle de mon blog atelier est de 709/431 et fait 183 ko
voir ici: L'atelier
et celle de la page d'accueil de mes blogs anglais
voir ici: Plumpiemousie
fait 659/163 et 45, 8 ko...
ensuite enregistrez le tout...

L'image que vous placez en bannière se cale sur le côté gauche de la case réservée à cet effet...si elle est trop grande elle déborde sur la droite et n'est plus centrée pour un blog à deux colonnes...Voir ici...
Par contre on peut jouer sur la hauteur de l'image ...

images de fond ...suite...

2007-10-15T18:52:00.001+02:00

Résumé des épisodes précédents et nouvelle page plus précise...
Pour installer ces images, j'ai utilisé le service , en langue anglaise , du guide betabloggersfordummies...
Ceci est une traduction...
...................................................................
le paragraphe à insérer est le suivant:
body {
background:$bgcolor;
background-image:url(WEB URL OF YOUR PICTURE);
background-repeat:no-repeat;
background-position:120% 10%;
background-attachment: scroll;
margin:0; color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
...............................................................
Le nombre 120% contrôle le placement horizontal de l'image et le nombre 10% le placement vertical. Un pourcentage négatif poussera l'image vers le haut ou vers la droite. Pour certaines de mes images je suis desendue à 0,9% et 0,2%...Il faut avoir un peu de patience et jouer avec ces deux nombres.
............................................................

En fonction de l'image choisie pour le fond, vous pouvez désirer que le texte défile sur un fond fixe ou que l'ensemble défile.
Exemple de ensemble "fond + texte" mobile
Exemple de fond fixe et texte mobile
..................................................
Dans le paragraphe créé précédemment vous avez la phrase suivante:
background-attachment: scroll;
elle correspond au fond+texte mobile
Pour un texte mobile sur un fond fixe , remplacez scroll par fixed , comme ceci:
background-attachment: fixed;
.......................................................
et n'oubliez pas d'enregistrer vos changements...