Afficher Masquer une partie du message Blog -Tutoriel

Ajouter la fonction Lire+ à son blog blogger (nouvelle version)

Avant propos: 1) Pour les visiteurs qui auraient une ancienne version de Blogger, voici le lien vers le tuto "officiel". Malheureusement cette aide n'est plus d'actualité pour les blogs de la nouvelle version, je vous propose ci dessous une autre astuces pour agrémenter vos messages de blogs.
2) Pour les visiteurs qui ne viennent pas souvent :-D je précise que dans mon tuto, je remplace les signes < (des balises html) par des [ (crochets) ceci pour éviter que blogger ne prennent en compte le code. -- Enfin je tiens à préciser que cette méthode utilise javascript. Evidemment pour profiter de cette fonctionnalité les utilisateurs devront avoir activer javascript. Notez que c'est de plus en plus le cas, depuis l'avènement de site comme Netvibes qui utilisent puissament ce langage.


Préparation

Avant de plonger plus profondément dans le tuto, prenez bien garde à reproduire les portions de code telles qu'elles seront écrites ici. Pensez notament à faire attention à la casse des caractères (Majuscules/Minuscules). C'est très important


Nous allons maintenant écrire la partie de code javascript qui va nous permettre d'accéder à la fonctionnalité lire+ (vous pouvez copier/coller ce code puis remplacer les [ par des <):

[script type='text/javascript']
function changeVisibility(value) {
document.getElementById('lire') .style.visibility=value;
}
function changeDisplay(value) {
document.getElementById('lire') .style.display=value;
}
[/script]

Ce morceau de code devra être coller dans la partie [head] ...[/head] du code html de votre blog.

• Copier le code ci dessus
• Connectez vous à Blogger, cliquez sur "modèle" dans le panneu de contrôle de votre blog
• Puis onglet "modifier le code html"
• trouvez la balise [/head] et collez le code javascript, juste avant.
  

La première partie de l'opération est faite. Je vais vous décrire brièvement ce que l'on a fait pour que vous puissiez comprendre ce qu'il vous faudra faire lors de la publication des messages.
Ce bout de code crée la fonction: function changeVisibility(value)
où value est l'argument attendu par la fonction.
Il utilise la fonctionnalité javascript: document.getElementById('lire') .style.visibility=value;
où lire est l'id d'un élément html. Ici j'ai choisi de mettre id="lire" mais vous pouvez utiliser un autre mot. Le tout sera de réutiliser le même mot lors de l'écriture du message.

Le code javascript va donc faire varier, la visibilité et le display de tout les éléments qui auront l'identifiant (id): lire


Publication des messages

Maintenant nous allons publier un message et utiliser bien sûr la fonction javascript.
Rendez vous donc sur votre panneau d'édition de posts, entrez un titre et passons au corps du message. l'intérêt de la fonction lire+ est d'intéresser le lecteur avec une introduction accrocheuse et lui donner la possibilitée de lire tout le post si il le souhaite. Appliquez vous donc à bien travailler votre texte d'introduction.
Vous devez prévoir à la suite de votre texte d'accroche un lien, (lire+ ou cliquez ici ...)

Passons maintenant au coeur du problème. le texte que vous allez soumettre à la lecture optionnelle va être placé entre des balises [span]Ici_Votre_Texte[/span] (notez qu'on pourrait utiliser une autre balise html, mais celle là convient bien à la situation).
Voici une image de ce que pourrait être votre message


La balise span a pris comme identifiant lire et comme valeur par défaut visibility="hidden" (le texte ne sera donc pas visible quand le visiteur arrivera sur la page) et display="none" (la place qu'occupe le texte quand il est visible est libérée quand il est invisible).
Elle s'écrit donc:
[span id="lire" style="visibility: hidden;display:none;"]Ici_Votre_Texte[/span]

il va falloir maintenant appeler les fonctions javascript:

• Sélectionnez le texte cliquez ici (ou lire+, ou ...)
• Cliquez sur le bouton pour faire un lien (infobulle; "associer")
• Effacez : http://
  
• et insérer le texte ci après: javascript:changeVisibility('visible');changeDisplay('inline')

Voilà, PUBLIER votre message et normalement vous aurez accès au texte placé entre les balises [span id="lire"...]...[/span] en cliquant sur le lien.


ATTENTION. Les valeurs par défaut de span (visibility:hidden et display: none) font que si vous souhaitez modifier votre message, le texte dans span ne sera pas visible dans l'éditeur de message. Il vous faudra le modifier directement par l'onglet "modifier le code html" de l'éditeur, ou autre solution (toujours via l'onglet "modifier le code html") changer les propriétés de span le temps des modifications.

• Passez visibility à "visible" et display à "inline"
• PUBLIER ou enregistrer en mode brouillon
• Onglet Envoi
• Modifier les messages

Evidemment avant de valider une dernière fois remettez les valeurs hidden et none à la balise [span]

ATTENTION Bis. Si vous souhaitez sur une même page (la page d'accueil du blog par exemple) afficher plusieurs messages optionnel (accessible avec lire+) il vous faudra à chaque fois déclarer une nouvelle fonction et changer l'identifiant à chaque message (il y a peut être une autre solution mais je suis pas un spécialiste de javascript ??!!).
Si vous avez 2 messages "optionnels" à afficher voilà ce qu'il faut mettre dans la partie [head]...[/head]
[script type='text/javascript']
function changeVisibility(value) {
document.getElementById('lire') .style.visibility=value;
}
function changeDisplay(value) {
document.getElementById('lire') .style.display=value;
}
function changeVisibility2(value) {
document.getElementById('lire2') .style.visibility=value;
}
function changeDisplay2(value) {
document.getElementById('lire2') .style.display=value;
}
[/script]
Evidemment l'appel de la fonction dans le 2ème message ce fera sur une balise [span id="lire2"]...[/span]
et le texte de lien du 2ème message sera:
javascript:changeVisibility2('visible');changeDisplay2('inline')
Vous l'aurez compris il faut rajouter autant de fonction qu'il y a de messages (je vais regarder pour voir si il n'y a pas moins bourrin comme méthode, quand même ;-)

ATTENTION Ter. Il est bien de prévoir un retour pour le lecteur, donc à l'intérieur des balises span, vous pouvez inclure un lien "réduire" qui aura comme propriété:
javascript:changeVisibility('hidden');changeDisplay('none')
ou
javascript:changeVisibility2('hidden');changeDisplay2('none') pour le deuxième message


Epilogue ou Presque
Ce code marche avec firefox (j'ai pas testé avec d'autre navigateur désolé), j'ai trouvé cette méthode sur "Javascript - Le guide complet" d'Olivier Hondermarck éd. Micro Application. (ouvrage très bien fait d'ailleurs)

Vous pouvez essayer l'application sur mon blog de test: aide-center

## @ Emmanuel ##
Pour que ton premier post soit toujours visible et sans utiliser cette propriété (évidemment tu n'inclus pas le texte dans une balise span "exotique ;-), tu modifis la date du message que tu veux avoir constament en Tête de blog:

• Dans l'édition de message, en bas à gauche de l'éditeur cliques sur option
• Changes la date mettons date ton post à: 01/01/10 et tu seras tranquille jusqu'en 2010

J'espère que tu auras trouver du boulot d'ici là :-)

++