DéveloppementsFichiers XML

Le transporteur


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Description Gadget Gadget Version Template Version
Boite de navigation flottante Blogger contenant les liens de paginations vers les pages récentes, anciennes, accueil et haut/bas de page.
Blog
1
1
2
Pagination flottante pour Blogger
Eeeeh non, il ne s'agit pas du film avec Jason Statham, mais bien d'une adaptation "Bloggerienne" d'une boîte flottante pour Blogger contenant les liens de navigation vers les pages récentes, anciennes, accueil et haut/bas de page.


Pagination flottante pour Blogger


Le premier code HTML

Ce premier code permet d'ajouter les liens "haut" et "bas" dans l'inclusion de la pagination dans le gadget "blog".

<span id='blog-pager-top-link'>
  <a class='blog-pager-top-link' href='#' title='Haut de page'>
    Haut de page
  </a>
</span>
<span id='blog-pager-bottom-link'>
  <a class='blog-pager-bottom-link' href='#bottom' title='Bas de page'>
    Bas de page
  </a>
</span>


Où recopier ce code ?
Tableau de bord Modèle Modifier le code HTML

Déployez les sections suivantes :
<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'>...</b:widget>
<b:includable id='nextprev'>...</b:includable>

Dans l'inclusion "nextprev", recopiez le code juste après :
<div class='blog-pager' id='blog-pager'>


Le deuxième code HTML

Ce deuxième code permet d'ajouter simplement une ancre au pied du modèle.

<a name='bottom'/>


Où recopier ce code ?
Tableau de bord Modèle Modifier le code HTML

A la fin du code HTML, juste avant :
</body>


Le code CSS

Pour terminer, il faut mettre en forme. Paramétrez et recopiez les CSS ci-dessous.

Position de la boîte Placer à Distance : px
Placer en Distance px
Couleur d'arrière plan de la boîte #
Ombre de la boîte
Coins arrondis de la boîte px (60px pour un cercle)

#blog-pager {
  position: fixed;
  bottom: 10px;
  left: 10px;
  width: 120px;
  height: 120px;
  display: block;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #ccc;
  -moz-box-shadow: 1px 1px 3px #666666;
  -webkit-box-shadow: 1px 1px 3px #666666;
  box-shadow: 1px 1px 3px #666666;
  border-radius: 60px;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  z-index: 9;
}

#blog-pager  a {
  display: block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  text-indent: -99999px;
  position: absolute;
  padding: 5px;
}

a.blog-pager-top-link {
  background: url(https://lh5.googleusercontent.com/-hSHWhg9kGg0/T2MugFnRreI/AAAAAAAAHw8/Htfa78EMsoQ/s30/arrow_up2.png) no-repeat center center;
  top: 0px;
  left: 40px;
}

a.blog-pager-bottom-link {
  background: url(https://lh6.googleusercontent.com/-YBE6uU6Hs9A/T2Muc7lPfII/AAAAAAAAHw8/MEwsNC6GORY/s30/arrow_down2.png) no-repeat center center;
  top: 80px;
  left: 40px;
}

a.blog-pager-newer-link {
  background: url(https://lh3.googleusercontent.com/-x2iM_Ehd97o/T2Muc2KIN9I/AAAAAAAAHw8/NsKA5zQvepo/s30/arrow_left2.png) no-repeat center center;
  top: 40px;
  left: 0px;
}

a.blog-pager-older-link {
  background: url(https://lh4.googleusercontent.com/-yHMoNLjW5Eg/T2MudH-o1FI/AAAAAAAAHw8/kmXGiY_ztZI/s30/arrow_right2.png) no-repeat center center;
  top: 40px;
  left: 80px;
}

a.home-link {
  background: url(https://lh4.googleusercontent.com/-Ud-NZ0D_WgI/T2MvUcqLnXI/AAAAAAAAHw8/5aeH4DguMgc/s30/home.png) no-repeat center center;
  top: 40px;
  left: 40px;
}

.blog-mobile-link {
  display: none;
}


Où recopier les CSS ?
Tableau de bord Modèle Personnaliser Avancé Ajouter fichier CSS
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsMulti-versions
Facebook : Bouton J'aime [Like button]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire