Overblog Suivre ce blog
Administration Créer mon blog
17 mai 2012 4 17 /05 /mai /2012 10:47
Logo-Debutants.gif   Logogadgets.gif LogoPageHTML.gif  LogoPersonnalisation.gif   LogoImages.gif



Un index en images est une suite de petites images (ou vignettes) qui représentent les catégories de votre blog, et comportent un lien vers ces catégories.


 

1. Une représentation graphique de la structure de votre site


Présenter un index en images est un bon moyen de faciliter la navigation dans votre blog :

   * Des images sont plus attractives que du texte

   * Plus besoin pour vos visiteurs de rechercher des éventuels articles,

   * même si votre visiteur est venu via un article bien précis, il szera peut-être tenté d'aller en lire un autre grâce à votre index.


2. Faire un index en images

Pour faire un index en images, vous devez :

   * Tout d'abord vous faire des images qui vont représenter vos catégories.

   * Faire un tableau afin d'aligner ces images.

   * Créer un lien entre chaque image et l'article ou la page vers lequel il doit conduire


3. Ou placer un index en images ?

Il est possible de placer cet index à plusieurs endroits :

   . Dans la bannière : vous pouvez ajouter cet index à votre
bannière de blog
   Voir un
exemple d'index en bannière ICI

   . Vous pouvez mettre un index dans un module, comme sur ce blog, colonne de droite.

   . Vous pouvez mettre un index dans la page d'accueil de votre blog.  
     Voir un
exemple d'index en page d'accueil en cliquant ICI 


3. Le code HTML de votre index en image

3. 1 Code HTML d'un index en images :

<table border="0" cellspacing="2" cellpadding="3" align="center">

<tbody>

<tr>

<td><a href="url page liee 1"><img src="url vignette 1" alt="description vignette1" class="noAlign" /></a></td>

<td><a href="url page liee 2"><img src="url vignette 2" alt="description vignette 2" class="noAlign" /></a></td>

...

</tr>

</tbody>

</table>


3.2 Personnalisation du code HTML d'un index en images :

Border = x : mettre un chiffre > 0 pour avoir une bordure d'encadrement ; le cellspacing et cellpadding servent à ajustyer l'espacement dans et entre les cellules.
Il y aura autant de lignes commençant par <td> que de colonnes.
Pour chacune d'elles, mettre l'adresse url de la page vers laquelle la vignette va pointer, et l'adresse url de votre image



 

Articles pouvant vous interesser :  Mettre une image dans vos articles
  Comment faire un tableau (code HTML)
  Faire un lien avec une image
  Mettre des liens en texte




 

  * 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
6 avril 2012 5 06 /04 /avril /2012 09:26

Photo Fun



Insérez votre photo dans un oeuf de pâques et décorez votre blog avec !


 
Le site qui met votre photo dans un oeuf de pâques

On trouve cet oeuf, ainsi que 3 autres, sur le site
Dumpr et cela se fait en 3 clics.

- Vous chargez votre photo avec le bouton "parcourir"

. Vous sélectionnez l'un des 4 modèles d'oeuf puis clic sur "Continue"

- Voilà, votre oeuf est créé !!



Enregistrer votre oeuf de pâques pour votre blog

Inutile de vous inscrire sur leur site si vous ne le souhaitez pas !

Un clic suffit sur le bouton "Copy" en bas à droite de l'écran, et vous voilà avec le code HTML qui va insérer votre oeuf !

Vous copiez ensuite ce code chez vous !


A relire pour insérer du code HTML sur votre blog

http://faireunblog.over-blog.com/article-html-c-est-quoi--39086603.html

Photo Fun





 

  * 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
5 avril 2012 4 05 /04 /avril /2012 16:29

 

 

C'est bientôt  Pâques et je vous propose donc de décorer votre blog avec des oeufs en chocolat peints.

 

Voici le code HTML à copier dans votre article, votre profil, votre bannière...

 

 

<marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:120; top:50; width:35; height:450; z-index:645"><img src="http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:170; top:70; width:35; height:300; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="5" style="position:absolute;left:220; top:90; width:35; height:250; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="6" style="position:absolute; left:270; top:30; width:35; height:370; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="7" style="position:absolute; left:320; top:30; width:35; height:340; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:240; top:30; width:35; height:70; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:140; top:30; width:35; height:50; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:290; top:30; width:35; height:60; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<a href="
http://www.jellymuffin.com/generators/falling_objects/" target="_blank"">Myspace Falling Objects</a> @ JellyMuffin.com
<marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:100;top:130; width:35;height:80; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:360; top:30; width:35; height:330; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:390; top:50; width:35; height:400; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:440; top:70; width:35; height:300; z-index:600"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:470;top:100; width:35; height:300; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:560; top:70; width:35; height:300; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:590; top:100; width:35; height:300; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:520; top:170; width:35; height:300; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:610; top:200; width:35; height:300; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:650; top:250; width:35; height:340; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:690; top:290; width:35; height:380;z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:660; top:40; width:35; height:70; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:690; top:60; width:35; height:90; z-index:645"><img src="
http://i251.photobucket.com/albums/gg294/wafpaf/fallingobjects/images/easter5.gif"></marquee>
<a href="
http://www.jellymuffin.com/generators/falling_objects/"><img src="http://www.JellyMuffin.com/adsource/rightcorner.gif" alt="Myspace Layouts" style="position:absolute; left:0px; top: 0px;" border="0"></a>

 

A relire aussi : Le défilement avec la balise "Marquee"

et Faire tomber des objet sur votre article

 


 

  * 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
2 mars 2012 5 02 /03 /mars /2012 15:36
Une fois vos documents enregistrés chez votre hébergeur, vous devez connaître leur adresse URL afin de pouvoir les utiliser dans votre blog.

C'est quoi, l'URL ?

L'adresse URL (Uniform Resource Locator, ou Adresse universelle, en français) est l'adresse internet d'une ressource : photo, image, page internet...


Syntaxe de l'URL :

Son format est universel et se compose comme suit :

http://idata.over-blog.com/3/23/19/43/Divers/Banniere-cuisine-deco1_950-copie.jpg



  • "http://" est le nom du protocole utilisé pour transporter les informations sur le réseau. "http://" est généralement accompagné de "www" (World wide web) mais ce n'est pas indispensable
  • "idata.over-blog.com" est le nom de domaine
  • "/3/23/.../Divers" correspond au répertoire
  • "Banniere-cuisine-deco1_950-copie" est le nom de mon fichier
  • jpg est le format du fichier (html pour une page internet, gif ou jpeg pour une photo...)


2. Adresse URL des documents chez Over-blog

Après s'être connecté à son administration :null

* Aller sur "Documents",

 * Choisir le répertoire où se trouve votre document
(Images et photos, Vidéo, Autres documents)

* Cliquez sur la loupe en bas de votre document, et récupérer son adresse en haut de la fenetre qui vient de s'ouvrir.

* ou bien faire un Clic-droit puis choisir "copier le raccourci"



Il est préférable de copier/coller cette adresse pour l'utiliser dans votre code, plûtôt que de la taper, car une petite erreur de frappe est vite arrivée !



                                        

Rendez-vous sur Hellocoton !






Repost 0
Published by Aurelie - dans Les images
commenter cet article
22 juin 2011 3 22 /06 /juin /2011 13:50

 

Visionnez un extrait de film différent par jour !

 

Vous pouvez mettre cette visionneuse sur votre blog pour divertir et faire connaitre des films à vos visiteurs.

 

Le code de la visionneuse

 <div style="text-align: center; width: 100%;"><a href="http://www.widgiland.com/WidgetDetail.aspx?Gadcod=389" target="_blank"><img src="http://www.widgiland.com/Images/logodis.png" border="0" /></a> </div>
<p>
<script src="http://gmodules.com/ig/ifr?url=http://www.digitalpowered.info/gadget/movies.xml&amp;synd=open&amp;w=380&amp;h=440&amp;title=Movie+Trailers&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js" type="text/javascript"></script>
</p>

 

Limitations

 

Les blogs OB en mode confiance n'acceptent malheureusement pas cette visionneuse, car le code est en script !

 

 


 

  * 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
24 mai 2011 2 24 /05 /mai /2011 09:32

 

Love-maman5.png Love-maman1.png Love-maman3.png  Love-maman2.png  Love-maman4.png

 


 

 

Fête des mères

Je vous ai préparé ces petits stickers pour la fête des mères.


Comment utiliser les stickers pour la fête des mères "I love Maman"

 
Il suffit de positionner votre souris sur le sticker de votre choix.

 

Clic droit avec la souris et "enregistrer sous".

 

Ensuite, le sticker est sauvegardé sur votre ordinateur et vous le collez où vous voulez : dans un article de blog, dans un mail...

 

Si vous n'avez pas besoin de l'enregistrer et que vous voulez simplement l'utiliser : Clic droit, copier, puis coller !

 

A relire

 Votre carte postale animée "Bonne fête maman"

Fete des peres, les cartes et gifs sont ici !


 

  * 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
21 mai 2011 6 21 /05 /mai /2011 10:59

 

  Le code de cette carte postale :

<embed src="http://www.mycodesplace.com/text-pictures/show.swf?txt=Bonne%20fete%20maman%20%21&card=http://www.mycodesplace.com/text-pictures/cards/flowers/flower1.swf&clickURL=http://www.mycodesplace.com/text-pictures/&clickLABEL=Myspace Stuff&type=0&tc=16711680&tr=-13&ts=60&tx=-2&ty=102&glitter=1&rounded=1&bevel=0&sepia=0&shadow=1&theme=http://www.mycodesplace.com/text-pictures/themes/flower.swf&theme_al=61" quality="high" bgcolor="#ffffff" width="440" height="340" name="show" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/><br><a href="http://www.mycodesplace.com/text-pictures/">Myspace Stuff</a>

 


 

 

Ou fait-on des cartes postales animées

On fait ces cartes postales chez
MySpaceStuff et c'est très facile.

Vous choisissez votre carte postale, parmi un grand choix de thèmes :

- Amour, nouvel an, espace, cartoon, automne, aviation, fleurs, marrant.....


Personnalisation de votre carte postale animée

Après avoir cliqué sur votre carte, elle apparaît et vous trouvez à sa droite toute la partie pour la personnaliser :

Le texte à y ajouter,  Les effets: Paillette, ombrage, arrondi, sepia, ...

Vous ajoutez si vous le voulez un "thème", c'est à dire un objet qui tombe. La encore, le choix est vaste : coeurs, flocons, fruits, symboles, étoiles... 


Comment utiliser votre carte postale animée

Une fois que le résultat vous satisfait, un clic sur le bouton "Copy HTML code" et vous voilà avec un enregistrement de votre code, qu'il ne vous reste plus qu'à coller dans votre article.

A relire pour faire un article avec du code HTML :
HTML, c'est Quoi ?


En voici une autre, dont je vous donne directement le code HTML :

Code :

<embed src="http://www.mycodesplace.com/text-pictures/show.swf?txt=Maman&card=http://www.mycodesplace.com/text-pictures/cards/popular/popular16.swf&clickURL=http://www.mycodesplace.com/text-pictures/&clickLABEL=Myspace Stuff&type=0&tc=15985363&tr=-22&ts=82&tx=28&ty=165&glitter=1&rounded=0&bevel=0&sepia=0&shadow=1&theme=http://www.mycodesplace.com/text-pictures/themes/drop.swf&theme_al=48" quality="high" bgcolor="#ffffff" width="390" height="390" name="show" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/><br><a href="http://www.mycodesplace.com/text-pictures/">Myspace Stuff</a>



A lire aussi 

Des petits stickers pour la fête des mères

 Fete des peres, les cartes et gifs sont ici !


 

  * 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
27 juillet 2010 2 27 /07 /juillet /2010 08:43

 

Bonjour,

 

je vous propose aujourd'hui d'aller rendre visite à Melle Biotupp - Nessa pour savoir comment faire !

 

Son tuto est très bien expliqué et contient l'adresse du site avec l'outil pour faire cela !

 

Voici donc le tuto en question :

http://mademoiselle-biotupp.over-blog.com/article-tuto-reduire-gif-anime-rendre-transparent-54462663.html

 


 

  * 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
17 mars 2010 3 17 /03 /mars /2010 11:06

Australopitheque-copie-1.jpg


 
Comment seriez-vous si vous aviez vécu il y a 3.7 millions d'années ?

Un site propose de "déformer" votre photo, pour prendre l'apparence d'un homme/d'une femme des cavernes.



 
Comment vous transformer en Australopithèque ?

Vous allez sur
DevolveMe et vous choisissez une photo de vous, de face de préférence !

Inutile de prendre une photo où vous êtes à votre avantage, ça ne sert à rien !!!

Ensuite, vous ajustez le "masque" qui apparaît devant pour que les yeux, le nez et la bouche se superposent aux votres, puis, vous cliquer sur le bouton "Divolve me".


Votre évolution : animation de votre visage d'aujourd'hui vers vous en australopithèque

Vous vous voyez alors évoluer, ou plutôt, désévoluer, au fur et à mesure, jusqu'à atteindre un temps supposé être il y a environ 3.7 millions d'année. Vous pouvez à tiout moment arréter le curseur pour vous admirer...

Cette petite animation est très bien faite et je vous conseille vivement d'aller y faire un tour.


Envoyer cette animation à vos amis

Vous pouvez ensuite envoyer votre oeuvre d'art à un ami par mail, par exemple ! Gag assuré !!!




  * 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

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