Botón Ir Arriba con Estilo añadiendo CSS para Blogger

Primero ve a Diseño > Edición de HTML con la ayuda de (Ctrl + F) buscamos </head> Justo antes pegamos el siguiente código (puede ser que ya lo tengas en tu plantilla, si es así salta este paso):

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

Justo después del anterior código que acabamos de colocar, ponemos este otro:

<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
</script>
<script type='text/javascript'>
$(function() {
$("#toTop").scrollToTop();
});
</script>

Es hora de colocar el botón Ir Arriba para ello busca </body> justo antes pega el siguiente código:

<a href='#' id='toTop'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuGokLP5qa9an07ez0O6sBhNdmNAjDnsauIRJfRW_HM8BIMU63-yKUle4gDqt4Ml_PCWQHk0x-Y9vC5HbKxVADe3G9ArA-aqp6CNOu7ekL2rDeZsyKguVZ58rPSKLnTKYLw_z-2ZK6rt4/s400/23.png'/></a>

Ahora le daremos estilo con CSS, busca ]]></b:skin> Justo antes coloca el siguiente fragmento de código:

#toTop {
text-align:center;
padding:0px;
position:fixed;
bottom:0px;right:10px;
cursor:pointer;
color:#666;
text-decoration:none;
filter:alpha(opacity=40);
opacity:.50;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /*--IE 8 Transparency--*/
}

COMFIGURACIÓN AVANZADA: veremos como cambiar la imagen, ponerlo a la izquierda, y ajustar la transparencia del botón.

Para cambiar la imagen por la tuya cambia lo que está en rojo.
Para ponerlo al lado izquierdo cambia lo que está en azul por esto:

#toTop {
text-align:center;
padding:0px;
position:fixed;
bottom:0px;left:10px;
cursor:pointer;
color:#666;
text-decoration:none;
filter:alpha(opacity=40);

opacity:.50;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /*--IE 8 Transparency--*/
}

Si te fijas cambiamos bottom:0px;right:10px; por bottom:0px;left:10px; para que aparesca al lado izquierdo. Además, podemos indicar los pixeles que tendrá de separción el botón del borde de la plantilla en bottom:0px;left:10px;.

Para ajustar la transparencia cambia de porcentaje lo que está en verde, lo puedes ver que está 50 pero tu lo puedes ajustar a tú gusto, esto lo puedes realizar en los dos códigos tanto al de la derecha como al de la izquierda. 

Posted in: Diseños,zona de blogger