Boton ir arriba en nuestro blog con css

En este tutorial # 2: Aprenderemos como personalizar nuestro boton de subir nuestra pagina del blogger cuando este deslizado hacia abajo. Al apretar el botoncito subirá nuevamente hacia arriba.

Para lograr este truco sencillo es necesario paciencia + Css y eso es todo.

Paso # 1: Ir a diseño de nuestro blog → Añadir un gadget

Paso # 2: Click en HTML/Javascript y dentro del cuadro pegar lo siguiente:

<div><style type='text/css'>
    .backtotop a:hover {
        padding-bottom:2px;
    }
</style>
<div class='backtotop'><a class='backtotop' href='#' rel='nofollow' style='display:scroll;position:fixed;bottom:10px;right:15px;' title='Ir Arriba'><img src='http://i21.servimg.com/u/f21/14/81/87/53/image10.png' style='border:0;'/></a>
</div></div>

Paso # 3:  Lo que está en color morado es lo que tienes que cambiar por una imagen que te guste, lo guardas y ya esta hecho.

Espero que te serva, muchas gracias por visitar el blog.

Leer Mas →

Personalizar barra de desplazamiento (scrollbar)

¿Ques una scrollbar - barra de desplazamiento?

Citado de wikipedia: 

La barra de desplazamiento (o scrollbar en inglés) es un objeto de la interfaz gráfica de usuario mediante el cual una página de internet, una imagen, un texto, etc, pueden ser deslizados hacia abajo o arriba. La barra aparece por lo general a la derecha de la pantalla.

En este tutorial aprenderemos como modificar dicha barra, principalmente cambiar de color, perosonalizarlo a nuestro gusto. Una scroll modificada da a nuestro blog un aspecto diferente y único, es fácil y solo necesitas editar css de tu blog.

En este mismo blog verán un ejemplo de scroll ya modificado de un color verde con celeste.

Para aplicar este tutorial seguir los siguientes pasos:

1. Entrar a plantilla → Editar HTML
2. Apretar control + F y buscar el siguiente codigo: ]]></b:skin>
3. Antes de ese codigo pegar lo siguiente:

::-webkit-scrollbar {

background:#fff;

width:12px;

}

::-webkit-scrollbar-thumb {

-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);

background-image: -webkit-linear-gradient(top, #95E244 10%,#95E244 51%);

}

::-webkit-scrollbar-track {

}

  4. Cambiar lo que esta en rojo por los colores que quieras y guardar.  

Eso es todo, espero que les guste, gracias por visitar tipsytutoriales.com

Leer Mas →