Navigation dans le thème. Un sélecteur de Haut de Page/ Bas de page

03/10/2012 01:08

Lorsque nos pages de blog traînent en hauteur, il est pratique pour l'internaute de pouvoir se déplacer entre le haut de page (où souvent se trouve le menu principal) et le bas de page d'un seul click. L'objet du petit code si dessous à intégrer à votre thème via une petite modification simple de votre code HTML vous rendra ce service.

Vous pouvez voir en action ce petit sélecteur sur mon thème Sobre Theme.

1- A ajouter avant </HEAD> du HTML

<STYLE>
#upDownDiv {
        position: fixed;
        bottom: 0;
        right: 0;
        width:80px;height:64px;
        border:3px solid white;border-radius:6px;
        color:balck;
        background-color:#ccc;
        z-index:9000;
        /* transparence */
    			  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
				  filter: alpha(opacity=50);
				  -moz-opacity: 0.5;
				  -khtml-opacity: 0.5;
				  opacity: 0.5;
				  font-size:11px; font-weight:bolder;
    }
 </STYLE>

2- A ajouter juste après le <BODY> du HTML

 <a name="toppage"></a>
 <div id="upDownDiv">
		<!-- Aller vers le haut de page -->
 		<a href="#toppage" style="text-decoration:none;color:black;">
 				<div style="display:block;float:left;background:transparent url(http://icons.iconseeker.com/png/fullsize/web-development-3/arrow-top-sharp-thick.png) center left no-repeat;padding-top:32px;">
 					&nbsp;Haut
 				</div>
 		</a>
 		<!-- Aller vers le bas de page -->
 		<a href="#bottompage" style="text-decoration:none;color:black;">
 			<div style="display:block;float:right;background:transparent url(http://icons.iconseeker.com/png/fullsize/web-development-3/arrow-down-sharp-thick.png) center right no-repeat;padding-top:32px;">
 				&nbsp;Bas
 			</div>
 		</a>
 	</div>

3- A ajouter juste avant le </BODY> du HTML

 		<a name="bottompage"></a>