Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

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

- Auteur : Brunofaisart

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

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>
 

Les commentaires...

comments powered by Disqus

Commentaires anciens formats...

Valentine 03/10/2012 01:08

Parfait, merci beaucoup Bruno!

Le resultat ici: http://keepcalmandstartcooking.overblog.com/

Nadine Quinn 30/08/2012 23:25

Merci Bruno

Alice 30/08/2012 17:49

Facilement intégré ! Et utile … je crois que je le garde !
Résultat à voir ici > http://aliceetlartdubonheur.overblog.com/ si vous voulez.
MERCI Bruno ! :-))
(Tu nous habitues mal avec tous ces "cadeaux" que tu nous fais chaque jour !)

Les 10 derniers Billets

Related Posts Plugin for WordPress, Blogger...