13 novembre 2010
Encadrer du texte
Copiez-collez le code suivant dans un message en Mode Html, placez votre texte comme indiqué :
<span style="border:1px solid white;">Ecrivez le texte à encadrer ici</span>
Résultat :
Ecrivez le texte à encadrer ici
Si vous voulez changer la couleur du cadre, rien de plus simple...
Vous remplacez White dans le code par Blue, Red ou encore Green...
Oh le joli cadre
<p><font style="border: 3px solid #00FFFF;">Oh le joli cadre <br /></font></p>
Un cadre turquoise avec un border de 3px
Un cadre avec un border de 1px
Pour que le cadre soit plus large, remplacez 1px par 2 ou 3 ....
Insérer une zone texte
C'est quoi encore ce truc !?
C'est un rectangle blanc ou pas d'ailleurs...qui permet de mettre du texte à l'intérieur.
Je vous entends d'ici...
Oui mais encore !?
Par exemple, vous voulez mettre les paroles d'une chanson dans un article, mais comme le texte est très long, il vous bouffe la moitié de votre page...et on est obligé de jouer de la molette pour passer à la suite...
Il est aussi très pratique pour coller des scripts dedans pour faire mes tuto, car les scripts et codes ne s'exécutent pas dans le formulaire !
Alors, comment ça marche !?
Comme d'habitude, vous copiez-collez le code suivant en écrivant votre texte comme indiqué :
<p><textarea rows="8" name="S1" cols="40" wrap="virtual" style="width: 90%;">Ecrivez votre texte ici</textarea></p>
Ce qui donne ça :
Petite précision, pour avoir un joli fond comme celui-ci vous devez ajouter un bloc dans votre feuille de style, et coller l'adresse de l'image de votre fond, comme ceci :
.blogbody textarea {
background-image: url("http://adressedel'imagedefond.jpg");
}
Sinon, le cadre sera blanc par défaut...
Pour changer la hauteur modifiez rows="8" et pour la longueur cols="40"
Lorsque le message est très long, une barre de défilement se place automatiquement sur la droite...
Vous pouvez aussi changer le fond et la couleur de la police etc...
<form><textarea rows="5" cols="20" style="background:#707070" style="font-family:arial" style="color:#000000" "style="border style: solid">Placez votre texte ici</textarea></form>
Ce qui donne ça :
Changer la police du texte
Dans un message, vous pouvez choisir quelques polices (dans la barre d'outils sur la gauche), mais votre police préférée n'est pas dans la liste c'est embêtant.
Tapez votre texte comme d'habitude puis sélectionnez-le dans le menu déroulant choisissez une police au hasard, puis passez votre message en mode Html, vous obtenez ceci :
<p><font face="Arial">Votre texte ici</font></p>
Il ne vous reste plus qu'à remplacer la police nommée Arial par le nom de la police que vous souhaitez.
Comme ceci : <p><font face="Elephant">Votre texte ici</font></p>
Ce qui donne ça :
Votre texte ici
Dans vos pages Html (page d'accueil, pages des archives etc...) le principe est le même, récupérez les balises <font face="Arial"></font>et placez votre texte au milieu...
Créer une phrase rebondissante
Il suffit de copier-coller le code suivant dans un message en mode Html, d'écrire votre texte entre les balises comme ci-dessous :
<marquee bgcolor="#000000" behavior="alternate"<p><font color="#00FFFF"><face="century gothic">Ecrivez votre texte ici</font></font></p></marquee>
Pour changer la couleur du fond remplacez #000000 par un autre code couleur.
Pour changer la couleur du texte remplacez #00FFFF
Vous pouvez également modifier la police et ajouter la balise <strong></strong> pour mettre le texte en gras.
Voici une autre version avec fond transparent et la possibilité de changer la taille du texte :
<marquee
behavior="alternate"><p><font size="6" face="century
gothic"><font color="#00FFFF">Les tuto 2
Demolite</font></font></p></marquee>
Faire défiler du texte
Il suffit de copier-coller le code suivant dans un message en mode Html et de remplacer Ici par votre texte.
<marquee><p><font color="#00FFFF"><font size="3" face="century gothic">Ecrivez votre texte ici</font></font></p></marquee>
Pour changer la couleur du texte remplacez le code couleur #00FFFF
Pour revenir à la ligne et espacer votre texte du reste de votre message, ajouter <p> à la fin du code.
Mettre une phrase cachée dans ses articles
Passez votre souris sur la phrase en dessous et cliquez dessus pour voir le petit poisson ;)
Cette phrase est en fait un lien...
Voici comment une phrase peut en cacher une autre...
Si vous entrez une adresse (url) dans le code ci-dessous bien sur, sinon ça reste une phrase cachée.
Ouvrez un Nouveau message, passez le en Mode html
Vous devez copier-coller le code ci-dessous puis insérer votre texte dedans.
<a href="Adresse-de-l'image-ou-du-site"
onmouseover="document.getElementById?this.style.color='#cc0000':
null;document.getElementById?this.innerHTML='phrase2':null" onmouseout="document.getElementById?this.style.color='#cc0000':null;
document.getElementById?this.innerHTML='phrase1':null" style="color:
rgb(204, 0, 0);">phrase1</a>
Alors...décryptons un peu tout ça :
En bleu vous l'aurez compris, c'est l'endroit où vous devez coller l'url de votre image ou bien l'adresse du site vers lequel vous voulez diriger vos visiteurs, ne mettez rien si vous n'avez rien à mettre.
En blanc ce sont les codes couleurs pour vos phrases 1 et 2, vous pouvez les changer pour donner un effet sympa en fonction de la couleur de votre blog.
La phrase 1 est celle qui est visible et la phrase 2 celle cachée.
En jaune, c'est le code couleur de votre phrase 1 à l'ouverture du blog, avant de passer la souris dessus, un fois que vous avez passez la souris sur la phrase, cette couleur ne réapparait plus.
L'astuce et de mettre le même code couleur que pour la phrase 1.
Vous remarquerez que ce code couleur est différent des autres rgb(204, 0, 0); pour le changer collez à la place du code un code comme celui là : #FFFFFF
Voilà...j'espère que c'est clair...
Ah ! j'allais oublier le plus important !!!!
Vos phrases 1 et 2 ne doivent comporter aucune apostrophe, car ça fait un conflit avec le code qui en contient déjà.
Si vous voulez écrire "c'est la fête" comme phrase, vous devez laisser un espace comme ceci : "c est la fête"
Si vous vous retrouvez avec un message d'erreur au moment ou vous repassez un mode texte c'est que vous avez oubliez cette consigne...
Ou vous pouvez aussi faire comme ceci :
Ajouter un back slash (\) devant le ou les apostrophes ce qui dira au code de l'ignorer.
Ex: "C\'est un test" ou encore "C\'est un test avec d\'autres apostrophes"
Merci à Wahzaboy pour cette astuce.
Changer la couleur des liens
Pour donner un peu de relief à vos messages, vous pouvez ponctuellement changer la couleur de vos liens et leur donner une couleur différente à chacun.
Rien de plus simple...
Sélectionnez le texte à transformer en lien, donnez lui une couleur puis cliquez sur l'icône lien comme d'habitude.
Pour changer la couleur des liens que vous ajoutez manuellement dans vos page Html, voilà comment faire...
Copiez-collez ce code en prenant soin de changer l'adresse internet, le titre et les codes couleurs.
<a href="http://lestuto2demolite.canalblog.com/"><font onmouseout="this.style.color='#00FF00'" onmouseover="this.style.color='#FFFFFF'">Les tuto 2 Demolite</font></a>
Le premier code couleur correspond au lien à la lecture du message.
Le deuxième code couleur correspond au changement de couleur du lien au passage de la souris.
Changer la couleur du texte au passage de la souris
Tout est dans le titre...ce petit code donnera un petit effet sympa à vos messages...
Copiez-collez le code suivant dans votre message en Mode Html , écrivez votre texte entre les balises puis changez les codes couleur.
<font onmouseover="this.style.color='#00FFFF'" onmouseout="this.style.color='#FFFFFF'">Votre texte ici...</font>
Ce qui donne ça...sympa non ?
Mode standard et Mode avancé
Je viens de recevoir un mail d'une personne qui pense que par-ce qu'elle est passée en Mode avancé elle ne peut plus changer ses blocs de colonne...(Hérésie !)
Je crois que c'est tout l'inverse ma p'tite dame...
Effectivement la ligne suivante n'est plus disponible...
Maintenant vous avez celle-ci à la place (avec le titre que vous lui avez donné) :
Alors, pas de panique...cliquez sur Editer les fichiers de ce modèle et voici ce qui apparait :
Miracle ! ou Horrrreur !?
Vous êtes sur la Page d'accueil Html de votre blog...
Ce qui veut dire que désormais...tout est permis (ou presque !)
C'est ici que vous devez ajouter des scripts comme une horloge par exemple, ou encore couper/coller un bloc de code qui correspond à votre Album photo et le faire passer dans l'autre colonne...
Mais si vous n'avez aucune notion en Html...vous devez vous demander où peut bien se trouver la colonne de droite et celle de gauche dans tout ce charabia !?
Allez faire un tour sur ce tuto, où vous trouverez tous les blocs de la pages d'accueil (sachant que ce sont les même blocs sur les autres pages) je viens de mettre à jour la liste des blocs, car entre temps Canalblog a ajouté des nouveautés comme la Newsletter et d'autres trucs...
Ensuite Allez sur celui là pour changer un bloc de colonne...
Voici également la feuille de style générale (qui remplace le "Style" du monde standard) où vous pouvez changer toute la déco, les couleurs, la bannière, le fond d'écran etc...de votre blog et laisser votre créativité s'exprimer ;)
Vous voilà équipez pour démarrer le big relooking !
Changer un bloc de colonne
Vous avez placé dans les colonnes les blocs Derniers messages, Album photo et ça ne vous convient pas...vous voulez les changer colonne...pas de problème !
Ouvrez votre Page d'accueil et repérez le bloc de codes suivant, si vous voulez changer l'album photo :
<div class="title">Albums photos</div>
<ul>
<CBAlbum>
<li><a href="<$BlogAlbumURL$>"><img
src="<$BlogAlbumCoverURL$>" width="75" height="75"
alt="<$BlogAlbumTitle$>" /></a><br /><a
href="<$BlogAlbumURL$>"><$BlogAlbumTitle$></a></li>
</CBAlbum>
</ul>
Ou bien Derniers messages tous les blocs commencent par :
<div class="title">titre du bloc</div>
et se terminent par </ul>
Comme sur la capture ci-dessous.
Celui-ci correspond à l'album photo, il suffit de le couper-coller (Couper puis coller) à l'endroit où vous voulez qu'ils apparaissent.
Pour repérer les colonnes dans la Page d'accueil, il suffit de trouver la ligne de code suivante pour la colonne de droite :
Tout ce qui se trouve en dessous est dans votre colonne de droite, donc si vous collez un bloc de code sous cette ligne, il apparaitra dans la colonne de droite.
Pour le faire apparaitre dans la colonne de gauche, il faut repérer la ligne <body> en haut de votre page d'accueil, ou page des archives etc...
qui se termine comme ceci :
Tout ce qui se trouve en dessous est dans votre colonne de droite, donc si vous collez un bloc de code sous cette ligne, il apparaitra dans la colonne de droite.
Tout ce qui se trouve sous cette ligne de code correspond au corps du message c'est le content.
Bon j'espère que c'est clair, car au début c'est pas évident de se repérer dans tous ces codes, mais ça va venir...
« 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
