Overblog Suivre ce blog
Administration Créer mon blog
13 mai 2014 2 13 /05 /mai /2014 09:15


null
1. Une signature animée et scintillante

Un site sympa et gratuit pour se faire sa signature scintillante : STCI



2. Comment faire sa signature animée

Ce site est bien-sur gratuit et ne nécessite pas d'enregistrement au préalable.

Il n'y a pas plus simple :null

* Vous taper votre nom

* Vous choisissez les différents paramètres :

. la police de caractère
. sa taille
. l'angle d'italique
. le contour
. l'effet de scintillement

....

et vous cliquez sur "Créer".

Vous voyez alors votre signature.

Si elle vous plaît, un petit clic-droit pour "enregistrer sous" et voilà votre fichier gif sauvegardé.




A vous de jouer !


 


 

                                      Rendez-vous sur Hellocoton !                                                   

 

 

Repost 0
Published by Aurelie - dans Gadget à blogs
commenter cet article
4 mai 2014 7 04 /05 /mai /2014 10:48




Logo de Faire un Blog
 


 
1. Réalisez facilement un petit diaporama défilant avec vos photos

Ce diaporama consiste à faire défiler vos photos, comme en haut de cet article.


2. Comment faire défiler vos images

2.1 Balise HTML

La balise
à utiliser est la balise "MARQUEE", la même que pour faire défiler vos textes.


2.2 Le code complet

Il suffit d'aller en édition avancée dans votre article, de passer en langage HTML, et d'inscrire le code suivant :


<MARQUEE scrollamount="4">

<IMG src="adresse de votre image1">
<IMG src="
adresse de votre image2
">
<IMG src="
adresse de votre image3
">
<IMG src="adresse de votre image....">
</MARQUEE>


en remplaçant "adresse de votre image" par vos adresses.

Scrollamount est la vitesse de défilement. Plus le chiffre est élevé, plus la vitesse l'est.

2.3 Les éventuelless informations à ajouter

Il est souvent nécessaire de modifier la taille de vos images afin qu'elles ne soient pas trop grandes.
Pour cela, ajouter

height="xx" width="xx"

juste après IMG pour chacune d'elles.

2.4 Les paramètres optionnels de défilement

 

Paramètre balise MARQUEE

Action

possibilités

Behavior Indique le type de défilement :  Scroll : mode par défaut
Alternate : alterné
Direction Indique la direction du défilement Left : gauche à droite
Right : droite à gauche 
Down : Bas
Up : Haut

Vous pouvez définir la plage
si vous utilisez Up et Down en ajoutant height="x" en nbre de pixels
OnmouseOut A utiliser avec celui du dessous, afin d'arrêter
le défilement au survol de la souris,
puis le reprendre.
Indiquer "this.start();"
OnMouseOver   Indiquer "this.stop();"



3. Code complet du défilement d'images ci-dessous

Défilement vertical, avec arrêt quand la souris passe au dessus.


<marquee scrollamount="5" direction="up" onmouseover="this.stop()" onmouseout="this.start()">&nbsp;<img height="180" width="200" src="http://idata.over-blog.com/2/07/78/33/Mes-photos/Mes-photos_1036_800x600.jpg" />
<br /><img height="180" width="200" src="
http://idata.over-blog.com/2/07/78/33/Mes-photos/Mes-photos_0158_800x600.jpg" /><br /><br/><img height="180" width="200" src="http://idata.over-blog.com/2/07/78/33/ToucheMonblogcarre.jpg" />
</marquee></p>

 

 




 


 

                                      Rendez-vous sur Hellocoton !                                                   

 

 

Repost 0
Published by Aurelie - dans Les images
commenter cet article
2 mai 2014 5 02 /05 /mai /2014 10:33
1. Un texte lisible
 
* des caractères pas trop petits,
* des polices de caractère .....
2. un affichage rapide Ne surchargez pas vos pages ...
3. Une bonne organisation Un article clair, pouvant ...
4. Une architecture simple
 
Vos visiteurs ne passeront pas de temps à ...
5. l'esthétique
 
L'esthétique est important ...



Vous avez vu que j'utilise assez souvent les tableaux quand je fournis des listes assez longues, avec des explications sur les éléments de la liste.

J'ai repris en haut de cet article un résumé du tableau paru dans l'article

"Les 5 règles d'Or pour construire votre site".

 


 

1. A quoi sert un tableau ?

1.1 Ranger ses informations

Mettre des informations sous forme de tableau est parfois utile si on souhaite qu'elles apparaissent clairement à nos visiteurs.
Elles sont alors "rangées" et plus faciles à lire

1.2 Avoir un visuel graphique, et pas seulement du texte

Cela permet d'avoir une représentation "graphique" et ordonnée de différents textes ou images relatifs à un même sujet.

1.3 Faire des alignements

Enfin, c'est un moyen simple de réaliser des alignements : En utilisant un tableau, vous mettez facilement 2 informations (ou 2 images) l'une à côté de l'autre, par exemple.
Dans ce cas, le tableau n'est qu'un support qui sera transparent (pas de bordure) et qui n'est utilisé que pour aligner vos données.
J'utilise ce procédé en bas de mes articles, pour aligner sur une même ligne le bouton de retour à l'index des articles et celui du vote pour l'article.


 


 

2. Construire un tableau

2.1 Balises HTML pour faire un tableau

La balise de définition d'un tableau est TABLE.

Il faudra donc "ouvrir" cette balise en début de code <table> et la refermer en fin de code
</table>


2.2 Paramétrer son tableau

la balise <th> définit la cellule d'en-tête d'un tableau
la balise <tr>sert à créer une ligne dans un tableau. Cette balise est encadrée par la balise <table>.
la balise <td>sert à créer une nouvelle cellule dans un tableau. Cette balise est encadrée par <tr>

l'argument border définit la taille de la bordure
la largeur est définie par width

 


 

3. Syntaxe complète d'un tableau

3.1 Code html

<table style="width: 300px;" border="1" align="center">
<tbody>
<tr>
<td><strong>Ligne 1 colonne 1</strong></td>
<td><strong>Ligne&nbsp;1 colonne 2</strong></td>
</tr>
<tr>
<td>Ligne 2 colonne 1</td>
<td>Ligne 2 colonne 2</td>
</tr>
</tbody>
</table>



3.2 Explications

<table Ouverture de la balise pour tableau
style="width: 300px;"largeur du tableau de 300 pixels
border="1" bordure épaisseur 1 pixel
align="center"> centrage du tableau et fermeture balise
<tr> <td><strong>Ligne 1 colonne 1</strong></td>  1ère ligne, avec texte en gras
<td><strong>Ligne&nbsp;1 colonne 2</strong></td> nouvelle cellule, donc seconde colonne
...
</table> fin du tableau



3.3 Visualisation du tableau

Ligne 1 colonne 1 Ligne 1 colonne 2
Ligne 2 colonne 1 Ligne 2 colonne 2


 



 

                               Rendez-vous sur Hellocoton !
Repost 0
30 avril 2014 3 30 /04 /avril /2014 09:39



Pour décorer et aérer vos articles, il est recommandé de mettre des images.

C'est aussi un moyen d'attirer vos visiteurs sur votre blog !

Pour cela, suivez la procédure :


1. HTML

Passer en mode HTML dans votre article


2. Syntaxe du code

 

<img height="xx" width="xx" src="Adresse de votre image"/>


height précise la hauteur, en pixels
width précise la largeur, en pixels

  Si vous ne précisez pas la taille, l'image sera insérée dans son format d'origine (Attention aux images trop grandes !)



3. Images animées

C'est le même code à utiliser pour insérer une image animée (gif)


4. Exemples :


Pour insérer cette photo (qui m'appartient je le précise, puisqu'il s'agit d'un souvenir de mes vacances en Corse, cet été), il faut taper le code :

<img height="75" width="100" src="
http://idata.over-blog.com/2/07/78/33//P1010755_corse800x600.jpg" />



Et pour celle-ci :

<img src="http://www.quigif.com/images_gifs/ordinateurs-et-equipement/pieces-d-ordinateur/Monitor_turns_on.gif"/>




 


 

  * 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 images
commenter cet article
28 avril 2014 1 28 /04 /avril /2014 08:58

Dynamic Animal Text Generator at TextSpace.net

 

 


 

 Ecrire avec une décoration d'animal d'afrique, c'est rigolo !

 

Ou créer son texte avec déco animaux

 

C'est ce que je vous propose de faire sur le site Textspace.com

 

 

Comment créer son texte décoré

 

Vous n'avez qu'à choisir la déco, taper votre texte.

 

Vous avez aussi certaines options comme l'alignement, l'ombrage...

 

Le résultat est directement visible avec le bouton "Make my text".

 

 

Comment récupérer le code HTML de votre texte animalier

 

Si cela vous convient, un clic sur le bouton "Get the codes" et voilà.

 

 

 

 

Dynamic Animal Text Generator at TextSpace.net

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
26 avril 2014 6 26 /04 /avril /2014 14:03

 

 


 

Le widget de tous les sports 

 

Ce widget à installer si vous aimez le sport et ses informations. Il est fourni par le site Sport24.com

 

 Comment utiliser le gadget ?

 

Il suffit de sélectionner le sport choisi dans le menu déroulant en haut à droite du widget sport.

 

Les infos s'affichent automatiquement

 

Pour installer ce test sur votre blog

 

Il suffit de recopier le code HTML ci-dessous :

 

<iframe src="http://widget.sport24.com/sport24/blog/sport24.html" frameborder="0" scrolling="no" width="100%" height="430"></iframe>

 

Article à relire

Widget Rolland garros 2012

 


 

  * 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 Gadget à blogs
commenter cet article
25 avril 2014 5 25 /04 /avril /2014 15:22


                                                                 English

 

1. Outil de traduction

Si vous avez la chance d'avoir des visiteurs des pays étrangers, il peut être utile d'ajouter un outil de traduction à votre blog.

Le principe est d'avoir un dessin (drapeau) qui, en cliquant dessus, redirige votre visiteur vers votre page traduite dans la langue choisie.

Si vous cliquez sur le drapeau ci-dessus, vous verrez cet article en anglais. L'outil de traduction utilisé est celui de Google.


2. Un drapeau animé pour obtenir une traduction

Si cet outil est utile, mieux vaut qu'il se voit !

C'est pourquoi je vous propose de le mettre dans votre blog sous la forme d'un drapeau animé, représentant la langue de traduction.

J'ai ici choisi l'Anglais, qui est la langue internationale de référence.

Si vous souhaitez obtenir un drapeau de traduction d'une autre langue, postez-moi un com sur cet article et je vous le donnerai avec plaisir !


3. Code HTML du drapeau Anglais pour les traductions

Le code à ajouter sur votre article, ou bien sur votre module, si vous souhaitez que l'outil fonctionne pour toutes vos pages, est le suivant :


<a onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Cen&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img src="http://www.quigif.com/images_gifs/drapeaux/usa/usa (4).gif" alt="English" title="Translate to English" style="cursor:pointer; cursor:hand;" /></a></div>
 

 

4. A lire aussi

Traducteur de page internet avec mini drapeaux

Drapeau belge de traducteur de page en néerlandais

 

 


  * 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
20 avril 2014 7 20 /04 /avril /2014 13:17

     

Le jeu "Orb eater"

Tu voles à bord d'un vaisseau spatial et l'objectif est de "manger" le plus de planetes possibles.

Le jeu se joue avec la souris uniquement. Il suffit de cibler les "orb" avec l'anneau de visée.

Code HTML pour installer le jeu sur ton site

:<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="700" height="600" id="orb-eater" align="middle">
 <param name="allowScriptAccess" value="always" />
 <param name="allowFullScreen" value="false" />
 <param name="movie" value="http://www.2dplay.com/orb-eater/orb-eater.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /> <embed src="http://www.2dplay.com/orb-eater/orb-eater.swf" quality="high" bgcolor="#000000" width="700" height="600" name="orb-eater" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>

 

 

 

* 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 !

 

 

A lire aussi

PacMan : jeu et code pour installer sur ton site

jeu de course de motos : motocross FMX

superstickies


 


 

Repost 0
Published by Aurelie - dans Jeux
commenter cet article
8 avril 2014 2 08 /04 /avril /2014 08:51

 

Certains d'entre vous m'ont demandé comment faire quand leur hébergeur de blog n'a plus d'espace dispo pour stocker nos images. Voici donc un site fait pour cela !


 

ImagUP.com proposes aux internautes d'héberger leurs images gratuitement sur ses serveur.

 

 

1. Comment utiliser ImagUP.com

- Comment uploader une image ?

 
Pour envoyer une image, vous devez cliquer sur 'Parcourir...', sélectionner l'image disponible sur votre ordinateur et de cliquer sur 'UPLOADER MON IMAGE !' pour lancer le upload.
Vous serez ensuite redirigé vers une nouvelle page avec toutes les informations sur votre image.


- Quel sont les images compatible ?

  
Poids de l'image : 4mo (4096ko) !
La taille de l'image : illimité !
Format d'image : Jpg, Jpeg, Gif, Png !


- Comment obtenir une galerie d'image ?

 
Il vous suffit de vous inscrire gratuitement et de uploader des images depuis votre galerie.


- Quel est la durée d'hébergement de mes image ?

 
La durée d'hébergement d'une images uploader de manière anonyme est garanti durant 2 mois. Si votre image a pour but d'être héberger à long termes, il est préférable de l'héberger dans votre galerie privée.

 

2. Comment installer le gadget d'ImagUp sur son site

 

Voilà le code ; d'autres sont à récupérer chez eux, rubrique "Webmaster"

 

<iframe src="http://www.imagup.com/module_upload_custom2.php" width="260" height="210" frameborder="0" scrolling="no" allowtransparency="true" ></iframe>


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 Petites astuces
commenter cet article
6 avril 2014 7 06 /04 /avril /2014 16:51
 

 

 


 

 

Code Javascript du synthétiseur

 

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('6d34d584-baf9-4ce5-812d-2703aca76bca');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/full-size-synth-piano">Full Size Synth Piano</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

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

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