Seguimos subiendo

Hay varias formas de añadir una imagen para ir a inicio del blog, algunas las llamábamos flotantes, otras aleatorias  incluso añadimos no una sino dos imágenes para subir y bajar con efecto deslizante.Tampoco faltó la misma finalidad para las entradas.

¿Falta alguna? pues falta la que tengo ahora mismo funcionado pero en realidad no es una imagen, se añade en unos sencillos pasos nada distintos de las anteriores.

Justo antes de </body> añadimos lo siguiente:

<a href='#' id='backtotop'>&#8593;<br/>
<br/>top</a>
<script type='text/javascript'>
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html, body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}});

$(function() {

$(&quot;#toTop&quot;).scrollToTop();

});
</script>

Si nos fijamos veremos que en negrita dice top y lo podemos cambiar por cualquier otro texto "subir" por ejemplo. La flecha está formada con caracteres unicode añadiendo &#8593;

A continuación nos situamos justo antes de ]]></b:skin> y ahí empieza el entretenimiento porque añadiremos los estilos comprobando en vista previa hasta conseguir un resultado de nuestro agrado.

#backtotop {
width:*;padding:5px;
position:fixed;
bottom:10px; /* distancia alto */
right:15px; /* distancia ancho */
cursor:pointer;
font:text-decoration:none;
font-family: 'century gothic','avant garde',sans-serif; /* fuente */
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 25px; /* tamaño del texto */
line-height: .8em;
font-size-adjust: none;
letter-spacing: -3px;
font-stretch: normal;
padding:10px;
color: #ffffff !important; /* color de texto */
background:#333333; /* color de fondo */
border: 1px solid #C0C0C0; /* borde */
text-shadow: 1px 0px 0px #000000; /* sombra */
-moz-border-radius:6px; /* esquinas redondeadas */
}