85 WordPress Themes Gratis

Una buena recopilación de Themes para todos los usuarios de Wordpress. En total son 85 Wordpress Themes Gratis listos para descargar e instalar. Entre la colección se encuentran algunos de los Themes para Wordpress más originales y de mejor calidad que se pueden encontrar actualmente. Además los diseños van desde el formato más clásico, hasta el tipo revista, incluyendo diferentes plugins y configuraciones de columnas para hacer más versátil y adaptable el theme a tus necesidades.

Ya sabes, si estabas pensando en cambiar el aspecto de tu blog en Wordpress, aquí tienes una buena recopilación para poder elegir un theme original y de calidad.

Fuente: Reencoded

Cambiar la Plantilla de Blogger

Todo blogger sabe de la importancia de una plantilla original para su blog. Pero a veces no es fácil cambiar esta plantilla, sobre todo para los que no tienen muchos conocimientos de lenguajes de programación. En algunos casos esta operación en apariencia tan simple se puede complicar mucho.

Si estás pensando en cambiar la plantilla de tu blog en Blogger y no tienes mucha experiencia cambiando plantillas, este videotutorial será de mucha ayuda. Antes de nada te recomendamos que hagas una copia de tu plantilla actual para no lamentarte en caso de realizar algún paso mal. EL video tutorial está en español y es muy simple de seguir. Los pasos son simples, pero para los no iniciados a veces no resulta fácil hacer este tipo de operaciones, que de realizarlas mal tienen consecuencias difíciles de corregir.

Fuente: Blog and Web

Mas de 20 Plugins de WordPress para Gestionar Publicidad

Para los usuarios de Wordpress traigo una buena colección de plugins, siempre necesarios para nuestro blog en esta plataforma tan versátil. Y si unas de las críticas que algunos le hacen a Wordpress es la gestión de plublicidad en su panel, con esta recopilación se demuestra todas las posibilidades que la plataforma ofrece para implementar publicidad.

En esta recopilación encontrarás más de 20 PlugIns de WordPress para Gestionar la Publicidad en tu blog. Un resumen de los mejores plugins, pues se pueden encontrar muchos que realizan funciones similares. Desde los más clásicos a los más complicados, los que simplemente insertan el anuncio, o aquellos que te permiten ubicarlo en determinadas posiciones.

Una buena recopilación que no pasa desapercibida para los que administramos algún blog en wordpress, y de la mano de uno de los mejores blogs sobre la materia.

Fuente: AyudaWordpress.com

Nube de Tags Nativa en Blogger

Hace unos días podemos encontrar una mejora interesante en la plataforma de Blogs de Blogger. Para todos los usuarios del servicio será una buena noticia saber que ahora Blogger dispone de una nube de tags un poco más actualizada a los tiempos y de forma nativa, sin tener que instalar ningún código, de forma rápida y simple. Un buen regalo para celebrar los diez años del servicio.

Se pueden implementar como una "lista" o como una "nube", aunque sospecho que la forma que predominará será como "nube de etiquetas". Tambien se pueden escojer las etiquetas que quieres que se muestren, restringiendo aquellas que no quiera mostrar. Y por supuesto, manipular el diseño a través del CSS de la plantilla.

Para poder implementar la nube de tags tienes que acceder a la parte de "Diseño" de tu panel de administración de Blogger y añadir o modificar el plugin de "Etiquetas", seleccinando la opción de "Nube" y guardando los cambios, como se muestra en la imagen inferior.

Imagen tomada de Blog and Web

Para los que quieran ver la información pública sobre este recurso de Blogger, pueden hacerlo aquí.

Fuente: Blog and Web

15 Plantillas para tu Blog en Blogger

15 Plantillas para tu Blog en Blogger Gratis, listas para instalar y con un diseño inmejorable. Puedes ver un ejemplo de como funcionan instaladas. Tambien puedes descargarlas para su uso, de forma totalmente gratuita.

Advertencia:

Antes de realizar cambios te recomendamos que hagas una copia de respaldo de tu plantilla actual o que utilices en su defecto un blog de prueba. No nos hacemos cargo de los posibles desperfectos.

1º) Perhentian

Demo | Descargar

2º) Purple Rush

Demo | Descargar

3º) DF Marine

Demo | Descargar

4º) Angelic Designs

Demo | Descargar

5º) Japanese Fleur

Demo | Descargar

6º) Made in Spain

Demo | Descargar

7º) Green Light

Demo | Descargar

8º) Dark World

Demo | Descargar

9º) Astro Colorful

Demo | Descargar

10º) History Channel 11

Demo | Descargar

11º) Minima Stretch

Demo | Descargar

12º) Neuronic

Demo | Descargar

13º) IcyBlue

Demo | Descargar

14º) Owln Pussycat

Demo | Descargar

15º) Beauty

Demo | Descargar

Si quieres ver y descargar más Plantillas para Blogger gratis, puedes hacerlo en...

10 Plantillas para Blogger Gratis

Tutorial Plantillas Blogger; Modulos de Entrada Inferiores

Vamos a continuar con el Tutorial de Plantillas para Blogger, modificando el código para poder añadir más módulos a los que trae por defecto la plantilla. En este caso añadiremos hasta un máximo de cuatro módulos debajo del espacio de cada entrada del blog. Puedes ver el resultado al final del ejercicio.

Para empezar, y como ya hemos hecho en otras ocasiones, utilizaremos la plantilla por defecto que se instala con Blogger, la denominada Mínima. Antes de nada haz copia de tu plantilla actual y utiliza un blog de pruebas preferentemente.

1.- Para insertar los módulos inferiores debajo de cada entrada, buscaremos el siguiente código:

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

2.-  A continuación debemos de añadir el siguiente código marcado en verde para añadir una única columna en el espacio inferior de la entrada: 

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

<div id='main-footer-contenedor'>

<div id='main1-1' style='width: 99%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col1-1' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

</div>

3.-  Para añadir dos columnas utilizaremos el siguiente código destacado en color verde:

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

<div id='main-footer-contenedor'>

<div id='main2' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col1' preferred='yes' style='float:left;'/>

</div>

<div id='main3' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col2' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

</div>

4.- Si lo que queremos es añadir tres columnas lo haremos añadiendo el siguiente código;

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

<div id='main-footer-contenedor'>

<div id='main3-1' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-1' preferred='yes' style='float:left;'/>

</div>

<div id='main3-2' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-2' preferred='yes' style='float:left;'/>

</div>

<div id='main3-3' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-3' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

</div>

5.- Y si preferimos cuatro columnas en la parte inferior de cada entrada, entonces añadimos el siguiente código marcado en color verde:

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

<div id='main-footer-contenedor'>

<div id='main4-1' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-1' preferred='yes' style='float:left;'/>

</div>

<div id='main4-2' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-2' preferred='yes' style='float:left;'/>

</div>

<div id='main4-3' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-3' preferred='yes' style='float:left;'/>

</div>

<div id='main4-4' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-4' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

</div>

6.- Tambien puedes añadir todas las columnas como en el siguiente ejemplo:

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

<!-- CODIGO MODULO INFERIOR :: 1 COLUMNA -->

<div id='main-footer-contenedor'>

<div id='main1-1' style='width: 99%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col1-1' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO INFERIOR :: 1 COLUMNA -->

<!-- CODIGO MODULO INFERIOR :: 2 COLUMNAS -->

<div id='main-footer-contenedor'>

<div id='main2-1' style='width: 49%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col2-1' preferred='yes' style='float:left;'/>

</div>

<div id='main2-2' style='width: 49%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col2-2' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO INFERIOR :: 2 COLUMNAS -->

<!-- CODIGO MODULO INFERIOR :: 3 COLUMNAS -->

<div id='main-footer-contenedor'>

<div id='main3-1' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-1' preferred='yes' style='float:left;'/>

</div>

<div id='main3-2' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-2' preferred='yes' style='float:left;'/>

</div>

<div id='main3-3' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-3' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO INFERIOR :: 3 COLUMNAS -->

<!-- CODIGO MODULO INFERIOR :: 4 COLUMNAS -->

<div id='main-footer-contenedor'>

<div id='main4-1' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-1' preferred='yes' style='float:left;'/>

</div>

<div id='main4-2' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-2' preferred='yes' style='float:left;'/>

</div>

<div id='main4-3' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-3' preferred='yes' style='float:left;'/>

</div>

<div id='main4-4' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-4' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO INFERIOR :: 4 COLUMNAS -->

</div>

Puedes modificar varios parámetros de configuración de las columnas, como son el ancho de las mismas (modificando el valor de width:) y la alineación (modificando el valor de float y text-aling).

El resultado de añadir todos los códigos sería algo similar a esto:

Esperamos que con estos ejercicios entiendas mejor el funcionamiento de los módulos superiores e inferiores de las plantillas de blogger. Si tienes alguna duda déjanos un comentario.

Tambien puedes descargar la Plantilla utilizada para este ejemplo con todas las modificaciones realizadas. Recuerda hacer una copia de tu plantilla original y utilizar tu blog de pruebas.

 Descargar Plantilla de Ejemplo

Tambien te puede interesar:

Tutorial Plantillas Blogger; Módulos de Entrada Superiores

Indice del Tutorial Plantillas Blogger

Te esperamos en la próxima entrega del Tutorial de Plantillas para Blogger.

21 Packs de Iconos Sociales

Si estás necesitado de iconos para mostrar las redes sociales en las que participas, o si simplemente te apetece cambiar el aspecto de tu blog o web, aquí tienes una completa colección de 21 packs de iconos de redes sociales atrevidos y originales, esperando a ser descargados.

Aquí puedes consultar la colección completa.

Vía: Conectablog.blogspot.com

Fuente: Wpzoom.com

Google Web Elements

Google dispone de un interesante servicio para insertar varias de sus aplicaciones de forma rápida y efectiva. Se denomina Google Web Elements. y nos ofrece algunas posibilidades más para mejorar nuestras webs utilizando algunos de los servicios del buscador.

Entre los 8 servicios disponibles hasta este momento tenemos Calendar, Conversation, Custom Search, Maps, News, Presentations, Spreadsheets y YouTube News. De esta foma puedes utilizar en tu web o blog cualquiera de estos servicios con solo copiar y pegar el código que se proporciona en la parte de tu diseño que creas conveniente. Puedes configurar el tamaño, el título y otras opciones similares. 

Entre los servicios disponibles tenemos

• News; que inserta las últimas noticias clasificadas por palabra clave
  
• Maps; que insertará la dirección que indiquemos
  
• Presentations; que inserta la presentación que hayamos realizado con la propia herramienta de Google
  
• Conversation; para poder mantener conversaciones sin instalar aplicaciones de chat
  
• Calendar; que inserta un calendaio indicando la URL proporcionada por el mismo
  
• Custom Search; que nos permite insertar un motor de búsqueda de una forma más rápida que el clásico que ofrecía hasta ahora Google
• SpreadSheets; que permite insertar hojas de cálculo
• Youtube News; que permite insertar videos de noticias de la plataforma Youtube

Todos estos servicios utilizan otras aplicaciones de Google, por lo cual en muchos casos es necesario estar registrado como usuario en estas otras aplicaciones.

De esta manera con Google Web Elements tenemos de forma centralizada algunos de los servicios que ofrece Google para poder empezar a utilizarlos de inmediato. Es de suponer que la lista de servicios se irá aumentando, y esperemos que traduciendo a otros idiomas.

Fuente: Google Web Elements

Tutorial Plantillas Blogger; Modulos de Entrada Superiores

Para iniciar nuestro tutorial sobre plantillas para Blogger, empezaremos por realizar algunos cambios básicos en la estructura principal de la plantilla. Estos cambios consisten en añadir a la estructura de nuestra plantilla una serie de módulos en la parte superior de la estructura, de tal forma que el resultado sería este:

Vamos a utilizar para este ejercicio la plantilla Mínima que viene por defecto cuando creamos un nuevo blog en blogger. Si vamos a la pestaña de Diseño y despues a Elementos de la Página, tendremos algo muy similar a esto:

1.- Para comenzar, vamos a la edición de HTML de nuestra plantilla en blogger (Diseño>Edición de HTML). Una vez allí marcamos la pestaña de Expandir Plantillas de Artilugios. Y buscamos el siguiente código

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

2.-  A partir de la línea marcada en rojo añadimos el siguiente código marcado en verde;

<div id='main-wrapper'>

<div id='main-top-contenedor'>

<div id='main-top1-1' style='width: 100%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top1-1' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

3.-  El resultado sería el siguiente;

4.- Si lo que queremos es añadir dos columnas en lugar de una al módulo, entonces el código que deberíamos de introducir es el siguiente (buscar la línea en rojo y a continuación pegar el código en verde):

<div id='main-wrapper'>

<div id='main-top-contenedor'>

<div id='main-top2-1' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top2-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top2-2' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top2-2' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

El resultado para el código de dos columnas sería el siguiente:

5.- Para introducir tres columnas el código sería este:

<div id='main-wrapper'>

<div id='main-top-contenedor'>

<div id='main-top3-1' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top3-2' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-2' preferred='yes' style='float:left;'/>

</div>

<div id='main-top3-3' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-3' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

6.- Y por último para introducir cuatro columnas el código que debemos de insertar es el siguiente:

<div id='main-wrapper'>

<div id='main-top-contenedor'>

<div id='main-top4-1' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-2' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-2' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-3' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-3' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-4' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-4' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

7.- Si lo que prefieres es añadir de una sola vez todos los códigos para optimizar al máximo el diseño de tu blog, entonces hazlo añadiendo el siguiente código en verde a continuación de la linea roja;

<div id='main-wrapper'>

<!-- CODIGO MODULO MENU SUPERIOR :: 1 Columna -->

<div id='main-top-contenedor'>

<div id='main-top1-1' style='width: 99%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top1-1' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO MENU SUPERIOR :: 1 Columna -->

    

<!-- CODIGO MODULO MENU SUPERIOR :: 2 Columnas -->

<div id='main-top-contenedor'>

<div id='main-top2-1' style='width: 49%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top2-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top2-2' style='width: 49%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top2-2' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO MENU SUPERIOR :: 2 Columnas -->

<!-- CODIGO MODULO MENU SUPERIOR :: 3 Columnas -->

<div id='main-top-contenedor'>

<div id='main-top3-1' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top3-2' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-2' preferred='yes' style='float:left;'/>

</div>

<div id='main-top3-3' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-3' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO MENU SUPERIOR :: 3 Columnas -->

<!-- CODIGO MODULO MENU SUPERIOR :: 4 Columnas -->

<div id='main-top-contenedor'>

<div id='main-top4-1' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-2' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-2' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-3' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-3' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-4' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-4' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO MENU SUPERIOR :: 4 Columnas -->

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

 

Puedes descargar la plantilla de ejemplo utilizada para este tutorial con todos los códigos insertados. Haz una copia de la plantilla actual y preferiblemente utiliza tu blog de pruebas.

 Descargar Plantilla de Ejemplo

Ahora solo depende de ti escoger cual es el diseño que más se adapta a tus necesidades para poder mejorar el diseño de tu blog.

Si quieres aprender más visita el Índice de nuestro

 Tutorial de Plantillas para Blogger

Te esperamos en la siguiente entrega del Tutorial de Plantillas para Blogger