Trêve des confiseurs

Des billets programmés se publieront à compter de cette semaine. Ne vous étonnez pas si je ne vous rends pas visite.

Je prends le temps de préparer les fêtes et de régénérer ma matière grise pour de futures technotes. Merci à

• Bougrenette, George, marie blues, Marie Brebis dont le feedback me motive pour la suite.
• Jeff, Flav (auteur du blog du Modérateur) qui partagent leurs bases et connaissances.
• Gee Mee qui me rappelle régulièrement que la pression, c'est pour les demi.

Prenez soin de vous potoblogs, je m'en vais futiliser...

Commentaires à la page

Des bloggueurs issus d'une plate-forme différente voient parfois leurs commentaires refusés par des blogs hébergés par Blogger ou Vox. Pour permettre à n'importe quel visiteur d'écrire un commentaire dans votre blog, une solution peut être d'exploiter le gadget 123Notez
N.B.: Les membres Hellocoton peuvent échanger des messages, via leur page de profil.

1. Cliquez ici pour afficher le site 123votez.com
2. Suivez la procédure pour créer votre widget de notation. Vous obtenez un code html similaire à celui qui suit:
   <script type="text/javascript" charset="utf-8" id="un23notez_8163" src="http://www.123notez.com/jenote/?idjenote=8163"></script>
   <noscript>Lire les commentaires de ce <a href="http://www.123notez.com/jenote/Noter-notez-blog-8163_1.php" title="notez blog">gadget (widget) de notation</a> depuis <a href="http://www.123notez.com" title="Gadget - Widget">123notez.com</a></noscript>
3. Insérez le gadget 123Notez dans votre blog en tant qu'élément de colonne.
   Ajoutez un élément dans une colonne du blog. Copiez/collez le code html obtenu. Enregistrez.

• Le visiteur clique sur ECRIRE pour taper un commentaire ou donner une note.
• L'auteur du blog clique sur COMMENTAIRES pour lire les commentaires affichés dans la page réservée.
• Notez qu'il est possible d'afficher le gadget au-dessus de la bannière, en modifiant le template d'une page du blog.

Une fois le gadget 123Notez actif, il faut accepter de voir s'afficher un encart publicitaire au premier plan de votre blog et la fenêtre d'un site commerçant en arrière-plan. A vous de décider où se situe votre seuil de tolérance, entre la simplicité de ce gadget gratuit et l'invasion publicitaire de votre blog.

Sachez que ce gadget basique est technologiquement dépassé par des widgets autorisant les commentaires audio/vidéo/en temps réel, tels que

• Wagwire - Wag Cast
• Blipback - Widget de Commentaire Vidéo
• JS-Kit ECHO

Si vous testez l'un de ces services, merci de me faire part de vos impressions.

Dynamisez vos notes hautETfort

Je l'ai vu dans d'autres blogs, je l'ai voulu dans le mien. Au bas de chaque note de blog, le widget LinkWithin propose les liens vers des notes similaires, selon le contenu, le titre ou les tags.

LinkWithin affiche une image en vignette et le titre de chaque note en relation avec la note en cours. Le titre s'affiche seul quand la note en lien ne contient aucune image.

Il suffit de cliquer sur une vignette ou un titre pour lire la note proposée. Ainsi, LinkWithin recycle vos archives et met vos notes en avant.

Obtenir le code html partiel pour intégrer le widget LinkWithin

1. Cliquez ici pour afficher le site LinkWithin - Related Posts with Thumbnails
2. Remplissez le formulaire. Sélectionnez les valeurs indiquées ci-dessous.
   Au-delà de 3 notes (stories), il faut contacter le support LinkWithin pour que le widget soit activé par leurs soins. Soyez patient, un mois d'attente peut être nécessaire avant intervention.
3. Cochez l'option My blog has light text on a dark background si le texte de votre blog s'affiche sur fond foncé.

Email:
Blog Link:
Platform:	Other WordPress (self-hosted) TypePad Blogger
Width:	3 stories 4 stories 5 stories
	My blog has light text on a dark background
	Free. No ads. No signups. More traffic.

4. Cliquez sur le bouton Get Widget! L'écran Install Widget on Other Platforms affiche le code html qui sert à intégrer le widget dans votre blog.

<script>
var linkwithin_site_id = 91386;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>

Ne copiez pas ce code en l'état, car il est incomplet!

Si LinkWithin s'installe automatiquement pour les services de blogging les plus connus, il est nécessaire de personnaliser la présentation d'un blog hautETfort pour que ce widget s'affiche correctement.

Comment intégrer le wigdet Linkwithin dans un blog hautEtfort?

1. Cliquez sur l'onglet PRESENTATION de l'Editeur de blog hautETfort.
2. Cliquez sur Configuration avancée
3. Cliquez sur Je veux aller dans le design avancé
4. Face au Modèle de la page lien permanent, cliquez sur Modifier le template
5. Dans la source html du modèle, localisez les balises </head> et <div=class postbottom>
6. Juste au-dessus de la balise </head>, copiez-collez le code activant le widget dans chaque note de blog (ci-dessous).
7. Juste au-dessus de la balise <div=class postbottom>, copiez-collez le code affichant le widget au bas de chaque note (ci-dessous).
8. Cliquez sur le bouton Enregistrer les modifications
9. Fermez la fenêtre Modifier le modèle de la page lien permanent

Code activant le widget LinkWithin dans chaque note de blog

<script>
var linkwithin_site_id = 91386;
</script><script>linkwithin_text='Your custom text:'</script>

• La valeur var linkwithin_site_id est l'identifiant unique pour votre blog.
• Le code <script>linkwithin_text='Your custom text:'</script> est facultatif. Il sert à remplacer la phrase "Vous aimerez peut-être :" qui présente les notes en relation avec la note en cours.
  Au besoin, copiez-collez ce code et remplacez la valeur Your custom text: par votre texte personnalisé (Encore un tasse de thé ? par exemple)

Code affichant le widget LinkWithin au bas de chaque note

<div class="linkwithin_div"></div><script src="http://www.linkwithin.com/widget.js"></script>

Vous avez apprécié cette technote ? Gee Mee l'a faite évoluer pour vous livrer cette version vidéo. Suivez le guide ^^

Dynamisez vos notes avec vos archives et LinkWithin dans votre blog Hautetfort from Gee Mee on Vimeo

Mon blog se nourrit de commentaires hautETfort

Cette évidence a conduit le service hautETfort à développer l'échange et le suivi de commentaires au sein d'un blog.

La richesse de cette amélioration explique les nombreuses révisions de cette note au contenu très dense.

Configurer l'affichage des commentaires dans votre blog

1. Cliquez sur l'onglet TABLEAU DE BORD de l'éditeur hautETfort.
2. Cliquez sur Généralités
3. Activez les Propriétés d'affichage suivantes.

Afficher le gravatar sur les commentaires	Oui Non Taille du gravatar : pixels Ce champ doit être compris entre 1 et 100.
Afficher le fil des commentaires	Oui Non

4. Cliquez sur le bouton Mettre à jour ces modifications
   

Ces propriétés offrent les fonctionnalités suivantes à chaque visiteur qui vient Ecrire un commentaire

• Son gravatar s'affiche à la Taille que vous fixez, si ce bloggueur est inscrit au service d'identification Gravatar.com
• L'option S'abonner au fil de discussion : permet d'échanger des commentaires entre bloggueurs. Le bloggueur qui coche l'option reçoit une alerte mail à chaque commentaire déposé dans une note qui retient son intérêt. Il peut ouvrir la discussion en choisissant de Répondre à ce commentaire

Répondre à un commentaire renforce le lien avec son émetteur.

Répondre à chaque émetteur exige de personnaliser chaque réponse et gonfle articiellement le nombre de commentaires sur une note.

Répondre à plusieurs émetteurs dans un commentaire unique peut froisser certains.

Il est préférable de s'abonner au fil de discussion avec modération pour ne pas engorger la boîte mail.

Les propriétés Afficher le gravatar sur les commentaires et Afficher le fil des commentaires sont automatiquement neutralisées, chaque fois que les commentaires sont désactivés dans une note.

Personnaliser l'affichage des commentaires dans une note

1. Quand vous ajoutez une note, cliquez dans la Configuration avancée pour Voir les propriétés avancées (commentaires, trackbacks)
2. Vérifiez le statut des Commentaires Aucun Ouverts Fermés
3. Si vous cliquez sur Aucun ou Fermés, vous désactivez l'ajout de comnentaires, comme l'affichage des gravatars et du fil de discussion.

Gérer les commentaires dans votre blog

Cliquez sur l'onglet NOTES de l'éditeur hautETfort. Cliquez sur Tous les commentaires

Supprimer un commentaire

Jeune bloggueuse, je répondais aux commentaires à tout va. Je me suis censurée après avoir raconté comment je vis dans l'illégalité.

1. Repérez le(s) commentaire(s) à supprimer.
2. Cochez la case face à chaque commentaire à supprimer.
3. Cliquez sur le bouton Supprimer au bas de la liste des commentaires.

Bannir un émetteur de commentaire

Un fâcheux a pollué le blog avec ses commentaires du dimanche. Ma paranoïa s'est emballée, il fallait chasser l'encombrant pour l'éternité.

1. Repérez le(s) commentaire(s) à supprimer.
2. Cliquez sur Modifier face au commentaire.
3. Cliquez sur Bannir cet IP
4. Cliquez sur le bouton Enregistrer

Mettre à jour un commentaire

Les commentaires sont plus nombreux. Je réponds à tous dans un commentaire unique. C'est bon d'être fainéante!

1. Repérez le premier commentaire que vous avez rédigé pour répondre.
2. Cliquez sur Modifier face au commentaire.
3. Complétez le contenu du commentaire.
4. Datez le commentaire Ecrit le jour et l'heure de la modification.
5. Cliquez sur le bouton Enregistrer . Votre commentaire s'affiche au-dessus de ceux auxquels il répond.

Utilisez la liste de commentaires comme premier annuaire de contacts. Vous avez le pseudo d'un visiteur, vous y trouverez son adresse mail.

Pour bloggueurs avancés

• Distinguer ses réponses au sein des commentaires : Le blog Hautetfort
• Créer un style pour les commentaires : Gee Mee
• Afficher le début d'un commentaire, dans la liste des derniers publiés : Gee Mee

Protéger ses photos hautETfort

Soyons lucide! Rien n'empêche un esprit mal intentionné de s'emparer d'une photo par une simple capture d'écran.
Ne devenons pas parano! Parmi les solutions ici testées, vous en trouverez une suffisamment dissuasive.

Afficher des photos à taille réduite

Cette action simple reste la plus efficace. Quand vous insérez une image dans une note, prenez les précautions suivantes:

• Cliquez sur la Taille de l'image, Petite ou Vignette
• Ne cochez pas l'optionAfficher en grand dans une nouvelle fenêtre

La taille d'une vignette est de 150×112 pixels, celle d'une petite image de 100×75 pixels.

Appliquer un effet sur des photos

S'il est utile de marquer des photos professionnelles ou commerciales par un filigrane Free Watermark. Add Custom Watermark. Protect Your Photos and..., cette action n'est pas la plus ludique pour des photos personnelles.

Avec un éditeur d'image en ligne ou installé sur PC, vous pouvez appliquer un flou, ajouter un cadre, rogner un portrait, etc.
Je préfère les services en ligne spécialisés dans le détournement de photos (merci Bougrenette). Actuellement, j'ai un gros faible pour LoonaPix.com. Make Funny Pictures and Add Photo Frames Online.

Afficher les photos d'un album 3D dans un blog hautETfort

Cette action permet d'utiliser une fonctionnalité hautETfort qui gagne à être connue, car très esthétique.

1. Créez un album photo.
2. Ajoutez des photos dans un album.
3. Insérez un album dans une note. Cliquez
   • Cliquez sur l'album à insérer Mon album
   • Cliquez sur Album dans une note dans les Options.
   • Valider Cliquez. Feuilletez l'album en exemple.

 

Pour bloggueurs avancés: Interdire le passage de la souris au-dessus d'une photo

Cette action empêche le clic droit pour enregistrer l'image sur PC et affiche un avertissement quand un visiteur pointe vers l'image. Elle nécessite de manipuler la source html de la note.

Saluons Tétouille qui s'est prêté sans peur et sans reproche à ces manipulations (tentez de survoler la photo avec la souris ;)

Merci à Jef, auteur des articles suivants sur lesquels vous pouvez vous appuyer.
Protéger ses photos contre le vol : les solutions - VirusPhoto
3 astuces pour protéger ses photos contre le vol - VirusPhoto

1. Insérez une image dans une note.
2. Cliquez sur HTML dans la barre d'outils.
3. Dans la source html de la note, localisez le code correspondant à l'image insérée <img src="http://monblog.hautetfort.com/media/maphoto.jpg">
4. Devant le code de l'image, copiez-collez <a href="javascript:void(0)" onmouseover="alert('Cette photo est mon portrait - Merci de ne pas la copier!')>
5. Derrière le code de l'image, copiez-collez </a>
6. Vérifiez le code final de l'image:
   <a href="javascript:void(0)" onmouseover="alert('Cette photo est mon portrait - Merci de ne pas la copier!')><img src="http://monblog.hautetfort.com/media/maphoto.jpg"></a>
7. En bas de l'Editeur de la source HTML, cliquez sur le bouton Mettre à jour

Merci à kriss qui rappelle que cette action fonctionne sous 2 conditions:

• Vous devez activer le javascript dans les options de votre Explorateur Internet.
• La source html de la note ne doit pas contenir la balise <noscript> qui neutralise javascript.

Cé koi ces technotes hautETfort?

Au commencement, je me suis gravement pris la tête sur ce projet tout ce qu'il y a de sérieux. Le soufflet a brutalement dégonflé face aux notes de Gee Mee et Lavande pour les bloggueurs HautetFort. Respect.

Je suis conceptrice/rédactrice confirmée de documentation numérique pour logiciels industriels sous Windows, j'ai beaucoup à apprendre de la blogosphère, avec ses flux et ses réseaux.

Ce blog  doit rester ce qu'il est, un terrain d'expérimentations du service hautETfort. Vous venez jouer avec moi?

Les infos données dans la catégorie Hotline sont testées dans un blog hautETfort en formule gratuite et s'adressent aux bloggueurs hautETfort et BlogSpirit.

Les Bidochon Internautes, Album 19
Auteur: Binet - Editions Fluide Glacial - Tous droits réservés

Les notes de cette catégorie sont actualisées selon les évolutions du blogging et services en ligne, notamment celles qui suivent:

• Outils pour blog
• Images pour usage...

Voir toutes les notes Hotline hautETfort

Votez hautETfort!

Chaque note de ce blog s'achève sur un système de vote à 5 étoiles. Sa fonction est de permettre de donner un avis sur le contenu, autrement que par un commentaire.

De nombreux systèmes de "post rating" sont disponibles. Par exemple, vous pouvez exploiter le widget personnalisable http://www.widgetbox.com/widget/rating

Il est nécessaire de personnaliser la présentation d'un blog hautETfort pour que le widget s'affiche correctement.

Comment intégrer le wigdet dans un blog hautEtfort?

1. Cliquez sur l'onglet PRESENTATION de l'Editeur de blog hautETfort.
2. Cliquez sur Configuration avancée
3. Cliquez sur Je veux aller dans le design avancé
4. Face au Modèle de la page lien permanent, cliquez sur Modifier le template
5. Juste au-dessus de la balise <div=class postbottom>, copiez-collez le code HTML servant à intégrer le widget au bas de chaque note.
6. Cliquez sur le bouton Enregistrer les modifications
7. Fermez la fenêtre Modifier le modèle de la page lien permanent

Laissez un commentaire ou cliquez sur l'étoile correspondant à votre niveau de satisfaction. A voté, merci!

Polaroïdissime

La note d'Alexandra "Des polaroids sur son blog Hautetfort : Le blog Hautetfort" me donne envie de comparer trois générateurs de polaroïd en ligne. Ci-dessous, le modèle qui a patiemment subi mes tests.

Mes critères pour sélectionner chaque générateur sont les suivants:

1. service en ligne, gratuit et sans inscription
2. fonction unique (ne produit que des polaroïds)
3. possibilité d'enregistrer par un clic droit sur l'image finale (aucun code à manipuler)

Photo Notes

• Points forts: utilisation ludique, possiblité de choisir un modèle de polaroïd, de taper la légende avec la fonte et la couleur de votre choix
• Points faibles: obligation de charger une image carrée pour éviter sa compression, trop de fond perdu autour du polaroïd

Instantizer.com - free online graphics tool - wrap pictures into a polaroid-style frame

• Points forts: utilisation rapide, possibilité de taper la légende ou d'orienter la photo selon l'angle de votre choix, respect de l'image d'origine
• Point faible: rectangle interne à retoucher pour un cadre photo harmonieux

Rollip - Create Polaroids from your photos!

• Points forts: possiblité de choisir la taille et le rendu de la photo, bons redimensionnement et recadrage de l'image
• Points faibles: prise en main moins facile, cadre photo un peu kitsch par sa texture plus vraie que nature

Quelque soit le générateur choisi, vous pourrez redimensionner, faire pivoter le polaroïd ou ajouter une légende dans un éditeur d'image en ligne, tel que DrPic.com Free Web Picture Editor and Image Host - Crop, Resize, Text
La simplicité de cet éditeur gratuit m'a conquise. Le plus est la facilité avec laquelle on encadre une photo (pour obtenir un polaroïd par exemple).

J'ai un faible pour le mignon Photo Notes, mais je parie sur la progression de Rollip dont cet encadrement est esthétique.

hautETfort jusqu'à la saison prochaine!

Beaucoup l'ont observé, le blog Upset Diary a changé plus vite de forme que son ombre... qui ne bougera plus car j'ai supprimé par mégarde les fichiers de construction.

Outre mes circonvolutions neuronales autour d'un thème, ma plus grande difficulté a été de trouver le modèle hautETfort répondant à mes besoins:

• liste avec numérotation automatique
• liste avec puce automatique
• couleur de lien visible
• possiblité d'insérer ma bannière
• composants graphiques à personnaliser

1. Après pas mal de casse, j'ai choisi ce modèle facile à manipuler, à condition de suivre les directives de la note "Comment utiliser les modèles de ce blog ? : Gee Mee"
2. Après avoir téléchargé ma bannière, j'ai copié/collé la Feuille de styles dans un fichier texte par sécurité.
3. D'un clic droit, j'ai enregistré chaque composant graphique pour le modifier dans PSP (puces, titre et bas de note, titre et bas de bloc, bas de page, etc.)
4. Via le Tableau de bord, j'ai chargé mes composants graphiques dans le dossier images de la rubrique Fichiers
5. Via la configuration avancée de la Présentation, j'ai remplacé dans la Feuille de styles l'adresse url de chaque composant graphique initial par l'adresse url de mon composant de même nom.

J'y ai également défini la couleur des blocs et de certains titres, sans oublier

• Afficher une image d'arrière plan en mosaïque, en motif (révisée) : Gee Mee
• Insérer un favicon - www.blogtuto.org (bloggueurs avancés)

Je résume volontairement mon propos pour ne pas nous enfumer avec des descriptions techniques obscures. Vous avez la marche à suivre, à vous de sortir des sentiers battus!

Créer et insérer une animation GIF avec Loogix.com

Le site Loogix.com vous aide à produire en ligne une animation simple pour l'insérer dans votre blog hautETfort.
Cette solution pour insérer un GIF animé s'ajoute à la note "Insérer une image transparente, animée, voire les deux. : Gee Mee"

** = niveau assez facile, nécessite de copier/coller un peu de code HTML

1. Affichez le site http://www.loogix.com/
2. Cliquez sur la taille de l'animation: Size
3. Cliquez sur la vitesse de l'animation: Speed
4. Désignez la première image de l'animation:
   1. Cliquez sur le bouton Parcourir
   2. Double-cliquez sur un fichier image (GIF/PNG/JPG)
5. Désignez la seconde image de la même façon. Deux images sont indispensables pour produire l'animation.
6. Désignez la troisième image.
7. Au besoin, ajoutez une image dans l'animation: cliquez sur Add one more picture et désignez l'image suivante.
   
8. Cliquez sur Generate Animation pour produire l'image animée.

• La colonne droite du cadre orange affiche l'animation GIF. Vous pouvez enregistrer l'image, lui appliquer un effet ou corriger l'animation.
• La colonne gauche affiche l'adresse URL et l'Embed code qui servent à insérer l'animation dans une page Web.
  Pour insérer l'animation depuis l'Embed code, cliquez sur le bouton Copy

1. Dans l'Editeur hautEtfort, affichez la note où vous allez insérer l'animation.
2. Cliquez sur HTML dans la barre d'outils.
3. Dans le code HTML, faites un clic droit à l'endroit où vous voulez insérer l'animation.
4. Dans le menu déroulant, cliquez sur la commande Coller pour insérer l'Embed code correspondant à l'animation.
5. En bas de l'Editeur de la source HTML, cliquez sur le bouton Mettre à jour

De gauche à droite: Image1, Image2, Image3 chargées dans Loogix.com

Animation GIF obtenue insérée depuis le code fourni par Loogix.com

<a href="http://www.loogix.com/"><img src="http://www.loogix.com/img/res/1/2/4/5/2/3/12452390171089223.gif" alt="Loogix.com. Animated avatars." /></a>

Je sais qu'il faut posséder quelques bases pour manipuler le code HTML, il s'agit d'une alternative pour insérer un gif animé. Alors autant varier les plaisirs :)

Pour insérer l'animation depuis l'URL, suivez les instructions "Comment insérer une image transparente et ou animée : Gee Mee"