jueves, 3 de octubre de 2013

Gadget de Estadísticas para Blogger

10/03/2013 10:31:00 a. m. Por 8 comentarios


El gadget que veremos hoy se trata de un bloque en el que se muestran estadísticas de nuestro blog, tales como los días en línea que lleva publicado, el número de entradas y el número de comentarios. Podéis verlo en la parte inferior de mi blog, y publico su código a petición de los lectores.

Nota: El contador de visitas que aparece debajo de las estadísticas es el de Blogger. Podéis encontrarlo en la lista de gadget que nos ofrece Blogger

Cómo instalar el gadget en tu blog


Para añadir este gadget a tu blog tendremos que seguir los siguientes pasos:

Para añadir el estilo a la plantilla:

  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:
***---Estaditicas---***
.stats-data {
clear: both;
display: block;
float: none;
overflow: hidden;
padding-left: 8px !important;
}
.stats-data li {
border-right: 1px solid #CCCCCC;
color: #ffffff;
float: left;
font-size: 10px;
font-weight: normal;
line-height: 12px;
margin-right: 10px !important;
margin-top: 0 !important;
padding: 5px 15px 2px 0 !important;
text-align: left;
}
.stats-data li span {
color: #ffffff;
display: block;
font-size: 15px;
font-weight: bold;
margin-bottom: 2px;
}

En el código anterior podemos modificar el estilo del gadget a nuestro gusto, pero las líneas de código a modificar más importantes son:

  •        Grosor del separador (en pixeles)
  •        Color del separador (código hexadecimal)
  •        Color del texto (código hexadecimal) (Por defecto: Blanco)
Para agregar el gadget al blog:


  1. En el Escritorio Blogger hacemos clic en Diseño.
  2. Hacemos clic en Añadir un Gadget donde queramos poner los anuncios.
  3. En la lista seleccionamos HTML / JavaScript.

    HTML JavaScript

  4. En él pegamos el siguiente código:

<ul class="stats-data">
<li>
<span><script> function DiasOnline(Dia, Mes, Year, Texto) { Meses = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); Hoy = new Date(); Inicio = Date.parse(Meses[Mes - 1] + " " + Dia + " " + Year); Resultado = Math.round((Hoy.getTime() - Inicio) / 86400000); document.write(Resultado + " " + Texto); } DiasOnline(15, 07, 2013, "" );</script> </span>Días en línea
<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script></li>
<li>
<span><script src="http://zblogger.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=showpostcount"></script></span>Entradas
</li>
<li style="border-right:0 none; padding-right:0!important;">
<span><script src="http://zblogger.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=showpostcount"></script></span>Comentarios
</li>
</ul>

El el código anterior hay que modificar:
  •        URL de tu blog.
  •        Fecha en la que se creó el blog.
Ahora tan solo poned el gadget donde más os guste y comprobad que todos los datos son correctos.

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.

viernes, 30 de agosto de 2013

Set de Iconos de Redes Sociales (II)

Set de Iconos de Redes Sociales

Hace unas semanas compartí con vosotros un set de iconos de redes sociales que encontré en GraphicsFuel. He visto otros modelos en su web que me parecieron muy bonitos también, circulares con efecto brillo, y son los que comparto a continuación.

Los iconos tienen una licencia gratuita para uso personal y comercial. En el archivo comprimido encontramos los iconos en dos formatos (PSD y PNG), a distintos tamaños: 128x128, 64x64px, 32x32px y 16x16px.

Descargar Set de Iconos

Vía: Graphicsfuel

lunes, 26 de agosto de 2013

Insertar documentos PDF, DOC y otros más en Blogger

8/26/2013 02:00:00 p. m. Por 2 comentarios

Insertar documentos PDF o DOC en Blogger

El editor de Blogger no nos permite incrustar archivos PDF, DOC, PowerPoints o documentos Excel en las entradas, pero usando Google Drive conseguiremos añadir un visor para estos archivos y algunos más que Google Docs (ahora junto con Google Drive) nos permite subir y visualizar en su web,  por ejemplo documentos excel o presentaciones en PowerPoint.

Podéis ver un ejemplo de un documento PDF a continuación:



Para incrustar el visor de archivos en Blogger seguiremos los siguientes pasos:

Insertar Visor en Blogger


  1. Nos dirigimos a Google Drive.
  2. Subimos el documento que queremos añadir a Blogger haciendo clic en la flecha y seleccionando Archivo.

    Subir archivo a Google Drive

  3. Una vez subido el archivo hacemos clic con el botón derecho en él y luego en Abrir con - Google Drive Viewer.

    Google Drive Viewer

  4. Hacemos clic en Archivo - Insertar este archivo PDF.
  5. Copiamos el código que nos proporciona.

    Insertar PDF

  6. En el Editor HTML de la entrada de Blogger pegamos dicho código.

Nota: Podemos cambiar el alto y ancho del visor modificando los valores de height y width respectivamente.

viernes, 23 de agosto de 2013

Publicar automáticamente las entradas en Facebook

8/23/2013 02:00:00 p. m. Por 14 comentarios

Publicar automáticamente las entradas en Facebook


En un tutorial anterior hemos aprendido como crear una página en Facebook, hoy aprenderemos cómo publicar las nuevas entradas en nuestra página de Facebook automáticamente para ahorrar tiempo a la hora de compartir las novedades con nuestros seguidores.

Gracias a RSS Graffiti y al feed de nuestro blog, esta tarea será sencilla y totalmente automática.

Añadir feed a RSS Graffiti


Accedemos a la aplicación a través de este enlace: https://apps.facebook.com/rssgraffiti/

RSS Graffiti

Hacemos clic en Add New Publishing Plan, escribimos el nombre de nuestro blog y hacemos clic en Create Publishing Plan.

RSS Graffiti

En la columna Sources hacemos clic en Add New e introducimos la URL del feed de nuestro blog que tendrá uno de los siguientes formatos (depende de si tenemos FeedBurner o no):


http://nombre-de-tu-blog.blogspot.com/atom.xml
http://feeds.feedburner.com/nombre-de-tu-feed

RSS Graffiti

A continuación aparece una ventana como esta donde podemos configurar algunas cosas.

RSS Graffiti

  • Feed Title: Título del Blog.
  • Feed URL: URL del feed de nuestro blog.
  • Maximum Posts per Update: Número máximo de posts que se publicarán en la misma actualización. Esto podemos configurarlo como "System Maximum" para que no haya un número limitado.
  • Post Order per Update: Para publicar los nuevos/viejos posts primero.
En la pestaña Advanced podemos configurar para que aparezca un mensaje con cada publicación que hagamos en Facebook, y la fecha desde la cual se publicarán los posts del blog posteriores a ella.

Hacemos clic en Save Changes y ya tenemos configurado el feed.

Configurar frecuencia de publicación


Podemos configurar también la frecuencia en la que RSS Graffiti revisará si hay nuevas entradas para publicarlas en la página de Facebook. Para ello hacemos clic en el icono del reloj y modificamos Frecuency Scheduling a "Every half an hour".

RSS Graffiti


Configurar la página de Facebook en RSS Graffiti


Tan solo nos queda configurar RSS Graffiti para que publique los nuevos posts en nuestra página de Facebook, para ello hacemos clic en New Target. En la ventana que aparece configuramos lo siguiente:

RSS Graffiti

  • En Target Setup tenemos que seleccionar nuestra página de Facebook.
  • En Post Style podemos personalizar la publicación que se hará en la página.
Por último, para activar la publicación automática hacemos clic en OFF para que se active y ponga ON.

RSS Graffiti