17 mai 2012
4
17
/05
/mai
/2012
10:47
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
Published by Aurelie
-
dans
Les images
6 avril 2012
5
06
/04
/avril
/2012
09:26
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
Published by Aurelie
-
dans
Les images
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
Published by Aurelie
-
dans
Les images
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 :
* 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 !
Published by Aurelie
-
dans
Les images
22 juin 2011
3
22
/06
/juin
/2011
13:50
Published by Aurelie
-
dans
Les images
24 mai 2011
2
24
/05
/mai
/2011
09:32
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 !
Published by Aurelie
-
dans
Les images
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 !
Published by Aurelie
-
dans
Les images
27 juillet 2010
2
27
/07
/juillet
/2010
08:43
Published by Aurelie
-
dans
Les images
17 mars 2010
3
17
/03
/mars
/2010
11:06
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é !!!
Published by Aurelie
-
dans
Les images
.gif)
Ce blog a pour objet de vous aider à faire votre blog. C'est
facile, et possible sans être informaticien !
