Comment ajouter les boutons haut et bas utilisant JQuery dans blogger


Les touches Haut et Bas permettent de naviguer vers le haut et le bas de la page, surtout quand sur la page principale, il ya beaucoup d'articles ou quand un article a trop de commentaires. Ces boutons ont un effet fadeIn et fadeOut, ce qui signifie qu'ils se fanent légèrement quand nous faites défiler vers le haut ou le bas de la page et, en outre, ont pour fonction de monter / descendre le blog.
Exemple :


Alors ! comment on vas ajouter les bouttons ?

Etape1 : Aller au modèle, cliquez sur le bouton Modifier le code HTML puis Cocher la case Développez

Modèles Widget .

Etape 2 : Rechercher le Code Suivant :


]]>


et Juste au-dessus de ce code, collez celui-ci:


/* Up and Down Buttons with jQuery www.ledotnet.com
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Fz8Fg00z5DOKiCZCRZzcEoZ16l_fhqZRGvxrxCx99PpJWRArdWEubEp6ENRuEtYSX2aRM5GsSv3haLx7VMWdnZhf8pwU2JCrZqgY4mhwuOxIyAE8G1QjtInyqPYhPzRCqfulMYCkfiA/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisS5HKoKvrIU1_Kr15V6WZjLX2h7YNWuBGxSfMpzLtNoTkOJwxwH_J5mlYZwCIlMoUabW8PMYRbK0VVfw14eyKcC1vgE_eIlgshgXoO1NNimA0P44m9iwhtsP8f6El2jjCb9nnRH3i7Xk/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}



L'etape suivant est de chercher la balise:






et Juste au-dessus de ce code, collez celui-ci:





Enfin , enregistrer votre Template.

Post a Comment

Previous Post Next Post