Ir al contenido principal

Entradas

Mostrando entradas de febrero, 2012

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;     box-shadow: inset 0 0 6px rgba(0,0,0,0.

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

Personalizar avatares en los comentarios

Tips y Tutoriales para Blogger

ACTUALIZADO Para que los avatares de los comentarios queden más atractivos, la mejor manera es agregándoles estilos. Acá les dejo dos opciones para personalizarlos: OPCIÓN 1: CIRCULAR  Vamos a Edición de HTML y buscamos la línea  ]]></b:skin> y justo antes pegamos: .comments .avatar-image-container,  .comments .avatar-image-container img {  { max-width:60px !important; / *Ancho */ width:60px !important; / *Ancho */ max-height:60px !important;  /*Alto */ height:60px !important;  /*Alto */ } .comments .avatar-image-container { overflow: hidden; background: url(http://2.bp.blogspot.com/-d-kCY73rEBo/TtuiL3J7kfI/AAAAAAAAAnc/U2i4bElV30c/s1600/avatar+anonimo.png);  /*Imágen de autor anónimo */ box-shadow: 1px 1px 1px 0 #ccc;  /*Color de sombra */ -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s; border: 4px solid white;  /*Borde del contenedor de avatar */ border-radius:50%; } También Podés darle al avatar un ef

Cupido volando por el blog

Tips y Tutoriales para Blogger

Para los que no nos gustan llenar nuestro head de larguísimos scripts, acá un resúmen de un truco que encontré en Ciudad Blogger . Antes de </head> pegar: <!-- Cupido volando --> <script src='http://db.tt/4TqR7m8g' type='text/javascript'/> <!-- Cupido volando --> Ahora, elegí la imagen que más te guste y pegá el código justo antes de </body> . <!-- Cupido volando --> <div id='CupidoVolando' style='position:absolute; z-index:80; left: -500px;'><img border='0' src='http://lh4.googleusercontent.com/-QtgVSmiCPQU/TycKKNyYYMI/AAAAAAAACIw/En7KHmcuh1Q/s107/Cupido01.gif '/></div> <!-- Cupido volando --> <!-- Cupido volando --> <div id='CupidoVolando' style='position:absolute; z-index:80; left: -500px;'><img border='0' src='http://lh6.googleusercontent.com/-s1cZn14D8Js/TycKKCz2vqI/AAAAAAAACI0/_RY_zj6_vtI/s108/Cupido02.gif'

Botón "Dejá tu comentario"

Tips y Tutoriales para Blogger

Ya lo podés ver en mi blog: un botón que sólo aparece en las entradas individuales y al presionarlo te dirige automáticamente al cuadro de comentarios. Insertarlo es muy fácil. Sólo tenés que pegar el siguiente código antes de </body> . <b:if cond='data:blog.pageType == &quot;item&quot;'> <a href="#comment-form"><img class="boton-comentar" style="position:fixed; bottom:0px; right: 0px;" id="boton-comentar" src=" http://2.bp.blogspot.com/_m1oYXQ1EEAI/SZG29IhuiEI/AAAAAAAABqU/VLk-c3Gax6Q/S1600-R/Deja+un+comentario+homero.png " /></a> </b:if> Aviso Podés cambiar la URL en color rojo por otra imagen que prefieras. También... podés agregar estos estilos:    (antes de ]]></b:skin> en Edición de HTML .) #boton-comentar { -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } #boton-comentar:hover { -webkit-transform: sc