02 avril 2006
Scripts, trucs et astuces en HTML ou autres
Pour améliorer la présentation, faciliter la navigation et la lecture du site
SOMMAIRE
- Un menu en haut des pages
- Faire bouger du texte
- Surligner un mot ou une phrase pour le mettre en valeur
- Mettre en valeur un paragraphe complet (balise <Blockquote>
- Arriver directement à un endroit d'une page (un mot, une photo)
- Créer et installer un menu déroulant
- Mettre une icone personnelle dans la barre d'adresse
- Installer un traduteur Français/Anglais et Français/Allemand sur le blog.
- Installer un bouton "recommander ce site à un(e) ami(e)
- Ouvrir un lien sur une nouvelle fenêtre
- Créer un lien dans un album vers un message ou une URL extérieure
- Créer un lien depuis uns photo dans un album vers un message
- Liste de caractères spéciaux HTML
- Faire apparaitre la suite cachée d'un texte (Lire la suite…)
- Un générateur de texte avec des couleurs dégradées
- Créer une page web indépendante (pour regrouper tous les albums photos)
- Coin de page qui s'ouvre au passage de la souris dévoilant un lien de redirection
- Écrire sur une image, une photo ou un fond en couleur
01 avril 2006
Etablir un lien dans un album vers un message
Vous allez dans la partie description (facultatif) de votre album,
Vous saisissez votre description normalement et à la suite vous saisissez le code HTML suivant:
<html><a href="http://adressedumessage">Nom du message</a></html>
N'oubliez pas les balises <html>........</html> sinon ça ne fonctionnera pas.
Le lien apparaît après votre description sur la première page de l'album.
Faire un lien depuis une photo d'album vers un message
Vous allez dans la partie description de la photo de l'album où vous souhaitez faire un lien.
Vous saisissez votre description normalement et à la suite vous saisissez le code HTML suivant:
<html><a href="http://adressedumessage">Nom du message</a></html>
N'oubliez pas les balises <html>........</html> sinon ça ne fonctionnera pas.
Le lien apparaît (après votre description éventuelle) à droite de la photo affichée:
Ouvrir un lien sur une nouvelle fenêtre
Pour que vos liens s'ouvrent sur une nouvelle fenêtre, ajoutez au bout de chaque lien: target="_blank"
<a href="http://........ " target="_blank">
Installer un bouton "Recommandez ce site!"
Allez dans la page d'accueil de votre éditeur (chemin "Apparence" - éditer les fichiers de ce modéle) et installez avant la balise </head> le script suivant:
<script language="JavaScript1.2">
<!--
url = window.location;
titre = document.title;
sujet = "J'ai pensé que ça va t'intéresser";
function sendUrl(){
window.location = "mailto:"+prompt('Entrez l\'adresse email de la personne a qui vous désirez recommander ce site','')+"?subject="+sujet+"&body=Je te recommande cette page : "+titre+" "+url;
}
//-->
</script>
Puis entre les basises <body> et </body>, installez le script suivant à l'endroit où vous voulez qu'apparaisse le bouton invitant à recommander votre site à un ami:
<a href="javascript: sendUrl()"><img width="140" height="35" border="0" src="http://adresse de l'image du bouton recommendez ce site.jpg" alt="Recommendez ce site" /></a>
Comment installer un traducteur sur mon blog
Allez dans le menu "apparence" de l'éditeur HTML, éditer les fichiers du modèle, et coller le script ci-dessous entre <body> et </body> à l'endroit où vous désirez qu'apparaisse le traducteur:
<div class="title">Traductions</div>
<form action="http://translate.google.com/translate" name="translate" id="translate">
<input type=hidden name=u value="" />
<input type=hidden name=langpair value="" />
<input type=hidden name=hl value="fr"><input type=hidden name=c2coff value=1><input type=hidden name=ie value=UTF-8><input type=hidden name=oe value=UTF-8><input type=hidden name=prev value="/language_tools"></form>
Ajoutez le script ci-dessous pour la traduction français / anglais
<a href="javascript:document.translate.elements['langpair'].value = 'fr|en'; document.translate.elements['u'].value = document.URL; document.translate.submit();"><img width="38" height="27" border="0" src="http://URL image drapeau anglais.gif" alt="flagf_uk" /></a>
Ajoutez le script ci-dessous pour la traduction français / allemand
<a href="javascript:document.translate.elements['langpair'].value = 'fr|de'; document.translate.elements['u'].value = document.URL; document.translate.submit();"> <img width="38" height="27" border="0" src="http://URL image drapeau allemand.gif" alt="flagf_de" /></a>
Une icône dans votre barre d'adresse
Pour afficher une icône dans la barre d'adresse:
il vous faut d'abord créer l'icône dont la taille ne doit pas dépasser 32 x 32 pixels. Vous pouvez la réaliser avec un logiciel comme Photoshop ou un éditeur d'icone. Vous devez l'enregistrer au format gif, ou png, ou jpg.
Vous la chargez sur votre blog, et dans la rubrique "apparence", éditez votre page d'accueil en ajoutant par exemple au-dessus de la ligne :
<link rel="stylesheet" href="%3C$BlogCSSURL$%3E" type="text/css" /></p>
Cette ligne :
<link href="l"url vers l'icone.png" type="image/png" rel="icon" />
Si votre icône est au format gif, remplacez type="image/png" par type="image/gif"
Créer un menu déroulant
Avant la balise </head> mettre le script suivant
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
function menuderoulant(selection){
window.location=selection.options[selection.selectedIndex].value;
}
//-->
</script>
Puis entre <body> et </body> à l'endroit où vous voulez qu'il soit.
<form name="form1">
<div align="center">
<select name="menu" onChange="menuderoulant(this)">
<option selected value="#">Vous recherchez une plante</option>
<option selected value="http://adresse url de la page 1 recherchée.html">Nom de la plante 1</option>
<option selected value="http://adresse url de la page 2 recherchée.html">Nom de la plante 2</option>
<option selected value="http://adresse url de la page 3 recherchée.html">Nom de la plante (n)</option>
<option selected value="#">Vous recherchez une plante</option>
</select>
</div>
</form>
Comment arriver directement à un endroit d'une page
Il faut créer une Ancre
Une ancre est un code html qui permet d'accéder directement à une endroit précis d'une page.
Exemple avec un renvoi vers l'expression " stress hydrique " du Glossaire du Jardinoscope.
Voici l'ancre en html:
<a name="stress"></a>
Vous pouvez y insérer le mot que vous souhaitez, sans caractère accentué et ni espace.
Mettez cette ancre en mode html dans le message à côté du mot (ou de la photo) - ici, juste avant l'expression"stress hydrique" - dont le lien est:
http://jardinmoisparmoi.canalblog.com/archives/2006/04/27/1778052.html
Pour accéder directement là où vous avez mis votre ancre, ajoutez le suffixe #stress à la fin du lien ci-dessus, ce qui donne:
http://jardinmoisparmoi.canalblog.com/archives/2006/04/27/1778052.html#stress
Résultat:
Le visiteur arrive directement sur le mot (ou la photo) concerné - ici " stress hydrique ". C'est très pratique lorsque vous avez une grande page et que vous souhaitez amener vos lecteurs à un endroit précis de cette page comme par exemple sur un mot dans un glossaire pour en trouver la définition.
Comment mettre en valeur un paragraphe
Utilisez la balise 'blockquote'
Pour mettre en valeur un paragraphe plus ou moins long (un point particulier, un remarque, etc...)
<blockquote>La balise BLOCKQUOTE permet de mettre en valeur un paragraphe en effectuant suivant les navigateurs les effets suivants:
- un décalage par rapport à la marge courante du document
- un retour à la ligne précédent et suivant le bloc de texte
- éventuellement différents autres styles (italique ...). </blockquote>
ce qui donne :
La balise BLOCKQUOTE permet de mettre en valeur un paragraphe (une citation par exemple) en effectuant suivant les navigateurs différents effets :
- un décalage par rapport à la marge courante du document
- un retour à la ligne précédent et suivant le bloc de texte
- éventuellement différents autres styles (italique, justifié ...).
Mais il vous faut ajouter dans la feuille de style générale (chemin: onglet "apparence", "éditer les fichiers de ce modèle) le code suivant:
blockquote {
border-left: 4px solid #FF0000;
margin: 1em 2;
padding: 5px 10px;
background: #00CC00;
width: 600px;
}
Ce code vous permet de définir l'épaisseur et la couleur du trait vertical gauche (border-left), la couleur de fond (background), le retrait par rapport à la marge (margin), la largeur du cadre (width), etc…
°°°0°°°
Utilisez la balise 'cite'
Pour mettre en valeur une citation courte il est préférable d'utiliser la balise 'cite' qui permet également de faire :
- un décalage par rapport à la marge courante du document
- un retour à la ligne précédent et suivant le bloc de texte
- Ecrire avec un style italique ...
Ce qui donne:
Pour mettre en valeur une citation courte, il est préférable d'utiliser la balise 'cite'…
ajouter dans la feuille de style générale (chemin: onglet "apparence", "éditer les fichiers de ce modèle) le code suivant:
cite {
border-left: 5px solid #3366FF;
margin: 25px;
padding: 5px 10px;
background: #CCFFFF;
width: 500px;
}
Ce code vous permet de définir l'épaisseur et la couleur du trait vertical gauche (border-left), la couleur de fond (background), le retrait par rapport à la marge (margin), la largeur du cadre (width), etc…
