Overblog Suivre ce blog
Administration Créer mon blog
1 juin 2016 3 01 /06 /juin /2016 20:09


Faire un joli texte en dégradé 
avec les couleurs de votre choix

 


1. Les dégradés de couleurs

Utiliser un dégradé de couleurs est un bon moyen pour embellir vos textes et faire ressortir un texte par rapport à un autre.


2. Code HTML pour les dégradés de couleurs

Vous savez déjà mettre de la couleurs sur vos texte.

Pour un petit rappel, allez voir l'article : Changer les couleurs des textes

2.1 Le principe du dégradé

Il va falloir cette fois changer la couleur :

* pour chaque lettre, si vous voulez utiliser un dégradé sur un mot,
* pour chaque mot, pour un dégradé dans une phrase.

s
2.2 La balise de couleur

La balise qui définit la couleur est COLOR, et vous devez choisir les couleurs que vous allez utiliser.

Pour cela, le plus simple est d'utiliser le petit outil publié ici : Définir le code HTML de ses couleurs préférées
puis notez les codes de couleurs que vous souhaitez.


2.3 Code HTML pour changer les couleurs sur un mot

* Devant chaque lettre, ajouter le code :

<span style="color: #993366;"> avec le code de la couleur choisie
Taper votre lettre puis ajouter
</span> pour fermer la balise.

* Répéter le code (avec une autre couleur) pour chaque lettre du mot.


2.4 Exemple de code complet avec changement de couleur pour chaque lettre

Le code :

<span style="color: #ff0000;">B</span><span style="color: #ff6600;">L</span><span>O<span style="color: #008000;">G</span>

vous donne :
                                     BLOG


2.4 Code HTML pour faire un dégradé sur une phrase

Le principe est le même, mais cette fois, vous changerez les couleurs pour chaque mot.

Le dégradé est plus joli si les couleurs choisies sont proches les unes des autres, et dans une même dominante de couleur, comme sur l'exemple en haut de cet article.

Pour un effet plus coloré, vous pouvez aussi utiliser des couleurs au contraire très différentes et qui tranchent beaucoup l'une à côté de l'autre, comme ci-dessous :

          DES COULEURS VIVES ET TRANCHANTES SONT BELLES AUSSI !


2.4.1 Codes complets de textes en dégradés de couleurs

* Code HTML de la première phrase de cet article :

<font color="#ff9999">F</font><font color="#f5959f">a</font><font color="#eb92a5">i</font><font color="#e28fac">u</font><font color="#d88cb2">r</font><font color="#cf89b8">e</font><font color="#c585bf"> </font><font color="#bc82c5">u</font><font color="#b27fcc">n</font><font color="#a87cd2"> </font><font color="#9f79d8">j</font><font color="#9575df">o</font><font color="#8c72e5">l</font><font color="#826feb">i</font><font color="#796cf2"> </font><font color="#6f69f8">t</font><font color="#6666ff"></font><font color="#6666ff">e</font><font color="#695ff8">x</font><font color="#6c58f1">t</font><font color="#7051ea">e</font><font color="#734ae3"> </font><font color="#7744dd">e</font><font color="#7a3dd6">n</font><font color="#7d36cf"> </font><font color="#812fc8">d</font><font color="#8428c1">é</font><font color="#8822bb">g</font><font color="#8b1bb4">r</font><font color="#8e14ad">a</font><font color="#920da6">d</font><font color="#95069f">é</font><font color="#990099"></font>

* Code HTML de la phrase colorée du chapitre 2.4


<span style="color: #00ccff;">DES</span> <span style="color: #993366;">COULEURS</span> <span style="color: #ff6600;">VIVES</span> <span style="color: #00ff00;">ET</span> <span style="color: #ff00ff;">TRANCHANTES</span> <span style="color: #0000ff;">SONT</span> <span style="color: #339966;">BELLES</span> <span style="color: #ff0000;">AUSSI</span> <span style="color: #800080;">!</span>
 


 

  * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Repost 0
Published by Aurelie - dans Les textes
commenter cet article
5 mai 2016 4 05 /05 /mai /2016 14:50

 

 
On trouve ce petit générateur sur CrazyProfile.
 
 
 
Comment réaliser votre message animé
 
Vous choisissez d'abord la couleur du stylo (PenColor)
 
La taille de la mine (PenSize)
 
Vous écrivez votre message (ou dessinez) sur le tableau.
 
Une photo à insérer : clic sur "Open"
 
Pour admirer votre chef d'oeuvre, un clic sur "Animate"
 
C'est loupé ? Clic sur Reset et on recommence.
 
Cette fois  c'est bon, clic sur "Code" pour récupérer le code HTML de votre message animé.
 
 
A lire aussi
 

 


 

  * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Repost 0
Published by Aurelie - dans Les textes
commenter cet article
24 mars 2016 4 24 /03 /mars /2016 14:52

 

 



Votre texte qui apparait avec un effet cercle. Joli non ?
 
 
Créer votre texte qui apparait/disparait avec un effet de cercle

Si vous voulez faire pareil, allez chez
CrazyProfile !

Taper votre texte (pas trop long, malheureusement !

Clic sur "Preview" pour voir le résultat.

Si cela vous convient, Clic sur GetCode et vous voilà avec votre code HTML.



Mettre votre texte avec effet sur votre blog

Vous obtenez le code HTML, que vous n'avez qu'à recopier, en mode avancé, bien-sûr !

A relire si vous ne savez pas comment faire :
html, c'est quoi ?
 

 


 

  * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Repost 0
Published by Aurelie - dans Les textes
commenter cet article
19 février 2016 5 19 /02 /février /2016 09:03
Pour éviter d'avoir des articles trop longs, il peut être utile de mettre certaines informations dans des ascenseurs. Le texte à mettre dans l'ascenseur doit être entouré d'un code HTML ; lire cet article pour savoir comment faire



1. Mettre du texte dans un ascenseur (Scrollbar)

Pour ne pas que votre article soit trop long, il peut être utile de placer une partie du texte dans un ascenseur, comme ci-dessus.



1.1 Code HTML

Le plus simple est de commencer par taper son texte "normalement", en édition basique, de choisir sa police, sa taille, sa couleur....

Une fois que votre texte est prêt, passer en mode HTML(Bouton HTML à gauche dans le menu de l'édition avancée sur Overblog).

Avant votre texte, ajouter :
<div style="height: 250px; width: 650px; overflow: auto;">

et après votre texte :
</div>



1.2 Paramétrages

Height représente la hauteur de votre ascenseur.
Width représente la largeur de l'ascenseur

  Attention : votre ascenseur n'apparaîtra que si le texte à l'intérieur "dépasse" de la taille définie.


1.3 Modifications ultérieures du texte.

Si vous avez besoin de corriger votre texte après l'avoir mis dans un ascenseur, il vous faut faire un Clic-droit pour retourner en mode édition et faire les modifications souihaitées. C'est un peu long et il est donc conseillé de corriger et mettre en forme le texte AVANT l'insertion dans l'ascenseur.


 


 

2. Exemple complet de code pour un texte dans un ascenseur

L'ascenseur en haut de cet article a le code suivant :


<span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 10pt;"><strong>
<div style="text-align: center;">
<div style="width: 300px; height: 50px; overflow: auto;">
<div style="text-align: left;"><span style="color: #ff6600;">Pour &eacute;viter d'avoir des articles trop longs, il peut &ecirc;tre utile de mettre certaines informations dans des ascenseurs. Le texte &agrave; mettre dans l'ascenseur doit &ecirc;tre entour&eacute; d'un code HTML ; lire cet article pour savoir comment faire</span></div>

 



Si vous avez besoin d'explications supplémentaires, déposez moi votre question en commentaire !
 

 

superstickies


 


 

  * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des jeux
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Repost 0
Published by Aurelie - dans Les textes
commenter cet article
10 février 2016 3 10 /02 /février /2016 18:29

 

 

 


 Allez, je vous fournis ici le code HTML de ce message "I love you" animé, qui provient de chez SpringWidget.

Je vous invite d'ailleurs à aller faire un tour chez eux, on y trouve plein de gadgets sympa !

 

Code HTML à recopier :

<!-- SpringWidgets | I love you comment (#74873) | HTML | Generated on 05/03/2010 --><object type="application/x-shockwave-flash" allowNetworking="all" allowScriptAccess="always" allowFullScreen="true" height="78" width="468" id="springwidgets_74873" align="middle" data="http://downloads.thespringbox.com/web/wrapper.php?file=74873.sbw" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="movie" value="http://downloads.thespringbox.com/web/wrapper.php?file=74873.sbw" /><param name="flashvars" value="" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgColor" value="0x000000" /><embed bgColor="0x000000" allowNetworking="all" allowFullScreen="true" allowScriptAccess="always" src="http://downloads.thespringbox.com/web/wrapper.php?file=74873.sbw" flashvars="" quality="high" name="springwidgets_74873" wmode="transparent" width="468" height="78" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object><div style="font:11px/12px arial;width:468px;"><a href="http://www.springwidgets.com/widgets/view/74873/?&width=468&height=78" target="_blank" title="Get this widget!">Get this widget!</a></div><div style="font:11px/12px arial;width:468px;"><a href="http://widgia.com" target="_blank" title="widgia.com">widgia.com</a></div><div><a href="http://widgia.com" target="_blank">More widgets here</a></div>

 


                                      Rendez-vous sur Hellocoton !                                                   





 

Repost 0
Published by Aurelie - dans Les textes
commenter cet article
5 février 2016 5 05 /02 /février /2016 18:30

 



Prenez-vous pour un journaliste avec le site Newspaper Clipping generator et fabriquez vous-même votre journal avec votre texte à la Une !


Tout se passe sur une seule page, avec 3 clics :

Vous donnez :

* un nom à votre journal,

* un nom à votre article

* vous tapez un texte

*et vous cliquez sur "Generate".

Votre journal s'affiche, il ne reste plus qu'à le sauvegarder sur votre ordi pour pouvoir l'insérer ensuite dans un article de votre blog !



 


 

  * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Repost 0
Published by Aurelie - dans Les textes
commenter cet article
10 janvier 2016 7 10 /01 /janvier /2016 18:38

    Your lightning message

 


 

Vous pouvez faire apparaître votre message dans un eclair en allant sur le site  http://www.glassgiant.com/lightning/

 


 

Votre message dans un éclair, les choix

 

Vous pouvez paramétrer :

 

- Le texte de votre message, bien sur. (Pour faire apparaitre un coeur, il suffit de taper @

- le fond (background) : 3 choix, la campagne, la ville ou l'océan

- la couleur de votre texte

- la taille de l'animation (full size pour un grand rectange;e ou small square pour un carré

- la vitesse de l'apparition des lettres (normal ou rapide)

 

 

Your lightning message

 


             

 


 

  * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Repost 0
Published by Aurelie - dans Les textes
commenter cet article
11 décembre 2014 4 11 /12 /décembre /2014 15:29

 

Faire un Blog

 


 

 

Votre texte défilante avec un effet apparation/Disparition

 

Un joli moyen de mettre en valeur un titre, une info !

 

 

Le code HTML du texte défilant avec apparition/disparition

 

* Copier le code suivant

 

<a href="http://www.crazyprofile.com/marquee_effects/Marqueeeffects.asp" target="_blank" style="text-decoration:none"><marquee behavior="alternate"><marquee width="150">VOTRE TEXTE</marquee></marquee></a>

 

* Remplacer VOTRE TEXTE par celui de votre choix

 

* Modifier si vous le souhaitez la taille, police, couleur...
       

 


 

  * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Repost 0
Published by Aurelie - dans Les textes
commenter cet article
1 août 2014 5 01 /08 /août /2014 16:08

 

 


 

 

Vous fabriquez votre panneau lumineux chez SpaceMisc et tout se fait en 2 clics !

 

 

 Comment générer son panneau lumineux avec texte défilant

 

* Vous allez chez SpaceMisc

 

* Vous tapez votre texte

 

* Vous choisissez la couleur

 

* Clic sur le bouton "Generate" :

 

Le système vous montre votre bandeau défilant et vous donne le code à recopier.

 

Comment mettre le panneau lumineux sur son blog

 

Vous copiez le code fourni, et le collez (mode avancé, bouton HTML) là où vous souhaitez le mettre.

A relire

 

html, c'est quoi ?

Faire défiler un texte

 Astuce pour écrire en langage HTML / édition avancée

 

 

 


 

  * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Repost 0
Published by Aurelie - dans Les textes
commenter cet article
16 juillet 2014 3 16 /07 /juillet /2014 08:25

Si vous voulez mettre de la couleur sur vos texte, il va vous falloir utiliser les codes couleurs dans votre HTML.


Les codes couleurs :

Ces codes peuvent se mettre de 2 façons différentes :

1. avec le sigle
# suivi de 3 ou 6 chiffres et/ou lettres

Exemples : #000000 est le noir ; #ffffff est le blanc.

Le choix est non limité, puisque vous définissez totalement la couleur utilisée. 
Vous trouvez
les codes ICI, dans le FAQ d'Overblog

2. avec le nom anglais de la couleur, mais il y a alors moins de choix.

Exemple : black pour le noir, white pour le blanc, blue pour le bleu...



La syntaxe :

Dans le code HTML:

vous utilisez color pour indiquer que vous définissez la couleur
vous faites suivre de 2 points (:)
puis votre code couleur (ou nom anglais de la couleur)

Exemple de syntaxe complète :

<span style="color: #339966;">METTRE DE LA COULEUR DANS SES TEXTES</span>

span indique que vous mettez une feuille de style
style indique que vous changez le style
color indique que vous définissez une couleur
#339966 indique votre couleur (vert foncé)

Cela vous donne :

METTRE DE LA COULEUR DANS SES TEXTES

 




 


 

  * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Repost 0
Published by Aurelie - dans Les textes
commenter cet article

Présentation

  • : Faire un blog
  • Faire un blog
  • : Ce blog vous aide à vous lancer pour faire votre blog : plateforme, mise en page, décoration, gadgets...
  • Contact

Vous Cherchez Quoi ?

Bienvenue !

 

PancarteSmiliz.pngCe blog a pour objet de vous aider à faire votre blog. C'est facile, et possible sans être informaticien !

J'ai 2 autres blogs très différents, et je souhaite mettre mon expérience à votre service. N'hésitez pas à me déposer vos commentaires et questioxxns. 
Si vous débutez, commencez par l' Index des articles , rubrique "Pour bien démarrer". 

 

Inscrivez votre site sur ma Top Liste et améliorez votre référencement.  

Mon logo sur votre site

Si j'ai contribué à l'amélioration de votre blog, merci d'y mettre mon logo :
Site Faire Un Blog

Code à coller :

<a href="http://faireunblog.over-blog.com/" target="_blank"><img height="65" width="85" src="http://sd-1.archive-host.com/membres/up/42016049459753927/PancarteSmiliz.png" alt="Site Faire Un Blog" /></a>

 

 

Date du jour

 

 

 

Géolocalisation

formation