Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide
Lien pour comprendre pourquoi le contenu n'est pas sous hide
Tuto : Bottom & Up
Niveau : Facile / Exemple : Par là
Bonjour à tous, en ce jour d'été, je vais vous montrer comment placer les images/boutons/icônes haut et bas pour accéder directement en haut de la page ou en bas de la page. C'est une sorte de navigation rapide si vous préférez. Bref, sans plus attendre, je vais rentrer dans le vif du sujet.
Donc pour commencer, vous devrez vous rendre au Panneau d'Administration > Affichage > Templates > Général > overall_header !
Trouvez la fermeture de la balise "head" :
- Code:
</head>
Et juste après, vous trouverez l'ouverture de la balise "body".
Juste après l'ouverture de la balise body, collez-y juste, ce code :
- Code:
<div class="haut">
<a href="#top"><img src="http://i758.photobucket.com/albums/xx227/Cherryiis/PHA%20V10/UP.png" alt="RSS" style="border:none" /></a>
</div>
<div class="bas">
<a href="#bottom"><img src="http://i758.photobucket.com/albums/xx227/Cherryiis/PHA%20V10/DOWN.png" alt="RSS" style="border:none" /></a>
</div>
<!-- Script pour que le défilement vers le haut ou le bas soit fluide -->
<script src="http://milouze14.fr/M14smoothscroll.js" type="text/javascript"></script>
Donc nous allons étudier ce petit code. Donc en premier temps, on retrouve une classe nommé ''haut'' dans une div. Rien de très spéciale. Ensuite, on retrouve cette ligne de code :
- Code:
<a href="#top">
Puis nous retrouvons ceci :
- Code:
<img src="http://i758.photobucket.com/albums/xx227/Cherryiis/PHA%20V10/UP.png" alt="RSS" style="border:none" />
Bref, si nous allons un peu plus loin, la div se referme puis une nouvelle div s'ouvre cette fois avec comme classe '' bas ''. C'est le même principe que l'autre div. On retrouve une ancre qui mène directement au bottom, c'est-à-dire au bas de la page puis l'image que vous choisirez pour représenter le bouton ''bottom/bas'' dont vous pouvez changez.
À la toute fin, on retrouve un code java dont vous n'avez pas besoins de vous préoccuper.
Donc c'est tout pour le code html. Assurez-vous de bien enregistrer et de confirmer en cliquant sur le ''+'' en vert qui servira à publier.
Ce n'est pas encore fini. Nous allons maintenant nous diriger vers le CSS.
Donc cette fois, c'est Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS !
Collez une fois que vous y êtes ce code CSS :
- Code:
.haut{
position:fixed;
bottom:500px;
left:10px;}
.bas{
position:fixed;
bottom:460px;
left:10px;}
C'est tout. Si vous avez une quelconque question, n'hésitez pas à la dans la section "problème avec mon code".
Acnolir : Toute reproduction partielle ou complète est strictement interdite.
