Blogger Themes


Libellés : ,

Comment ajouter le bouton "Haut de page" de Tumblr



Cette fois, nous allons vous montrer un autre Gadget qui va vous apprendre comment ajouter un bouton "Haut de page" qui est similaire à la conception de bouton Tumblr.
  • De votre Blogger Tableau de bord, allez sur la page Modèle.
  • Cliquez sur le Modifier le code HTML et puis appuyez sur le bouton Continuer .
  • Utiliser Ctrl + F ,  et cherchez le <head> tag.
  • Copiez / collez cette ligne de code ci-dessus ou avant celui-ci.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

  • Utiliser Ctrl + F une deuxième fois, et rechercher ]]></b:skin> ensuite copiez / collez le code CSS suivant devant lui.


#scroll-top {
 background-color: #777777;
 border-radius: 24px;
 box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8) inset;
 color: #FFFFFF;
 cursor: pointer;
 display: block;
 font-family: Verdana;
 font-size: 2em;
 font-weight: bold;
 line-height: 2em;
 text-align: center;
 text-decoration: none;
 position:fixed;
 width: 48px; 
 height: 48px;
 bottom:30px; 
 right:20px;
 opacity:0.85;
 transition:opacity 0.25s ease 0s;
}

#scroll-top:hover{
 opacity: 1;
 color: #FFFFFF;
}

Pour que le bouton soit bien intégré et correspondant à votre theme et couleur du blog, n'oubliez pas de modifier les valeurs des attributs CSS suivantes: Background-color , color , font-family , font-size et line-height . Les trois derniers attributs déterminent l'apparition du symbole caret (^). Vous pouvez également régler border-radius au cas où vous souhaitez modifier la courbure des coins arrondis de la place.
  • Enfin, pour ajouter la fonctionnalité de la touche, on ajoute le code JavaScript suivant dans le code HTML. Utiliser Ctrl + F encore une fois, chercher la balise </body> tag et collez le code suivant.

<script type='text/javascript'>
$(function() {
 $.fn.scrolltoTop = function() {
 var scrollLink = $(this), 
 win = $(window);
 scrollLink.hide();
 if (win.scrollTop() != '0'){
 scrollLink.fadeIn('slow')
 }
 win.scroll(function() {
 if (win.scrollTop() == '0'){
 scrollLink.fadeOut('slow')
 } 
 else{
 scrollLink.fadeIn('slow')
 }
 });
 scrollLink.click(function() {
 $('html, body').animate({
 scrollTop: 0
 }, 'slow')
 })
 }   
});
$(function() {
 $('#scroll-top').scrolltoTop();
});
</script>
<a id='scroll-top' href='#' title='Scroll to top'>^</a>    

  • Enregistrez votre modèle et prévisualiser votre blog pour voir si le bouton ressemble en fonction de votre satisfaction.
Félicitations! Vous avez terminé.
Publié par Sami

ShareThis

^