Les Ficelles d'Anna K. - Aide et astuces pour créer et personnaliser un blog
| Accueil | Publication | Flux RSS | Accès Mobile | Newsletter | Recommander | Contact |
|
|
Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :
publié dans : Tous Blogs - Effets d'Images et diaporamas
Un slideshow facile à réaliser : les photos s'agrandissent au survol de la souris.
Première étape :
Allez chez Hoverbox
Cliquez sur Hoverbox: Download Here (280 KB)
Vous venez de télécharger un fichier .zip : un ensemble de fichiers compressés.
Pour les décompresser, j'utilise WinRAR - extraire vers.
Les 2 fichiers qui nous intéressent sont : hoverbox.css et ie_fixes.css
Deuxième étape :
Pour que le rendu soit bon sur OverBlog, j'ai dû ouvrir le fichier hoverbox.css dans mon bloc-note et effacer le background, le padding et le width dans la ligne body.
body {background: #fff; color: #777;margin: 0 auto; padding: 50px; position: relative;width: 620px;}
Elle a maintenant cet aspect :
body{color: #777; margin: 0 auto; position: relative;}
Troisième étape :
En Confiance : j'héberge ces fichiers sur ArchiveHost et je note les adresses
En Privilège et Premium : Dans mon administration - documents - autres fichiers :
Lorsque je place les images, en mode source, je colle
En rouge, les adresses des images
En bleu, les adresses des fichiers
Première étape :
Allez chez Hoverbox
Cliquez sur Hoverbox: Download Here (280 KB)
Vous venez de télécharger un fichier .zip : un ensemble de fichiers compressés.
Pour les décompresser, j'utilise WinRAR - extraire vers.
Les 2 fichiers qui nous intéressent sont : hoverbox.css et ie_fixes.css
Deuxième étape :
Pour que le rendu soit bon sur OverBlog, j'ai dû ouvrir le fichier hoverbox.css dans mon bloc-note et effacer le background, le padding et le width dans la ligne body.
body {background: #fff; color: #777;margin: 0 auto; padding: 50px; position: relative;width: 620px;}
Elle a maintenant cet aspect :
body{color: #777; margin: 0 auto; position: relative;}
Troisième étape :
En Confiance : j'héberge ces fichiers sur ArchiveHost et je note les adresses
En Privilège et Premium : Dans mon administration - documents - autres fichiers :
- j'ai créé un répertoire hoverbox
- dans lequel j'ai enregistré :
- hoverbox.css
- ie_fixes.css
- je note les adresse de ces fichiers
Lorsque je place les images, en mode source, je colle
<div class="hoverbox" style="margin-left: 2em;">
<ul>
<li><a href="#"><img alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo01.jpg" /><img class="preview" alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo01.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo02.jpg" /><img class="preview" alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo02.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo03.jpg" /><img class="preview" alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo03.jpg" /></a></li>
</ul>
<!--[if IE]>
<link rel="stylesheet" href='http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/css/ie_fixes.css' type="text/css" media="screen, projection" />
<![endif]--></div>
<link media="screen, projection" type="text/css" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/css/hoverbox.css" rel="stylesheet" />
<ul>
<li><a href="#"><img alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo01.jpg" /><img class="preview" alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo01.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo02.jpg" /><img class="preview" alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo02.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo03.jpg" /><img class="preview" alt="description" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/img/photo03.jpg" /></a></li>
</ul>
<!--[if IE]>
<link rel="stylesheet" href='http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/css/ie_fixes.css' type="text/css" media="screen, projection" />
<![endif]--></div>
<link media="screen, projection" type="text/css" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/hoverbox/css/hoverbox.css" rel="stylesheet" />
En rouge, les adresses des images
En bleu, les adresses des fichiers
Commentaires
Coucou Anna K, c'est un peu compliqué pour moi tout ça mais ce n'est pas grave.
Je suis très intrigué par ton commentaire et je me demande de quelle manière j'ai pu te donner l'idée d'un concours.
Bon dimanche et gros bisous,
Je suis très intrigué par ton commentaire et je me demande de quelle manière j'ai pu te donner l'idée d'un concours.
Bon dimanche et gros bisous,
commentaire n° : 2 posté par : Muad' Dib 
(site web) le: 16/03/2008 10:23:07
(site web) le: 16/03/2008 10:23:07 Suspens...je vais trouver le temps de le créer, je te préviendrai :)
réponse de : Anna K (site web) le: 16/03/2008 17:44:20
Juste pour te dire que J’ai été contactée par IDFM Radio Enghien 98FM, 1ère libre antenne la nuit,dans le cadre de l'emission "le mammouth bleu" et serai « on air » le 24 mars prochain à……………………………….5h du matin pour moi , afin de parler de la vie en Egypte en général ! ! http://idfm98.free.fr/index10.php
Bonne fin de dimanche et BiZouX du pays de Râ !@nne marie
Félicitations Anne-marie :)
réponse de : Anna K (site web) le: 18/03/2008 10:19:39
Encore et toujours chez toi, à la recherche de quelques astuces , merci et bon lundi , il fait beau à Marseille .Alain
commentaire n° : 4 posté par : ALAIN JULIEN (site web) le: 17/03/2008 15:52:13
Publicité
Présentation
: Les ficelles d Anna K.
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
Recherche Rapide Sur le Site
Sommaires
Déco Halloween
Déco Automne
Dernières Astuces
-
Privilège - Afficher une liste de tags - Jiglu
Jiglu s'installe sur votre site afin de créer automatiquement des balises intelligentes et des...
-
Créer une bannière avec des images de Flickr
Un générateur sans prétention, mais qui peut animer vos articles. Il s'agit de...
-
Design 32 - Orange - Halloween - largeur fixe
Ce design est destiné aux débutants qui n'y connaissent pas grand chose ni en CSS, ni en logiciel...
-
Privilège - Créer des infobulles avec Prototip
Une infobulle est une bulle explicative qui apparaît au survol d'un mot. Je vous préviens,...
-
Privilège - S'inscrire à Google Analytics
Vous vous êtes inscrit à Google SitMaps, vous pouvez maintenant profiter des fonctions de Google...
-
Ajouter un bouton avec flux RSS sur votre blog
Sur Over-Blog, vous avez déjà le module Syndication qui peut-être utilisé pour communiquer vos...
-
Privilège - Ajouter un outil de recherche sur votre blog - Rollyo
Rollyo vous offre la possibilité de rechercher le contenu d'une liste définie de sites Web, vous...
-
Localiser vos visiteurs
Un nouveau service pour localiser vos visiteurs : GLOBETRACKR Inscrivez-vous, en cliquant...
-
Design 28 - Beige nounours - largeur fixe
Ce design est destiné aux débutants qui n'y connaissent pas grand chose ni en CSS, ni en logiciel...
-
Privilège - Installer une icône avec le nombre de liens Technorati
Technorati recense tous les liens qui pointent vers votre blog. Vous copiez ce code en...
Commentaires
-
14/10/2008 10:38:13Design 37 - Beige - Parchemin - largeur fixepetite fleur
-
14/10/2008 10:18:02Design 37 - Beige - Parchemin - largeur fixepetite fleur
-
14/10/2008 07:33:32V2 - Récapitulatif : changer les puces du module Articles récentsBoobalechat
-
13/10/2008 17:09:07Créer une bannière avec des images de Flickrmamy annick
-
13/10/2008 14:36:25Créer une bannière avec des images de Flickr@nne marie
Publicité
Coin Rencontre
Espace Connexion Internet
Achetez sur le Net!
| Les Ficelles sur votre blog | L'Univers des Ficelles | Utilitaires |
|
Passe un bon dimanche en famille gros bisous :)