sábado, 14 de septiembre de 2013

Destacar comentarios del autor con una imagen

Destacar comentarios del autor


El siguiente truco está relacionado con el sistema de comentarios anidados de Blogger, que permiten una mayor personalización . Consiste en marcar con una pequeña imagen, un circulo gris con un lapiz dentro que aparece a la derecha del nombre, los comentarios que escribe el autor.

Este truco es muy sencillo de instalar ya que tan solo es añadir un fragmento de código CSS a la plantilla. Hay que destacar que la imagen está en Base64, es decir, no se aloja en ningún servidor externo sino que es un código que el navegador traduce en una imagen.

Cómo instalarlo en tu Blogger


  1. Ir a Escritorio Blogger.
  2. En el menú seleccionamos Plantilla.
  3. Hacemos clic en Editar HTML.
  4. En el código buscamos lo siguiente:
  5. ]] ></b:skin>

  6. Encima de ello tenemos que pegar el siguiente código:
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
} 

A partir de ahora, cada vez que publiquemos un comentario aparecerá al lado de nuestro nombre una imagen indicando que somos el autor del blog.

lunes, 2 de septiembre de 2013

Botón Ir Arriba (Back to Top) para Blogger

9/02/2013 05:11:00 p. m. Por 5 comentarios

Botón Ir Arriba para Blogger

La función del siguiente botón es volver al inicio de la página de manera rápida para facilitar la experiencia al usuario, en lugar de tener que mover la barra de desplazamiento (Scrollbar) o jugar con la rueda del ratón, sobre todo cuando la página es extensa o el post tiene muchos comentarios.

El siguiente botón tiene la característica de que no incluye ningún script, lo que lo hace muy simple y la velocidad de carga del blog no aumentará al incluir este botón.

Podéis ver una demostración en el siguiente blog de pruebas:

Demo

Instalar el botón en tu blog


Para instalar el botón de Ir Arriba en tu blog sigue los siguientes pasos:
  1. Ir a Escritorio Blogger.
  2. En el menú seleccionamos Plantilla.
  3. Hacemos clic en Editar HTML.
  4. En el código buscamos lo siguiente:
  5. </body>

  6. Encima de ello tenemos que pegar el siguiente código:
<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='https://lh4.googleusercontent.com/-KXKWAyu7dzI/UiSh8-lgdEI/AAAAAAAABLY/jVxmi_nqXXY/s35-no/top.png' style='border:0;'/></a>
</div>

Nota: Podéis cambiar la URL de la imagen por la que querais.