Ir al contenido principal

Entradas

Mostrando las entradas etiquetadas como blog

Botón "Ir arriba" - con JQuery

Tips y Tutoriales para Blogger

Consiste en un botón flotante que sólo es visible cuando se baja la página y permite a los lectores volver al top de tu blog con sólo presionarlo. Para ponerlo en tu blog entra en la Edición HTML y antes de  </head>   agrega jQuery: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script> Recuerda que si ya lo tuvieras omite ese paso. Ahora antes de ]]></b:skin> agrega los estilos: /* Botón Ir Arriba ----------------------------------------------- */ #IrArriba { position: fixed; bottom: 30px; /* Distancia desde abajo */ right: 30px; /* Distancia desde la derecha */ } #IrArriba span { width: 60px; /* Ancho del botón */ height: 60px; /* Alto del botón */ display: block; background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj27XHX39uWjBXP-4dEnmmyuMG_szZr3wPwlKrSjA7rJ5lHqSs9dw65h5HZpqExsrrkOZkhUdIUkzHWe4rHdvxQpTloMh1PPMqvM7UGMTd-9_GuT9PxDIXogf6FDe-Uhb...

Personalizar las Scrollbars - para Chrome y Safari

Tips y Tutoriales para Blogger

Hoy les enseñaré a personalizar las scrollbars (barras de desplazamiento) de nuestro blog. Como dice en el título, este truco sólo afecta a Google Chrome y Safari, ya que se utiliza una propiedad que sólo se aplica en estos navegadores. Lo único que se necesita es aplizar el CSS, que como ya sabemos, se pega justo antes de  ]]></b:skin> ::-webkit-scrollbar { Estilos... } ::-webkit-scrollbar-thumb { Estilos... } ::-webkit-scrollbar-button { Estilos... } ::-webkit-scrollbar-track { Estilos... } ::-webkit-scrollbar-corner { Estilos... } Acá un esquema para poder ubicarse mejor: Se pueden agregar toda clase de estilos: color, borde, resplandor, etc. Un ejemplo de estilos sería así: ::-webkit-scrollbar {     width: 16px; background:white; } ::-webkit-scrollbar-track {     box-shadow: inset 0 0 6px rgba(0,0,0,0.3);     border-radius: 10px; } ::-webkit-scrollbar-thumb {     border-radius: 10px; ...

Música en el blog

Tips y Tutoriales para Blogger

En este tutorial veremos cómo poner en el blog de manera muy fácil música de fondo. Vamos a Diseño   > Edición de HTML y antes de </body>  pegamos: <iframe frameborder='0' height='0' name='musica-fondo' src='http://www.youtube.com/v/ XXXXXXX ?&amp;autoplay=1&amp;loop=1' width='0'/> Musica: <a href=' http://www.youtube.com/v/ XXXXXXX ?&amp;autoplay=1&amp;loop=1 ' target='musica-fondo'>On</a> | <a href='about:blank' target='musica-fondo'>Off</a> Cambiamos las  XXXXXXX por la ID del video (de Youtube, obvio) y de esa forma ya tendremos música de fondo al acceder al blog. Continuemos... También podemos hacer que la música sea opcional añandiendo estos ingeniosos botones que permiten encender y apagar la música. Musica: On | Off Donde quieras (en un Gadget HTML/Javascript o en algún lugar de la Plantilla, etc) pegá lo siguiente: <div i...