Première étape :
Allez chez AndrewSellick
Cliquez sur Feel free to download the Simple 3D Carousel.
Vous venez d'enregistrer un fichier .zip. C'est un ensemble de fichiers compressés.
Pour décompresser ces fichiers, j'utilise Win RAR, Extraire vers
Deuxième étape :
Dans l'administration de votre blog - Documents - Mes fichiers :
- vous créez un répertoire Carroussel
- dans ce répertoire, vous enregistrez les fichiers : 3dcarroussel.js et mootools.js
Troisième étape :
En HTML, vous collez
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/carroussel/mootools.js" type="text/javascript"></script>
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/carroussel/3dcarousel.js" type="text/javascript"></script>
Si votre blog est sur Over-Blog, vous pouvez utiliser mes propres adresses de fichiers.
Vous collez ensuite
<style>Vous pouvez personnaliser le background, les dimensions, les bordures.
#carousel{background-color:#000000;width:700px;height:400px;position:relative;border:1px solid #FFFFFF;}
img{ width:100%;height:auto;border:0px solid #FFFFFF;display:block;}
</style>
Et pour finir, vous collez
<body>
<div id="carousel"> <div>
<a href="#"><img src="images/dreamweaver.png" /></a></div> <div>
<a href="#"><img src="images/director.png" /></a></div> <div>
<a href="#"><img src="images/flash.png" /></a></div> <div>
<a href="#"><img src="images/freehand.png" /></a></div> <div>
<a href="#"><img src="images/swf-player.png" /></a></div> <div>
<a href="#"><img src="images/coldfusion.png" /></a></div> </div>
</body>
Avec l'adresse de vos propres images (en rouge)
Bonjour Anna, merci pour ce tuto j'ai réussi a mettre ce carrousel dans mon blog (over blog) mais il est très grand.
RépondreSupprimerj'aimerais savoir comment changer la taille du carrousel. Ça doit être ds le fichier CSS mais j'ai pas trouvé.
merci de me renseigner
Bonjour Sunnydayz :) tu peut modifier les dimensions dans cette partie
RépondreSupprimer#carousel{background-color:#000000;width:700px;height:400px;position:relative;border:1px solid #FFFFFF;}
width est la largeur. Il faudra peut-être modifier la hauteur en conséquence : height
bonjour anna j'ai essayé ton tuto , mais ça a completement foiré j'ai eu super peur toutes les images de tout le blog sont devenues géantes !
RépondreSupprimerje voulais mettre le carousel pour mon pied de page avec mes ptits boutons de suivi; je sais pas ce qui c'est passé :-/
Bonjour Nessa :) normalement ce sont seulement les images placées dans l'id "carroussel" qui doivent changer. Je ne vois pas trop, désolée.
RépondreSupprimerJ'ai une question par rapport a ce carrousel.
RépondreSupprimerest ce qu'on peu mettre des lien sur chaque icône?
merci
Bonjour Sunnydayz :)
RépondreSupprimerJe n'ai pas testé, mais dans le dernier pavé, on peut constater qu'il y a des liens inactifs
< a href="#" >
Il suffit peut-être de la compléter
< a href="http://les-nouvelles-ficelles-d-annak.blogspot.com" >
Bonjour,
RépondreSupprimerje ne comprends pas ou l'on doit créer le répertoire Carousel.
'Dans l'administration de votre blog - Documents - Mes fichiers ' : ou cela se situe??