martes, 30 de julio de 2013

Crear índice en Blogger con etiquetas específicas

7/30/2013 05:14:00 p. m. Por 38 comentarios

Crear índice en Blogger con etiquetas específicas

He recibido una consulta en el blog que me preguntaba si era posible hacer un Índice por etiquetas como el que publiqué hace unos días pero seleccionando tan solo algunas etiquetas y no todas como hacía el script de aquel tutorial.

Después de estar buscando información y ver que con ese método no se podía hacer, se me ha ocurrido una forma de hacerlo mediante el feed RSS de cada etiqueta con ayuda del código del post anterior (Lista de Entradas Recientes de una determinada etiqueta), que muestra los títulos de las entradas en forma de lista.

Cómo hacer el índice con etiquetas específicas


El código es muy parecido al del post que he mencionado anteriormente, con algunos ligeros cambios para que quede en forma de índice.

  1. Crear una página nueva, para ello hay que ir al escritorio de Blogger y en la pestaña Páginas, hacer clic en Página en blanco.

  2. Nueva Página Blogger
  3. Añadir el siguiente código en Edición HTML.

<script type ="text/javascript" > function recentpostslist(json) {
    document.write('<ul>');
    for (var i = 0; i < json.feed.entry.length; i++) {
        for (var j = 0; j < json.feed.entry[i].link.length; j++) {

            if (json.feed.entry[i].link[j].rel == 'alternate') {

                break;
            }
        }
        var entryUrl = "'" + json.feed.entry[i].link[j].href + "'"; //bs 
        var entryTitle = json.feed.entry[i].title.$t;
        var item = "<li>" + "<a href=" + entryUrl + '">' + entryTitle + "</a> </li>";

        document.write(item);
    }

    document.write('</ul>');
} </script> 

<b>Etiqueta1</b><br/>
<script src="http://TU_BLOG.blogspot.com/feeds/posts/summary/-/NOMBRE_ETIQUETA?max-results=500&alt=json-in-script&callback=recentpostslist"></script><br/>

<b>Etiqueta2</b><br/>
<script src="http://TU_BLOG.blogspot.com/feeds/posts/summary/-/NOMBRE_ETIQUETA?max-results=500&alt=json-in-script&callback=recentpostslist"></script><br/>


En este código hay que modificar:
  • TUBLOG por la dirección URL de tu blog
  • NOMBRE_ETIQUETA por el nombre de la etiqueta de la lista que quieres incluir. Es muy importante escribir bien el nombre, ya que cambia si no ponemos bien las mayúsculas y minúsculas.
  • Etiqueta por el título que se mostrara antes de cada lista.
Si queremos que aparezca en forma de lista numerada tenemos que modificar <ul> y </ul> por <ol> y </ol> respectivamente en las líneas 2 y 15

Añadir más etiquetas al índice


Este código añadirá 2 listas de etiquetas, si necesitáis más tan solo hay que añadir lo siguiente:

<b>Etiqueta</b><br/>
<script src="http://TU_BLOG.blogspot.com/feeds/posts/summary/-/NOMBRE_ETIQUETA?max-results=500&alt=json-in-script&callback=recentpostslist"></script><br/>

Lista de Entradas Recientes de una determinada etiqueta

7/30/2013 04:27:00 p. m. Por 7 comentarios


¿Quieres hacer una lista con las entradas recientes de una determinada etiqueta? El siguiente script permite hacer esto gracias al feed RSS que tiene cada etiqueta en Blogger, y podemos utilizarlo para ponerlo en un gadget de la sidebar o en cualquier otro sitio del blog.

Instalando la primera lista


Para instalar la primera lista de entradas seguir los siguientes pasos:

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

    HTML JavaScript

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

<script type ="text/javascript" > function recentpostslist(json) {
    document.write('<ul>');
    for (var i = 0; i < json.feed.entry.length; i++) {
        for (var j = 0; j < json.feed.entry[i].link.length; j++) {

            if (json.feed.entry[i].link[j].rel == 'alternate') {

                break;
            }
        }
        var entryUrl = "'" + json.feed.entry[i].link[j].href + "'"; //bs 
        var entryTitle = json.feed.entry[i].title.$t;
        var item = "<li>" + "<a href=" + entryUrl + '">' + entryTitle + "</a> </li>";

        document.write(item);
    }

    document.write('</ul>');
} </script> 


<script src="http://TU_BLOG.blogspot.com/feeds/posts/summary/-/NOMBRE_ETIQUETA?max-results=NUMERO_DE_RESULTADOS&alt=json-in-script&callback=recentpostslist"></script>

En este código hay que modificar:
  • TUBLOG por la dirección URL de tu blog
  • NOMBRE_ETIQUETA por el nombre de la etiqueta de la lista que quieres incluir. Es muy importante escribir bien el nombre, ya que cambia si no ponemos bien las mayúsculas y minúsculas.
  • NUMERO_DE_RESULTADOS por el número de elementos que queremos que aparezcan en la lista
Si queremos que aparezca en forma de lista numerada tenemos que modificar <ul> y </ul> por <ol> y </ol> respectivamente en las líneas 2 y 15

Añadir más de una lista


Para añadir más de una lista lo único que tenemos que hacer es añadir solo las últimas lineas del código:

<script src="http://TU_BLOG.blogspot.com/feeds/posts/summary/-/NOMBRE_ETIQUETA?max-results=NUMERO_DE_RESULTADOS&alt=json-in-script&callback=recentpostslist"></script>

Es muy importante asegurarse que la primera lista tiene el código completo o no funcionará.

lunes, 29 de julio de 2013

Crear una Página de Facebook para tu blog

Página de Facebook para tu blog


Las páginas de Facebook son una herramienta muy útil a la hora de promocionar el blog, tienen grandes ventajas para una página web o blog, las más importantes y conocidas son las siguientes, aunque se nos pueden ocurrir muchos otros usos:

  • Nos dan la posibilidad de darnos a conocer y nuevos lectores visiten nuestra web.
  • Ofrecen otro método de suscripción además del RSS y correo electrónico.
  • Puede ser otra manera de comunicación con el autor del blog o sitio web.

¿Cómo crear una página en Facebook?


Voy a explicar cómo crear una página en Facebook para tu blog o tu página web:

  1. Nos dirigimos al siguiente enlace para Crear una Página en Facebook.

    Página de Facebook para tu blog

  2. Seleccionamos Marca o Producto.
  3. Completamos los datos: En Categoría seleccionamos Página Web, escribimos el nombre de nuestra web y por último aceptamos las Condiciones de las Páginas de Facebook.

    Página de Facebook para tu blog

  4. En la siguiente página tenemos que registrarnos o asociar la página de Facebook a un perfil ya creado de Facebook.

    Registro Página de Facebook

  5. Si seleccionamos Crear una nueva cuenta comercial nos aparece la siguiente pantalla, donde deberemos rellenar los datos para crear una cuenta en Facebook.

    Registro Página de Facebook

  6. Una vez registrados en Facebook tendremos que dar una pequeña descripción y poner la dirección de nuestra web.

    Configuración Página de Facebook

  7. Agregamos una foto de perfil. También podemos agregarla más tarde si nos queremos saltar este paso (Para ello hacer clic en Omitir).

    Configuración Página de Facebook

  8. Una vez completados estos pasos ya tendremos creada nuestra página de Facebook.

Podemos observar que en la parte superior vemos un Panel de Administración (en él podemos ver estadisticas, mensajes, notificaciones, etc...), y debajo de esto la Actividad de la Página.

Para entrar en la confguración de la página tan solo hay que hacer clic en el menú Editar la Página, y ahi tendremos todas las opciones.

domingo, 28 de julio de 2013

Set de Iconos de Redes Sociales

Set de Iconos de Redes Sociales

Hoy me he encontrado navegando por Internet este pack de iconos de las distintas redes sociales en Graphicsfuel. 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 un tamaño de 114x144 px.

Las iconos incluidos son: Twitter, Youtube, Facebook, Vimeo, Tumbrl, Stumbleupon, Skype, RSS, Pinterest, Linkedin, Instagram, Google+, Forrst, Flickr, Evernote, Email, Dribble, Digg, Devianart, Blogger, y botón de Compartir.


sábado, 27 de julio de 2013

Cambiar Entradas Antiguas y Entradas más recientes por imágenes

7/27/2013 03:32:00 p. m. Por 8 comentarios

Cambiar Entradas Antiguas y Entradas más recientes por imágenes

Como habrás visto, Blogger añade en la parte inferior del blog unos links para navegar por las diferentes páginas de entradas, para poder ver entradas más antiguas o más nuevas (Entradas antiguas - Entradas más recientes). Al igual que en cada entrada pone los mismos links para avanzar o retroceder a una entrada más reciente o más antigua.

El truco de hoy consistirá en personalizar estos enlaces y cambiarlos por una imagen que actue de botón, para dar un aspecto más personalizado al blog.

Tutorial


Para cambiar los enlaces por imágenes tendremos que realizar los siguientes pasos:
  1. Ir a Escritorio Blogger.
  2. En el menú seleccionamos Plantilla.
  3. Hacemos clic en Editar HTML.

Para modificar el botón Entradas más recientes
  • En el código buscamos:
<data:newerPageTitle/>

  • Lo sustituimos por:
<img src='URL imagen entradas más recientes'/>


Para modificar el botón Entradas antiguas
  • En el código buscamos:
<data:olderPageTitle/>

  • Lo sustituimos por:
<img src='URL imagen entradas antiguas'/>


Para modificar el botón Página Principal
  • En el código buscamos:
<data:homeMsg/>

  • Lo sustituimos por:
<img src='URL imagen página principal'/>

Personalización de botones


Tan solo tenemos que cambiar el texto subrayado en amarillo por la URL de la imagen que queramos poner.

A continuación pongo algunas imágenes que he creado que podéis utilizar para vuestro blog.

Flecha izquierdaBotón HomeFlecha derecha

Flecha izquierdaBotón HomeFlecha derecha

Flecha izquierdaBotón HomeFlecha derecha

Flecha izquierdaBotón HomeFlecha derecha

viernes, 26 de julio de 2013

30 Plantillas para Blogger En construcción - Under Construction

7/26/2013 01:37:00 p. m. Por No hay comentarios

30 Plantillas para Blogger En construcción


Este tipo de plantillas son usadas para informar a los lectores de que el blog no está operativo aún o está en construcción o mantenimiento (Under Construction Templates).

Muchas de estas plantillas incluyen una cuenta atrás para la fecha en la que se abrirá al público el blog, además de botones sociales para que se suscriban. Otras incluyen una barra de progreso para que los lectores se hagan una idea de cuanto queda para que el blog funcione.

A continuación 30 Plantillas totalmente gratis. Podeis ver la plantilla en funcionamiento haciendo clic en Demo.

BeBack


BeBack


Changing Room


Changing Room


Changing Room Blue


Changing Room Blue

Demo Descarga

Com4me


Com4me

Demo Descarga

Coming Soon


Coming Soon

Demo Descarga

Coming Soon Blogger Template


Coming Soon Blogger Template

Demo Descarga

Holding Pattern


Holding Pattern


Ice Breaker


Ice Breaker


Ice Breaker Gray


Ice Breaker Gray

Demo Descarga

Ice Breaker Green


Ice Breaker Green

Demo Descarga

Ice Breaker Red


Ice Breaker Red

Demo Descarga

Landis


Landis



Launcher


Launcher


Demo Descarga

Launchpad


Launchpad


Lexiity


Lexiity


My Blue Construction


My Blue Construction


Placeholder


Placeholder


Ready2Launch


Ready2Launch


Responsoon


Responsoon


Supersized Under Construction


Supersized Under Construction


Under Construction


Under Construction


Under Construction Blogger Template


Under Construction Blogger Template


Under Maintenance


Under Maintenance


Undercon


Undercon


UnderConstruct


UnderConstruct


Work Under Progress


Work Under Progress


Workin


Workin


WP Blueprint


WP Blueprint


WP Launcher


WP Launcher


WP Launcher Black


WP Launcher Black