Cómo crear un Botón volver arriba con Css y JQuery | Blogger

Comparteme :

En esta oportunidad les vengo a enseñar como se crear un botón con la opción de subir hasta el principio del blog usando CSS JQuery y JavaScript, de igual forma como en todos los post les dejo abajo un botos de demostración para mostrar el acabado de lo dicho en este articulo:
Demostración
1ero. Iniciamos sesión en blogger
2do. Nos ubicamos en la plantilla y buscamos <head> (al principio de todo) Debajo del mismo pegamos el código que les dejo a continuación. éste código nos servirá para poder visualizar los iconos fa-fa. (así poder ver el diseño del nuestro botón) Les dejo una dirección para mayor referencia Iconos fa-fa gratuitos:

<link href='http://fonts.googleapis.com/css?family=Oswald|Yanone+Kaffeesatz|PT+Sans' rel='stylesheet' type='text/css'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

3ero. Buscamos lo siguiente ]]></b:skin> y pegamos debajo del mismo el código que le dejo a continuación:

<style type='text/css'>
/* CSS Volver arriba Bloguero Tutorial*/
.widgetbox{height:auto;overflow:hidden;background:#2b8866;padding:8px 0 4px 0;text-align:center}
.scroll-top{position:fixed;bottom:0;right:0;text-decoration:none;color:#fff;background:#34495e;font-size:12px;display:none;padding:1em;border-radius:10px 0 0}
.scroll-top:hover{background:#2c3e50}
</style>

4to. Para finalizar el tutorial, nos dirigimos hacia el final de toda la plantilla y buscamos </body> justo arriba del mismo pegamos el código que le dejo a continuación:

<a class='scroll-top' href='#' title='Volver arriba'><i class='fa fa-play fa-rotate-270'/></a>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script type='text/javascript'>
jQuery(document).ready(function(){var offset=220;var duration=500;jQuery(window).scroll(function(){if(jQuery(this).scrollTop()&gt;offset){jQuery(&#39;.scroll-top&#39;).fadeIn(duration)}else{jQuery(&#39;.scroll-top&#39;).fadeOut(duration)}});jQuery(&#39;.scroll-top&#39;).click(function(event){event.preventDefault();jQuery(&#39;html, body&#39;).animate({scrollTop:0},duration);return false})});
</script>

Importante: Si ya tene instalado el script que visualiza a continuación, omita la nuestra:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

Demostración

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

Cómo crear un Botón volver arriba con Css y JQuery | Blogger.

Comparte