05 décembre 2010
Smileys + barre d'outils dans les commentaires en mode standard
Allez sur l'onglet Contenu puis dans Liens d'amis et collez dans la première case le script suivant :
<script type="text/javascript" src="http://contes-de-web.fr/js/emcomcb.js"></script>
Dans la deuxième case vous n'êtes pas obligés de mettre une adresse email, car Alérion a déjà renseigné le lien dans le fichier js, qui renvoie sur son tuto.
Mais rien de vous empêche de modifier le fichier et de mettre une autre adresse ou aucune si vous le souhaitez.
Choisissez ensuite une catégorie : Code par exemple pour que le script ne soit pas mélangé avec vos autres liens.
Puis Validez.
Pour que ça marche, vous devez avoir le bloc des liens sur votre blog, si ce n'est pas le cas allez dans Apparences puis cliquez sur Blocs pour pouvoir l'ajouter puis valider en bas de page.
Si vous êtes en mode avancé et que vous voulez également installer les smileys et la barre d'outils, vous devez ouvrir votre Page d'un message (inutile sur les autres pages) et ajouter dans une colonne le bloc de codes suivants : (Qui permet l'affichage de liens).
<BloggerFriendLinks><BlogFriendLinkHeader>
<div class="title"><$BlogFriendLinkCategoryName<div class="title"><$BlogFriendLinkCategoryName<div class="title"><$BlogFriendLinkCategoryName<div class="title"><$BlogFriendLinkCategoryName$></div>
gt;</div>
gt;</div>
<ul>
</BlogFriendLinkHeader>
<li><a href="<$BlogFriendLinkURL$>"><$BlogFriendLinkName$></a></li>
<BlogFriendLinkFooter>
</ul>
</BlogFriendLinkFooter> </BloggerFriendLinks>
Voilà, vos commentaires possèdent maintenant des smileys et aussi une barre d'outils qui permet de mettre le texte en forme.
Allez chez Alérion pour voir ce que ça donne, tout en bas de page.
Maintenant pour les patients et aussi les courageux...vous pouvez modifier le fichier Js (http://contes-de-web.fr/js/emcomcb.js) ce qui vous permettra de changer les images, les couleurs et mettre tout ça à votre sauce.
Pour plus de détails sur comment modifier un fichier js, allez voir ce tuto.
Pour le fonctionnement de la barre d'outils, faites comme ceci :
Pour mettre votre texte en couleur, l'agrandir ou le surligner, sélectionnez-le puis cliquez sur le menu déroulant pour choisir la couleur ou la taille et ensuite cliquez sur les icônes :
Votre texte apparait en direct dans la fenêtre de visualisation.
Merci à Alérion...c'est du super boulot !
Ecrire sur un papier à lettre dans un article
Voici comment écrire un article sur un papier à lettre ou sur une image c'est comme vous voulez...
J'en profite pour partager avec vous cette très belle chanson de Pauline Croze...
T'es beau,
T'es beau parce que t'es courageux,
De regarder dans le fond des yeux,
Celui qui te défie d'être heureux.
T'es beau,
T'es beau comme un cri silencieux,
Vaillant comme un métal précieux,
Qui se bat pour guérir de ses bleus.
C'est comme une rengaine,
Quelques notes en peine,
Qui forcent mon cœur,
Qui forcent ma joie,
Quand je pense a toi,
A présent.
J'ai beau,
J'ai beau me dire qu'au fond c'est mieux,
Même si c'est encore douloureux,
Je n'ai pas de recoin silencieux.
C'est beau,
C'est beau parce que c'est orageux,
Avec ce temps je connais peu,
Les mots qui trainent au coin de mes yeux.
C'est comme une rengaine,
Quelques notes en peine,
Qui forcent mon cœur,
Qui forcent ma joie
Quand je pense à toi,
Toi qui sors de scène,
Sans armes et sans haine,
J'ai peur d'oublier,
J'ai peur d'accepter,
J'ai peur des vivants,
A présent.
T'es beau...
A Laurent qui nous a quitté
Le 23 juillet 2006
Voici le code à copier-coller dans un Nouveau message en mode Html :
<p style="border: 1px solid rgb(0, 0, 0); margin: 0%; padding: 0px; font-family: georgia; font-size: 120%; background-image: url(http://storage.canalblog.com/69/27/794548/59667973.jpg); text-indent: 0px;"><font color="#ffffff">Votre texte ici</font></p>
Vous pouvez ajouter une balise pour changer la couleur de votre texte comme indiqué en vert.
<p style="border: 1px solid rgb(0, 0, 0); margin: 0%; padding: 0px; font-family: georgia; font-size: 120%; background-image: url(http://storage.canalblog.com/40/49/794548/59666596.jpg) no-repeat 0% 0%; text-indent: 0px;"><font color="#ffffff">T'es beau,<br />T'es beau parce que t'es courageux,<br />De regarder dans le fond des yeux,<br />Celui qui te défie d'être heureux.<br />T'es beau,<br />T'es beau comme un cri silencieux,<br />Vaillant comme un métal précieux,<br />Qui se bat pour guérir de ses bleus.<br />C'est comme une rengaine,<br />Quelques notes en peine,<br />Qui forcent mon cœur,<br />Qui forcent ma joie,<br />Quand je pense a toi,<br />A présent.<br />J'ai beau,<br />J'ai beau me dire qu'au fond c'est mieux,<br />Même si c'est encore douloureux,<br />Je n'ai pas de recoin silencieux.<br />C'est beau,<br />C'est beau parce que c'est orageux,<br />Avec ce temps je connais peu,<br />Les mots qui trainent au coin de mes yeux.<br />C'est comme une rengaine,<br />Quelques notes en peine,<br />Qui forcent mon cœur,<br />Qui forcent ma joie<br />Quand je pense à toi,<br />Toi qui sors de scène,<br />Sans armes et sans haine,<br />J'ai peur d'oublier,<br />J'ai peur d'accepter,<br />J'ai peur des vivants,<br />A présent.<br />T'es beau...</font></p>
Vous pouvez modifier l'encadrement avec le border : 1px et sa couleur en remplacent rgb(0,0,0) par #00FF00
La police en modifiant font-family: georgia
La couleur de la police font color="#ffffff"
Pour changer l'image de fond en remplaçant l'adresse de l'image en place.
Vous pouvez également jouer avec les marges margin: 0% padding: 0px
Votre image se répète automatiquement sur la longueur, en fonction de la longueur de vote texte.
Si votre message est court, choisissez une image plus petite.
Si votre image est petite et que votre texte est long, l'image se répètera sur la hauteur et la largeur.
à vous de voir, le plus esthétique.
Vous pouvez également ajouter de la musique en collant le script d'un player au même endroit que votre texte et surement un tas d'autre chose, ne n'ai pas tout essayé...
Attention : Vous devez valider votre article en mode html.
Mettre une vidéo dans un article
Commencer par aller sur Dailymotion, sur Google vidéo ou encore sur Youtube...
Une fois que vous avez choisi votre vidéo, copiez le code qui se trouve en général sous la vidéo ou à côté :
<object
width="700" height="418"><param name="movie"
value="http://www.youtube.com/v/sJ1KOqkJBhM?fs=1&hl=fr_FR&color1=0x006699&color2=0x54abd6"></param><param
name="allowFullScreen" value="true"></param><param
name="allowscriptaccess" value="always"></param><embed
src="http://www.youtube.com/v/sJ1KOqkJBhM?fs=1&hl=fr_FR&color1=0x006699&color2=0x54abd6"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="700"
height="418"></embed></object>
Vous ne pouvez pas le rater...
Ensuite passez votre message en mode Htlm puis collez le script dans le message.
Repassez votre message en mode texte en cliquant sur la même icône < >
Vous remarquerez que votre vidéo n'apparaît pas...
Cliquez sur Poster & publier.
Et hop...votre vidéo est sur votre blog !
Sur Youtube ça se présente comme ça :
En cliquant sur intégrer vous pouvez copier le script, choisir une couleur pour le cadre de la vidéo et aussi sa taille.
Rien ne vous empêche de choisir des dimensions personnalisées, en changeant les valeurs de "700" height="418".
Pour enlever les liens sous la vidéo, vous pouvez supprimer tout ce qui se trouve avant la balise <embed...> et après la balise </embed>
Pour être plus claire vous n'avez besoin que de ce qui se trouve entre les balise <embed...> </embed>.
Musique non stop
Mettre un player sur son blog c'est sympa, mais dès que l'on clique sur un lien, une nouvelle page se charge et Exit la musique !
Voici comment contourner cela...
Dans un premier temps vous devez créer votre ou vos Playlists sur Deezer...une fois fait, récupérez le script en sélectionnant le code, clic droit puis copier.
Vous n'êtes pas obligés de copier le code entier, ce qui nous intéresse se trouve entre les balises <embed.... et </embed> le reste n'est pas utile !
Ouvrez un Bloc-notes et sur la première ligne mettez la balise <html> et en dessous la balise <body> puis la balise qui permet de choisir la couleur du fond de page <body bgcolor="#000000"> avec le code couleur que vous voulez mettre.
Comme ceci :
En créant cette page la première fois, je me suis aperçue que si on
écrivait du texte directement, certains caractères ne sont pas pris en
compte et remplacés par des carrés noirs ou des ?
Pour contourner ce problème, j'écris mon texte dans Photofiltre et je colle l'adresse de l'image qui contient mon texte.
*Voir en bas de tuto pour solutionner ce problème.
Pour cela, il suffit d'ouvrir une page (Nouveau) dans Photofiltre, d'écrire dedans sur un fond de la même couleur que celui que vous avez choisi pour votre page musicale, d'enregistrer sous et d'importer l'image dans un message pour récupérer l'adresse.
Il suffit ensuite de coller l'adresse au bon endroit dans le bloc-notes et le tour est joué !
Un fois que vous avez collé votre image qui contient le texte, vous devez coller le script de votre Player Deezer à la ligne en laissant un espace avec votre texte en mettant la balise <br>
Pour que les Players soient côte à côte mais pas collé les uns au autres, vous devez coller les scripts les uns à la suite des autres en laissant juste un espace (avec la barre d'espace)
ça donne ça :
<embed.....le script 1.........</embed> <embed.....le script 2.........</embed> <embed.....le script 3.........</embed>
Vous devez ajouter les balises <center> </center> au début et à la fin.
Comme ceci :
<center><embed.....le script 1.......</embed> <embed.....le script 2.......</embed> <embed.....le script 3.......</embed></center>
Pour remettre un texte sous les Players, faites comme pour le premier texte, collez l'adresse de l'image qui contient votre texte sous la ligne des Players en laissant un espace avec une balise <br>
Fermez votre page avec les balise </body> et </html> comme sur la capture :
Faites maintenant Fichier / Enregistrer sous entrez un nom pour votre fichier Player Deezer par exemple et ajoutez à la suite .html
Comme ceci :
Cliquez sur Enregistrer.
Vous obtenez ça :
Avec Explorer vous aurez le même fichier avec e d'explorer...
Double cliquez sur le fichier, il va s'ouvrir dans votre navigateur internet et vous pourrez voir si vous avez bien travaillé ou si il y a des retouches à faire...
Wahou...trop la classe !
Bon...si c'est tout bizarre et décalé, c'est que vous avez oublié une balise par ci par là...
C'est pas bien grave, faites un clic droit sur votre fichier Player Deezer et choisissez Ouvrir avec puis Bloc-notes votre page html va s'ouvrir et vous pourrez la modifier.
Une fois que votre page est nickel...vous devez importer votre fichier dans un message en passant par Insertion d'un fichier et récupérer l'adresse html.
Vous devez coller cette adresse dans le code ci-dessous, qui s'affichera comme un bouton dans une de vos colonnes.
<a href="Adresse du Player Deezer" target="_blank"><img src="Adresse de votre image"></a>
Vous pouvez mettre juste un lien comme ceci :
<a href="Adresse du Player Deezer" target="_blank">Ma Sélection musicale</a>
*Je rajoute ce lien, car je viens de trouver comment faire pour avoir une page web avec tous les caractères pris en charge...Allez voir ce tuto, en bas de page vous trouverez comment enregistrer votre Bloc-notes.
Mettre de la musique à l'ouverture de votre blog
Commencez par récupérer l'adresse d'un Mp3...ça ressemble à ça :
http://fivestardance.com/sounds/05_-_Gotan_Project_-_Santa_Maria_Del_Buen_Ayre_.mp3
Pour héberger un titre MP3 et récupérer son adresse allez voir ce tuto...ou pour récupérer l'adresse d'un Mp3 allez ici !
Une fois que vous avez votre titre top moumoute, collez l'adresse de votre mp3 comme indiqué dans le code ci-dessous en bleu :
<BGSOUND SRC="http://adrese.mp3"LOOP="-1"><object type="audio/mpeg" data="http://adrese.mp3">
<param name="filename"value="http://adrese.mp3"><param name="autostart" value="true">
<param name="loop" value="true"></object>
A coller dans la page de votre choix...ça marche sur toutes les pages...Juste après la balise </body>
Tout en bas de page.
Validez et le tour est joué !
Note :
Avec Internet Explorer, si Loop est égal à -1 le morceau passe en boucle.
<BGSOUND SRC="Adresse du mp3"LOOP="-1">
Pour que le morceau ne passe qu'une seule fois mettez "1" à la place de "-1"
L'autre partie du code concerne le navigateur Firefox, la musique passe en boucle automatiquement.
<object type="audio/mpeg" data="http://adrese.mp3">
<param name="filename"value="http://adrese.mp3"><param name="autostart" value="true">
<param name="loop" value="true"></object>
En collant les 2 parties de codes à la suite, la musique marche avec les 2 navigateurs.
Choisissez un morceau assez court, car sinon le chargement de la page est ralenti.
04 décembre 2010
Mettre de la musique dans un article ou à l'ouverture de votre blog
Vous connaissez surement Quick time...si vous ne l'avez pas encore, téléchargez le Ici, il vous sera très utile pour écouter toutes les musiques du web.
Pour mettre dans un article de la musique Mp3 qui démarre automatiquement à l'ouverture de l'article ou de la page...
Copiez le code suivant et collez le dans votre Nouveau message en mode Html et collez l'adresse de votre Mp3.
<embed type="audio/mpeg" src="Adresse.mp3"></embed>
Pour que la musique démarre seulement si vos visiteurs cliquent sur le bouton play :
<embed loop="false" autostart="none" type="audio/mpeg" src="Adresse.mp3"></embed>
Pour que le lecteur soit invisible et que la musique démarre automatiquement :
<embed hidden="true" loop="false" autostart="true" src="Adresse.mp3"></embed>
Pour avoir la musique qui démarre à l'ouverture de votre blog, collez le code ci-dessus après la balise </body> dans votre page d'accueil.
Si vous êtes en mode standard vous pouvez mettre le script dans un message en mode html, ça marche aussi, par contre votre message doit rester en première page car la musique se lance au démarrage de la page ou se trouve le script...à vous de ruser.
Les balises : Les tableaux
- <TABLE>
- Les balises <TABLE> et </TABLE> entourent un tableau. La balise TABLE admet plusieurs attributs.
- BORDER=taille
L'attribut BORDER permet de fixer la taille en pixels des lignes qui délimitent les cellules du tableau. Si cette taille est 0, ces lignes ne sont pas affichées.- WIDTH=taille
L'attribut WIDTH permet de fixer la largeur du tableau en pixels ou en pourcentage de la largeur disponible.- ALIGN="alignement"
L'attribut ALIGN permet de définir l'alignement du tableau dans la largeur de l'espace disponible. Les valeurs possibles sont LEFT, CENTER et RIGHT.- CELLSPACING=taille
L'attribut CELLSPACING permet de définir en pixels l'espace de séparation des cellules.- CELLPADDING=taille
L'attribut CELLPADDING permet de définir en pixels l'espace séparant le bord des cellules de leur contenu. - BORDER=taille
- <TR>
- Les balises <TR> et </TR> délimitent les cellules d'une même ligne d'un tableau.
- <TD>
- Les balises <TD> et </TD> entourent chaque cellule d'un tableau. Chaque cellule du tableau peut contenir des paragraphes, des listes, des images ou d'autres tableaux.
<table border=1 cellpadding=3 cellspacing=1>
<tr>
<td>Cellule L1C1</td>
<td>Cellule L1C2</td>
<td>Cellule L1C3</td>
</tr>
<tr>
<td>Cellule L2C1</td>
<td>Cellule L2C2</td>
<td>Cellule L3C3</td>
</tr>
</table>
Résultat :
| Cellule L1C1 | Cellule L1C2 | Cellule L1C3 |
| Cellule L2C1 | Cellule L2C2 | Cellule L3C3 |
- La balise <TD> admet plusieurs arguments.
- WIDTH=taille
L'argument WIDTH permet de définir la largeur de la cellule en pixels ou en pourcentage de la largeur du tableau.- BGCOLOR="couleur"
L'attribut BGCOLOR permet de définir la couleur de fond de la cellule.- VALIGN="alignement"
L'attribut VALIGN permet de définir l'alignement vertical dans la cellule. Les valeurs possibles sont TOP, MIDDLE et BOTTOM.- COLSPAN=nombre
L'attribut COLSPAN permet de définir le nombre de colonnes de tableau que devra occuper la cellule.- ROWSPAN=nombre
L'attribut ROWSPAN permet de définir le nombre de lignes de tableau que devra occuper la cellule. - WIDTH=taille
<table border=1 cellpadding=3 cellspacing=1>
<tr>
<td colspan=3>J'occupe les 3 colonnes.</td>
</tr>
<tr>
<td width=70 rowspan=2>Sur deux lignes</td>
<td>Cellule simple</td>
<td>Cellule simple</td>
</tr>
<tr>
<td>Cellule simple</td>
<td>Cellule simple</td>
</tr>
</table>
Résultat :
| J'occupe les 3 colonnes. | ||
| Sur deux lignes | Cellule simple | Cellule simple |
| Cellule simple | Cellule simple | |
- <TH>
- Les balises <TH> et </TH> peuvent être utilisées pour délimiter les cellules de la première ligne ou de la première colonne d'un tableau. Ces cellules sont alors considérées comme des titres de colonnes ou de lignes.
Quelques liens qui en disent plus :
http://www.lissaexplains.com/french/table.html
http://webby.free.fr/html/tableaux.html
http://webghusse.free.fr/cours_html/xhtml/tab.html
Les balises : Les listes
<LI>
Les balises <LI> et </LI> permettent de définir un élément d'une liste à puces ou d'une liste numérotée.
<LI> élément de liste </LI>
Résultat :
- élément de liste
<OL>
Les balises <OL> et </OL> permettent de définir une liste numérotée.
<ol>
<li>élément 1 de la liste</li>
<li>élément 2 de la liste</li>
<li>élément 3 de la liste</li>
</ol>
Résultat :
1. élément 1 de la liste
2. élément 2 de la liste
3. élément 3 de la liste
<UL>
Les balises <UL> et </UL> permettent de définir une liste à puces.
<ul>
<li>élément 1 de la liste</li>
<li>élément 2 de la liste</li>
<li>élément 3 de la liste</li>
</ul>
Résultat :
- élément 1 de la liste
- élément 2 de la liste
- élément 3 de la liste
<DL>, <DT> et <DD>
Ces
balises permettent d'écrire un glossaire. Les balises <DL> et
</DL> entourent la structure. Les balises <DT> et
</DT> entourent un terme à définir. Les balises <DD> et
</DD> entourent la définition.
<dl>
<dt>Terme 1 à définir</dt>
<dd>Voici la définition pour le terme 1</dd>
<dt>Terme 2 à définir</dt>
<dd>Voici la définition pour le terme 2</dd>
</dl>
Résultat :
Terme 1 à définir
Voici la définition pour le terme 1
Terme 2 à définir
Voici la définition pour le terme 2
Les balises : Le texte
<B>
Les balises <B> et </B> permettent d'écrire un texte en gras.
<b>texte en gras</b>
Résultat :
texte en gras
<BIG>
Les balises <BIG> et </BIG> permettent d'écrire un texte avec une police plus grande.
<big>texte plus grand</big>
Résultat :
texte plus grand
<FONT>
Les balises <FONT> et </FONT> permettent de définir la taille et la couleur du texte. La balise FONT doit être accompagnée d'attributs spécifiques. COLOR="couleur"
L'attribut COLOR permet de définir la couleur du texte.
<font color=green>texte en vert</font>
Résultat :
texte en vert
SIZE="taille"
L'attribut permet de définir la taille des caractères, de façon absolue (de 1 à 7) ou relative.
<font size=5>texte de taille 5</font><br>
<font size=+1>texte de taille augmentée de 1</font><br>
<font size=-1>texte de taille diminuée de 1</font><br>
Résultat :
texte de taille 5
texte de taille
augmentée de 1
texte de taille
diminuée de 1
<I>
Les balises <I> et </I> permettent d'écrire un texte en italique.
<i>texte en italique</i>
Résultat :
texte en italique
<SMALL>
Les balises <SMALL> et </SMALL> permettent d'écrire un texte avec une police plus petite.
<small>texte plus petit</small>
Résultat :
texte plus petit
<U>
Les balises <U> et </U> permettent d'écrire un texte souligné.
<u>texte souligné</u>
Résultat :
texte souligné
Les balises : Les images
- <IMG>
- La balise <IMG> permet d'insérer une image au format GIF ou JPG dans un document.
- Elle nécessite l'utilisation d'un certain nombre d'arguments.
- SRC="nom_fichier" ou "Adresse de l'image"
Cet attribut est indispensable : il indique le nom du fichier image à afficher.
<img src="Adresse image demolite.gif">
Résultat :
BORDER=taille
Cet attribut permet de définir la taille de la bordure de l'image en pixels. La valeur 0 correspond à l'absence de bordure.
<img src="Adresse image demolite.gif" border=3>
Résultat :
WIDTH=largeur HEIGHT=hauteur
Ces deux attributs permettent de préciser la taille de l'image. En ne donnant qu'un seul de ces attributs on conserve les proportions.
<img src="Adresse image demolite.gif" width=100 height=50>
<img src="Adresse image demolite.gif" width=100>
Résultat :
ALT="texte"
Cet attribut permet de définir un texte à afficher si l'image n'est pas disponible ou lorsque le pointeur de la souris s'arrête sur elle.(ne marche pas avec tous les navigateurs)
<img src="Adresse image demolite.gif" alt="Mon araignée préférée">
Résultat :
ALIGN="alignement"
Cet attribut permet de définir la façon dont la légende de l'image doit s'afficher. Les valeurs possibles pour "alignement" sont TOP, MIDDLE, et BOTTOM. La légende se termine par <P>.
<img src="Adresse image demolite.gif" align=middle>Légende au milieu.<p>
Résultat :
Légende au milieu de l'image.
« Accueil 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
