• Rendez-vous à cette adresse : http://a.jimdo.com/app/auth/signin/index/safemode/1
• Connectez-vous en saisissant l'adresse de votre site Jimdo et votre mot de passe :

• Votre site s'ouvre aussitôt en mode admin, mais il est différent et, surtout, un bandeau d'avertissement apparaît en bas de l'écran :

En mode "sans échec", tous les bouts de codes, les scripts et les widgets que vous avez mis dans un élément Widget/HTML cessent d'être interprétés ; ils sont en quelque sorte désactivés. En revanche, les codes correspondant s'affichent à l'endroit où vous les avez insérés. Cela vous permet ainsi de supprimer les widgets qui plombent votre site ou que vous n'arriviez pas à supprimer en mode normal.

Par exemple, en mode "sans échec", le bouton "Me contacter" de mon site (sur la gauche de la fenêtre) n'apparaît pas. A la place, je vois son code, entré dans un élément Widget/HTML de la barre latérale :

Je peux alors très aisément supprimer le bouton, sans avoir à tâtonner dans la barre latérale du site pour le retrouver :

Une fois que vous avez supprimé les widgets rebelles, sortez du mode "sans échec" en cliquant sur le bouton Terminer le mode sans échec présent dans ce bandeau :

Cette solution s'avère incontournable en cas d'urgence après avoir inséré un widget foireux ou un code qu'on n'arrive plus à retrouver !

Au programme de cette barre, d'après la CSS :

• un bouton pour allumer / éteindre le son (?)
• un bouton "fullscreen" pour un affichage plein écran (?)
• le bouton "retour en haut" qu'on connaît déjà

Du coup, j'hésite à mettre à jour mon tutoriel pour customiser le bouton de retour en haut... Je crains que cette barre flottante ne connaisse d'autres changements.

Ca a parfois du bon de farfouiller dans les CSS de Jimdo ;p

Ce premier tutoriel vous permet d'ajouter une loupe au survol de la souris sur les images agrandissables de votre site. Cette petite coquetterie graphique est super facile à installer, d'autant que je vous propose une quinzaine d'images et de codes prêts à l'emploi :

• Styler les images agrandissables ^NEW

Pour voir un aperçu du résultat (qui ne fonctionne évidemment pas avec Internet Explorer), passez la souris sur ces images :

Dans le même ordre d'idée, voici un tutoriel qui va redonner du pep's à vos images. En effet, quand on insère une image dans Jimdo, que ce soit avec l'élément "Image" ou avec l'élément "Texte avec image", l'image s'affiche telle quelle, un peu "brut de décoffrage". Avec les codes que je vous propose, vous allez pouvoir y ajouter une bordure, un cadre, des coins arrondis, une ombre, du relief... tout est possible grâce aux CSS3 (et pour tous les navigateurs sauf ce vieux dinosaure d'Internet Explorer bien entendu... ) :

• Styler les images insérées dans Jimdo ^NEW

Voici un exemple de style possible :

Depuis quelque temps, Jimdo propose une option qui permet d'installer un bouton de "retour en haut" à votre site en un clic. Mais il est un peu tristouille... Je vous propose donc de le relooker dans ce tutoriel en utilisant les propriétés des CSS3 :

• Styler le bouton de "retour en haut" de Jimdo ^NEW

Vous apercevez dans le coin inférieur droit de cette fenêtre ce qu'on peut obtenir (visible sous tous les navigateurs modernes, à l'exclusion de Internet Explorer donc... )

Que les utilisateurs de JimdoFree se réjouissent ! Ils peuvent maintenant bénéficier des mêmes polices originales et graphiques que les utilisateurs de JimdoPro ! Je vous propose un premier tutoriel qui vous permettra d'utiliser ces polices dans le header de votre site :

• Des polices exotiques dans le header de votre site ^NEW

Ce deuxième tutoriel vous donne les codes pour intégrer ces polices dans les titres de votre site :

• Des polices exotiques pour vos titres ^NEW

Enfin, dans ce tutoriel, je vous explique comment utiliser ces polices exotiques sur le reste de votre site, c'est-à-dire sur les textes :

• Des polices exotiques pour vos textes ^NEW

Evidemment, avec l'arrivée du printemps qui est (soi-disant) programmée pour la semaine prochaine, ce script arrive un peu tard - encore que la météo semble un peu capricieuse ces derniers temps ;) Enfin, voici un petit script qui fera voleter, en toute discrétion, de légers flocons fondants sur vos pages :

• Enneiger votre site ^NEW

Si vous voulez recevoir les prochains tutoriels avant leur publication sur le site, vous pouvez vous inscrire à la newsletter : les abonnés reçoivent les tutos en exclu-lu-lu ! ;) Sinon, vous pouvez aussi "liker" Realia - Jimdo sur Facebook !

J'ai écrit 3 nouveaux tutoriels destinés aux utilisateurs de JimdoFree : ils permettent d'utiliser les polices exotiques de JimdoPro pour styler le header du site, les titres et/ou le reste du site (les textes et menus de navigation) ! Un quatrième tutoriel, que j'écrirai d'ici la fin du mois, expliquera, cette fois à tous les Jimdonautes, Free comme Pro, comment utiliser les polices exotiques de Google dans Jimdo pour styler avec originalité header, titres et/ou textes.

J'ai également fini le tutoriel qui permet de protéger les textes de votre site : il tronque automatiquement les sélections copiées sur vos pages et y ajoute, outre une information de copyright, un lien vers la page d'origine. Essayez de copier du texte de cette page et de le coller quelque part pour en voir les effets !

Depuis plusieurs semaines, j'ai entrepris de mettre au point la modification la plus simple possible d'un template natif de JimdoFree, afin de créer un fat footer. Les tests, nombreux, prennent beaucoup de temps. L'idée est de proposer aux Jimdonautes un template d'origine de Jimdo, avec une liste de styles prêts à être copiés-collés pour obtenir un template inédit, avec un "fat footer" facile à exploiter (merci au module "colonnes" sans lequel cela aurait été impossible !) Je touche au but !

Chers abonnés à la newsletter, je vous envoie très vite les liens vers les 4 premiers tutoriels ! So stay tuned !

Ce tutoriel vous montre comment créer une pagination automatique du blog. Utile quand une page d'archive commence à être trop chargée ! Comme j'ai mis en place ce script sur mon site, vous pouvez en tester les effets sur mon blog et si vous voulez l'installer sur votre site, lisez ce tutoriel sans tarder :

• Paginer automatiquement le blog

Ce tutoriel vous permet de créer une très pratique "Foire Aux Questions Fréquentes" sur votre site Jimdo. Seules les questions apparaissent : en cliquant sur l'une d'entre elles, le visiteur

"déballe" la réponse correspondante ; un nouveau clic la "remballe". Cerise sur le gâteau, la FAQ peut être organisée en rubriques bien distinctes. C'est propre, pratique et c'est ici :

• Créer une FAQ dynamique

Je vous donne dans ce tutoriel 10 codes prêts à être copiés-collés. Ils permettent d'afficher une jolie icône à côté des catégories des billets de votre blog pour signaler que ce sont des "tags". Voyez directement de quoi il retourne :

• Ajouter une icône à côté des catégories du blog

Ce tutoriel datait un peu : je l'ai donc rafraîchi (réorganisé, refait les captures, mis les textes à jour). J'y explique comment archiver les billets du blog en catégories ou en archives mensuelles. J'ai ajouté une section expliquant comment styler les menus déroulants de ces archives en les accordant aux couleurs de votre site :

• Archiver les billets du blog

Inscrivez-vous à la newsletter du site pour être informés des nouveaux tutoriels ! Les abonnés recevront dorénavant les tutoriels en "avant-première", avant que les liens ne soient rendus publics sur le site ;) 

Sur ce site, j'ai mis en ligne, en téléchargement libre, de nombreuses ressources permettant d'animer un atelier de lecture de contes :

• des explications sur la démarche et l'organisation de l'atelier
• le déroulé d'une séance
• un tutoriel exliquant comment fabriquer à moindre coût un carnet, avec des photos de carnets d'élèves
• le matériel pédagogique que j'utilise : une centaine de contes que j'ai remis en page et illustrés (à télécharger librement au format PDF), ainsi qu'une cinquantaine de fiches d'activités (à télécharger sous réserve de contribuer au projet en envoyant une fiche d'activités)

Bref, gros boulot, puisque le site compte près de 120 pages !

Côté navigation, j'ai mis en place le "stickyfooter" de ce tutoriel, en ajoutant une petite coquetterie visuelle : le pied de page est transparent et il s'opacifie quand on passe le curseur dessus. Ainsi, il n'obstrue pas l'écran, mais les liens deviennent visibles quand on on a besoin de les cliquer :

Mon plus gros problème a concerné la possibilité d'offrir aux visiteurs du site une prévisualisation des fichiers PDF avant de les télécharger. Ma solution est lourde, mais fonctionnelle : j'ai hébergé les fichiers que j'offre en téléchargement sur mon compte Google Drive, puis j'ai utilisé la visionneuse de PDF de Google pour afficher en ligne un aperçu des fichiers. Google Drive fournit un code pour intégrer la visionneuse dans une page web, mais le résultat est terrible car la fenêtre compte 2 et parfois 3 barres de défilement ! Beurk ! J'ai donc multiplié les tests jusqu'à trouver le code qui va bien : une seule barre de défilement dans la visionneuse - c'est raisonnable :

Je crois que j'ai fait le tour des principaux points techniques de Carnet de Contes. En tout cas, je suis ravie d'en avoir fini avec ce site dont la mise en place a été trèèèès laborieuse et de pouvoir reprendre la rédaction des tutoriels ici-même :)

J'ai profité de ce tutoriel pour remplacer la Hello Bar qui était en action sur ce site par la Woah Bar qui n'est pas limitée en nombre de clics. J'ai dans la foulée actualisé le tutoriel sur la Hello Bar.

• Installer la Hello Bar ^MAJ

Pour tester "en vrai", le résultat, rendez-vous sur http://favoris.jimdo.com où je l'ai installé.

J'ai également actualisé le tutoriel qui permet d'installer un bouton de contact statique en ajoutant une dizaine de nouveaux boutons et les codes qui vont avec. On s'éloigne un peu du concept initial (le bouton de contact) : désormais, le bouton peut aussi servir à orienter des clients sur la boutique du site, sur la page d'accueil, sur le forum, sur les news, etc... 

• Un bouton de contact (ou autre) statique ^MAJ

A la demande de plusieurs Jimdonautes, j'ai ajouté le code qui permet d'installer deux boutons l'un au-dessus de l'autre, comme ceci :

C'est tout pour aujourd'hui !

Par ailleurs, j'ai repris une ancienne astuce que j'ai étoffée : cela a donné naissance à un petit tutoriel expliquant comment installer, dans le corps d'une page un peu longue, des ancres qui permettent de remonter au sommaire situé en haut de la page.

• Remonter au sommaire ^NEW

Enfin, j'ai bouclé un court tutoriel qui explique comment crypter des données dans Jimdo :

• Crypter des données ^NEW

D'autres tutoriels arrivent : stay tuned !

A part ça, j'ai fait pas mal de modifications sur le site :

• Nouvel affichage du blog sur la page d'accueil
• Réorganisation de la barre latérale du site et coup de balai dans le menu : pour plus de lisibilité, j'ai retiré les tutoriels ébauchés (que je ne désespère pas de finir un jour) et seulement laissé en place les tutoriels finis
• Mise en place de la newsletter dans la barre latérale (j'ignore pourquoi j'en bénéficie... alors que je suis ici en Jimdo Free !?)

• Ajouts des boutons de diffusion Facebook, Google+ et Twitter en marge des plus récents billets du blog : now you *really* can spread the loove !
• Ajouts de sommaires plus visibles en haut des tutoriels, car... ils sont animés : l'effet de zoom au survol est obtenu grâce à des propriétés CSS3 - dont ne profitent hélas pas les utilisateurs d'Internet Explorer - too bad, guys :(

• Remplacement du vieux et trop basique colorpicker (l'outil qui permet de récupérer les codes hexadécimaux des couleurs) par une version plus élaborée et plus pratique :

• Stylage en CSS de tous les formulaires du site - j'ai appliqué le tutoriel que j'ai rédigé sur le sujet, tout bêtement !)
• Et j'en oublie sûrement... mais c'est déjà pas mal ce coup de propre !

http://il-y-avait-une-fois.jimdo.com

Cliquez sur les images pour les agrandir et surtout... visitez le site de Voutch !