Fixer la position d'un gadget sur la page

Fixer un gadget sur son blog consiste à le coller sur un emplacement précis de la page pour ne pas qu'il défile avec le reste des éléments lorsque vos visiteurs utilisent les ascenseurs (scrollbars) de leur navigateur.

Ceci est très utile lorsque vous souhaitez qu'un information importante soit constamment affichée à l'écran, ou qu'une fonction ou un lien soit constamment disponible, sans avoir à faire des aller-retours verticaux : lien de contact, abonnement au flux RSS, status twitter... les applications sont nombreuses selon vos besoins.

Nous allons prendre l'exemple d'un lien simple d'abonnement au flux RSS.Le principe est le même quelque soit l'utilisation que vous choisirez.

D'abord crée un gadget de type HTML/Javascript, de titre vide. Ajoutez le de préférence dans le pied de page de votre blog.

Dans le contenu, collez-le code ci-dessous :

<div id="bloc-fixe">
<a href="http://draft.blogger.com/feeds/posts/default?alt=rss">Abonnez-vous au flux RSS</a>
</div>

La première et la dernière ligne définisse simplement le bloc qu'on va positionner. Le contenu, ici le lien, est celui de votre choix.

Maintenant, il s'agit de positionner ce gadget de manière un peu particulière.

Dans le code de votre modèle, localisez la ligne

]]></b:skin>

Juste avant, recopiez le code suivant :

#bloc-fixe {
position:fixed;
bottom:0px;
right:10px;
}

Enregistrez, c'est terminé. Voilà maintenant le contenu du gadget qui reste collé en bas de page.

A vous de le positionner au mieux dans votre mise en page : en jouant sur les attributs top, bottom, right, left.

Exemple pour un élément collé en haut à droite de la page :

top:0px;
left:0px;

L'effet fonctionne avec Internet Explorer 8 et Firefox 3.5.