Mettre un pourcentage sur la barre de défilement blogger

Installer un pourcentage sur la barre de défilement Blogger - Dans cette article je vais vous montrer comment installer la fonction de pourcentage sur la barre de défilement du blog. Peut-être avez-vous remarqué ce pourcentage sur d'autres blogs.

En réalité, le pourcentage de barres de défilement n'est pas un élément important pour un blog. Mais il n'y a rien de mal à essayer, et même dans ce cas, cela dépend de chaque goût.

En ajoutant ce pourcentage il va vous donner une jolie décoration du blog, en plus de ça les visiteurs pourront voir le pourcentage de pages défiler. Si cette valeur atteint le bas de la page, la valeur en pourcentage sera de 100%.

Comment le mettre en œuvre est assez simple, veuillez suivre les étapes suivantes:

1- Tout d'abord, copiez le code en bas et collez le juste au-dessus de la balise ]]></b:skin> ou </style>

CSS#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}

2- Ensuite, ajouter le code en bas après la balise </head>

HTML<div id='scroll'></div>

3- Ajouter le code ci-dessous juste au-dessus de la balise </body>

JS<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

4- Ensuite, enregistrer le modèle et afficher les résultats.

• Voir le résultat

Si vous avez suivez les étapes sans aucune faute, votre blog doit avoir un pourcentage à côté de la barre de défilement.

C'est facile, n'est-ce pas ? Félicitations !! au revoir et à bientôt !! 😊