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 : Liens, listes, menus, curseurs - Tous blogs
Superbe effet pour ce menu tout en images.
Vous pouvez tester en survolant chaque image et cliquant sur dessus : un message d'alerte s'ouvre
ImageMenu
1ère étape :
Allez sur Phatfusion
Cliquez sur imagemenu.zip
Vous venez d'enregistrer un fichier .zip : il s'agit d'un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers.
2ème étape :
Toujours sur le site Phatfusion, cliquez maintenant sur mootools v1.11
Vous arrivez sur le site Mootools, où vous cliquez sur Download.
Vous cochez toutes les lignes. SI vous aimez faire des diaporamas, vous vous rendrez compte que vous aurez souvent besoin de ce fichier.
Vous recliquez sur Download.
Vous venez d'enregistrer le fichier mootools.js
3ème étape :
Dans l'administration de votre blog - Documents - Autres Fichiers :
Sur votre PC :
Dans l'administration de votre blog - Documents - Autres Fichiers - Imagemenu :
Vous remplacez en rouge par les adresses de vos fichiers, vous les avez noté dans la 5ème étape
Vous collez ensuite, toujours en HTML, ce pavé qui représente vos photos
En bleu, les adresses de vos liens qui apparaîtront dans le message d'alerte.
Et toujours en HTML
Vous pouvez tester en survolant chaque image et cliquant sur dessus : un message d'alerte s'ouvre
ImageMenu
1ère étape :
Allez sur Phatfusion
Cliquez sur imagemenu.zip
Vous venez d'enregistrer un fichier .zip : il s'agit d'un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers.
2ème étape :
Toujours sur le site Phatfusion, cliquez maintenant sur mootools v1.11
Vous arrivez sur le site Mootools, où vous cliquez sur Download.
Vous cochez toutes les lignes. SI vous aimez faire des diaporamas, vous vous rendrez compte que vous aurez souvent besoin de ce fichier.
Vous recliquez sur Download.
Vous venez d'enregistrer le fichier mootools.js
3ème étape :
Dans l'administration de votre blog - Documents - Autres Fichiers :
- vous créez un répertoire nommé Imagemenu :
- dans lequel vous créez un sous-répertoire nommé images
- dans lequel vous enregistrez les images qui composeront votre diaporama
- vous notez leur adresse
- dans lequel vous créez un sous-répertoire nommé images
Sur votre PC :
- vous ouvrez votre Bloc-Notes
- vous appelez le fichier imagesMenu.css
- vous modifiez les chemins des images (URL), vous les avez noté à la 3ème étape
- vous enregistrez sous le même nom
Dans l'administration de votre blog - Documents - Autres Fichiers - Imagemenu :
- vous créez un sous-répertoire nommé : css
- dans lequel vous enregistrez le fichier :
- ImageMenu.css
- dans lequel vous enregistrez le fichier :
- vous créez un sous-répertoire nommé : js
- dans lequel vous enregistrez les fichiers :
- imageMenu.js
- mootools-release-1.11.js
- dans lequel vous enregistrez les fichiers :
- vous notez les adresses de ces 3 fichiers
-
6ème étape :
Lors de la conception de votre menu, vous collez en HTML
<link href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imagemenu/css/imageMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imagemenu/js/mootools-release-1.11.js"></script>
<script type="text/javascript"
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imagemenu/js/imageMenu.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imagemenu/js/mootools-release-1.11.js"></script>
<script type="text/javascript"
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imagemenu/js/imageMenu.js"></script>
Vous remplacez en rouge par les adresses de vos fichiers, vous les avez noté dans la 5ème étape
Vous collez ensuite, toujours en HTML, ce pavé qui représente vos photos
<div id="imageMenu">
<ul>
<li class="landscapes"><a href="http://annak.over-blog.com/article-11838672.html">Landscapes</a></li>
<li class="people"><a href="http://annak.over-blog.com/article-19659105.html">People</a></li>
<li class="nature"><a href="http://annak.over-blog.com/article-11346926.html">Nature</a></li>
<li class="urban"><a href="http://annak.over-blog.com/article-10131710.html">Urban</a></li>
<li class="abstract"><a href="http://annak.over-blog.com/article-19386214.html">Abstract</a></li>
</ul>
</div>
<ul>
<li class="landscapes"><a href="http://annak.over-blog.com/article-11838672.html">Landscapes</a></li>
<li class="people"><a href="http://annak.over-blog.com/article-19659105.html">People</a></li>
<li class="nature"><a href="http://annak.over-blog.com/article-11346926.html">Nature</a></li>
<li class="urban"><a href="http://annak.over-blog.com/article-10131710.html">Urban</a></li>
<li class="abstract"><a href="http://annak.over-blog.com/article-19386214.html">Abstract</a></li>
</ul>
</div>
En bleu, les adresses de vos liens qui apparaîtront dans le message d'alerte.
Et toujours en HTML
<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
});
</script>
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
});
</script>
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 d'Hiver
Déco de Noël
Dernières Astuces
-
Design 35 - mauve - Fée - largeur fixe
Ce design est destiné aux débutants qui n'y connaissent pas grand chose ni en CSS, ni en logiciel...
-
Créer un couverture de magazine avec votre photo
Toujours dans le but de décorer son blog, un générateur de couvertures de magazine avec votre...
-
De la musique libre de droit sur Jamendo
Sur Jamendo, les artistes autorisent le partage de leur musique. C'est libre, légal et illimité....
-
Créer des encadrements sur les photos - FancyGens
Vous allez sur FANCYGENS Vous cliquez sur Browse pour chercher la photo sur votre PC, puis...
-
Un widget pour afficher vos fichiers pdf sur votre blog - Privilège
Allez sur PDFMENOT Vous avez la possibilité : soit de saisir l'adresse de votre...
-
Encadrer l'article des CGU
Il faut aller dans le CSS...
-
Placer la date devant le titre
Ainsi : On commence par la date. Vous allez dans le CSS et vous complétez la...
-
Design 34 - rouge et jaune - Lisa Simpson - largeur fixe
Ce design est destiné aux débutants qui n'y connaissent pas grand chose ni en CSS, ni en logiciel...
-
Créer un menu avec changement de fond au survol de la souris - Privilège
Allez sur GRSITES PREMIERE ETAPE : Créer votre menu Dénominations et URL des...
-
Afficher la liste des articles les plus lus du blog - Privilège
Le site est un peu long, mais le widget semble très sympa Allez sur Affiliatebrand....
Publicité
Coin Rencontre
Espace Connexion Internet
Achetez sur le Net!
| Articles les plus populaires | L'Univers des Ficelles |
|
|
Commentaires