DéveloppementsFichiers XML

Le transporteur


Suite à l'arrivée des Thèmes de la 3e génération, les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes ou qui ne conviennent pas à votre nouveau thème !
Pour vous aider a développer votre thème, référez-vous :En cas de besoin, exposez votre cas sur le forum.
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
Assistance publique pour le produit Blogger sur les supports  d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • 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

ThéorieRéférences XMLTypes des variables d'habillage
Variables d'habillage - Les valeurs automatisées [automatic]
Populaire
ThéorieFonctionnalitésGestion
Populaire
DéveloppementsFichiers XML
Populaire
ThéorieFonctionnalitésContenu
Populaire
DéveloppementsFichiers XML
Populaire