viernes, 18 de abril de 2014

Plantilla Moonlight

Plantilla Moonlight gratis
Nombre de la plantilla: Moonlight
Autor: bloggerzbible
¿Cómo instalo mi plantilla?: Sigue este tutorial

Características de la plantilla:

  • Incluye Slide Show (slider) sobre las entradas para mostrar los post o artículos relevantes.
  • HTML Menu y Otro Dropdown
  • Widget Ready
  • SEO Ready, la plantilla Moonlight está optimizada para ser amigable con los buscadores, como google.
  • Post similares
  • Ad Ready, pe3rmite mostrar banners de publicidad propios o de sistemas como adsense. Para generar dinero con tu blog.
  • Botones RSS, para que los visitantes te sigan mediante Feed.
  • Botones o iconos Sociales como facebook, twitter etc.
  • Fixed Width








Vista Previa
Descargar plantilla Gratis desde Opendrive | Box | 4Shared | Mega |

jueves, 17 de abril de 2014

Template Zikazev Blue

Zikazev Blue blogger template

Nombre de la plantilla: Zikazev Blue
Autor: lovelytemplates
¿Cómo instalo mi plantilla?: Sigue este tutorial

Descripción de la plantilla:

Zikazev Blue es una increíble plantilla para blogger gratuita con diseño minimalista y responsive. Cuenta con 2 columnas, leer más automático en las entradas, paginación, etc. Es amigable con los buscadores y posee con espacios óptimos para insertar nuestra publicidad.

Características de la plantilla:


  • 2 Columnas
  • 1 Sidebar al lado derecho
  • Post Thumbnails
  • Diseño Minimalista
  • Menú de navegación con efecto Dropdown
  • Responsive
  • Footer Widgets
  • SEO Ready
  • Ads Ready
  • Related Posts, al final de cada entrada muestra los artículos relacionados.
  • Incluye paginación
  • Fixed Width
  • íconos a redes sociales.









Vista Previa
Descargar plantilla Gratis desde Opendrive | Box | 4Shared | Mega |

miércoles, 16 de abril de 2014

Como Agregar un Slider en Blogger




EN Plantillasbloggers.com hemos escuchado sus múltiples pedidos para que realizáramos un tutorial sobre como agregar un slider a nuestra plantilla en Blogger. Anteriormente les habíamos explicado como modificar un Slider en blogger, y en esta oportunidad les explicaremos como insertarlo.

Antes de comenzar a modificar o tocar el código de nuestra plantilla, les recomendamos siempre guardar un respaldo de ésta. Para esto deben ir a Plantilla -> "Crear/Restablecer copia de seguridad" opción descargar plantilla completa.

Lo primero que deben hacer es contar con el código para implementar el slider en su blog, el cual pueden descargar desde este link.

Ahora sólo basta con que sigan las instrucciones que aparecen en el video y obtendrán su Slider completamente configurado por ustedes para su blog.



Si lo suyo no son los videos (o no entendieron cómo se explico el proceso allí) a continuación les explicaremos paso a paso lo que deben hacer.

Paso 1: Ir a la Sección de la plantilla en nuestro blog, Editar el HTML y antes de </head> (pueden buscarlo con CTRL+F) pegamos lo siguiente:



Este código representa el funcionamiento del Slider en sí, por lo que si no cuentan con conocimiento en javascript es recomendable no modificarlo.

Paso 2: Ahora Buscamos ]]></b:skin> y pegan el siguiente código:



Este código está compuesto principalmente por CSS que es el diseño o estilo del slider, si quieren aventurarse en modificar la apariencia de este pueden hacerlo cambiando los colores o imágenes que aparecen enlazadas. Pero nuevamente recomendamos que si no se cuentan con conocimientos en estos temas no se modifique nada.

Guardan los cambios y listo!, ahora sólo nos queda agregar el slider y su contenido.

Paso 3: Ahora deben dirigirse al Diseño y agregar un gadget (HTML/Javascript) en donde gusten que aparezca el Slider. Cabe mencionar que si quieren que el slider aparezca en una entrada deben copiar este código en ella.



y modificarlo segun sus necesidades.
En URL del enlace deben agregar la dirección a donde quieran que enlace o rediriga la imagen del slider.
En URL de la imagen deben agregar la dirección de la imagen que quieren que se vea en el slider.
En texto en el slider, deben incluir una pequeña descripción de la entrada o cualquier texto que quieran que aparezca.


Siguiendo estos pasos no deberían tener ningún problema para poder incluir un Slider a la plantilla de su Blog.




martes, 15 de abril de 2014

Plantilla blogger Grid Pin

Grid

Nombre de la plantilla: Grid Pin blogger template
Autor: WBT
¿Cómo instalo mi plantilla?: Sigue este tutorial

Descripción de la plantilla:

Grid Pin es una Plantilla Profesional para blogger, con diseño responsive ideal para fotografías y compartir imágenes y diseños. Cuenta con el efecto de Pinterest integrado, para dar "pin" a post o artículos interesantes. 

Características de la plantilla:


  • Menú Dropdown
  • Entradas divididas en 5 columnas
  • 2 columnas en entradas (entrada y sidebar)
  • iconos para compartir en redes sociales
  • widget post relacionados
  • Responsive
  • Diseño minimalista y profesional ideal para portafolios, galerias, etc.
  • Colores blanco, gris.




Vista Previa
Descargar plantilla Gratis desde Box | Opendrive | Mediafire | 4Shared | Mega |

lunes, 14 de abril de 2014

Tutorial: Efecto Acordeón en imágenes




Hoy en PlantillasBloggers les traemos un tutorial para dar un efecto "acordeón" a nuestras imágenes, las que pueden encontrarse en una entrada o post, slider, sidebar, widget, documento de html o donde ustedes prefieran. Para obtenerlo lo único que se debe hacer es aplicar 2 códigos diferentes en 2 partes distintas de nuestra pagina, una en la sección de estilo o CSS que en blogger sería justo antes del cierre de b:skin y el otro código en donde queremos que aparezca o se visualice el efecto.

Concretamente este efecto nos permite presentar una serie de imágenes en nuestra pagina de esta forma:
 y que al pasar el mouse por encina se desplieguen automáticamente así:

Pueden ver un ejemplo funcional de este efecto en la siguiente página.

¿Te gustó el efecto? pues a aplicarlo.

El primer paso es ir a la sección de "plantilla de nuestro blog, edición html y buscar lo siguiente ]]></b:skin> , justo antes pegamos el siguiente código:






Esto es lo que le dará los efectos de movimientos a nuestras imágenes y las instrucciones para cada navegador (específicamente para firefox, internet explorer, opera y chrome)

El segundo paso es la publicación de la imágenes, si queremos que estas aparezcan en un post, creamos una entrada nueva y dentro de esta pegamos el siguiente código:

<div id="content-rotate-two">
<div class="foto-uno">
<a href="LINK DONDE APUNTA LA IMAGEN">
<img src="DIRECCION DE LA IMAGEN 1">
</a>
</div>
<div class="foto-dos" style="margin: 4px 0 0 4px;">
<a href="LINK DONDE APUNTA LA IMAGEN">
<img src="DIRECCION DE LA IMAGEN 2">
</a>
</div>
<div class="foto-tres" style="margin: 8px 0 0 8px;">
<a href="LINK DONDE APUNTA LA IMAGEN">
<img src="DIRECCION DE LA IMAGEN 3">
</a>
</div>
<div class="foto-cuatro" style="margin: 12px 0 0 12px;">
<a href="LINK DONDE APUNTA LA IMAGEN">
<img src="DIRECCION DE LA IMAGEN 4">
</a>
</div>
<div class="foto-cinco" style="margin: 16px 0 0 16px;">
<a href="LINK DONDE APUNTA LA IMAGEN ">
<img src="DIRECCION DE LA IMAGEN 5">
</a>
</div>
</div>

En este código debemos cambiar dos frases, donde dice "Link donde apunta la imagen" debemos ingresar la URL de la pagina a donde quieren que lleve la imagen, puede ser una entrada, pagina externa o la misma imagen pero que se vea a mayor tamaño. y donde dice "Dirección de a imagen x" deben poner la url de la imagen, no importa el tamaño de esta, ya que automáticamente se redimensionará.

A continuación pueden ver el videotutorial de como aplicar el efecto acordeón en imágenes en Blogger, para así entenderlo de forma más fácil y práctica:


Notas importantes a considerar:


  1. Las dimensiones que resalté con azul en el primer código son el tamaño de la imagen con y sin el marco, por lo que si quieren que aparezcan más grandes o más pequeñas deben cambiar esas medidas de acuerdo a las características de su plantilla. Pero tengan presente que siempre el ancho y alto deben tener las mismas medidas y que las primeras dimensiones (donde aparecen 280px) debe ser mayor que la segunda (donde aparece 250px)
  2. Lo resaltado en color naranja, es decir, #FFFFFF, es el color del margen o borde de las imágenes, por defecto viene en blanco pero pueden cambiarlo por el que deseen. 
  3. Si quieren agregar o quitar imágenes del efecto deben hacerlo agregando un párrafo extra de código (como se muestra en el vídeo) pero además en las partes del código que he dejado en púrpura, por ejemplo al agregar una sexta imagen agregar en cada una.foto-seis , .foto-seis img , .foto-seis a, esto además del ultimo párrafo. Por el contrario si lo que quieren es tener menos imágenes basta con borrar las sobrantes, por ejemplo si quieren tener solo tres borrar el rastro de la 4ta y 5ta.

martes, 8 de abril de 2014

Social Media Marketing Theme

Social Media Marketing Theme
Nombre de la plantilla: Social Media Marketing Theme
Autor: BTS
¿Cómo instalo mi plantilla?: Sigue este tutorial

Descripción de la plantilla:

Social Media Marketing Theme es una plantilla ideal para sitios de noticias y artículos con bastante contenido. tiene un diseño amigable con el usuario y con los buscadores

Características de la plantilla:


  • 3 Columnas
  • 2 Sidebars al lado derecho
  • Slider personalizable
  • Widget Post Populares
  • Botones a redes sociales
  • Menú superior
  • buscador incluido
  • Leer más automático
  • 4 columnas en el footer
  • Colores blanco, purpura,
  • entre otras.




Vista Previa
Descargar plantilla Gratis desde Box | Opendrive | Mediafire | 4Shared | Mega |

lunes, 7 de abril de 2014

Awesome



Nombre de la plantilla:Awesome
Autor: templateism
¿Cómo instalo mi plantilla?: Sigue este tutorial
Características de la plantilla:
  • 3 Columnas
  • 100% Responsive
  • Mega Drop Down Menu
  • Botón de artículos aleatorios
  • Columnas en el Footer
  • SEO
  • Diseño Profesional
  • Ads ready ( listo para insertar anuncios adsense)
  • Colores blanco, azul, verde


Vista Previa
Descargar plantilla Gratis desde Box | Opendrive | Mediafire | 4Shared | Mega |

domingo, 6 de abril de 2014

Templatable



Nombre de la plantilla:Templatable
Autor: Probtemplates
¿Cómo instalo mi plantilla?: Sigue este tutorial
Descripción de la plantilla:

Templatable es una plantilla diseñada especialmente para aquellos blogs que se dedican a la descarga y publicación de plantillas ya sea para blogger, HTML, Wordpress o cualquier otro diseño que se les ocurra.

Características de la plantilla:
  • Galería
  • 3 Columnas
  • SEO
  • Listo para insertar anuncios de Adsense
  • Colores: gris, blanc, naranja, negro.

Vista Previa
Descargar plantilla Gratis desde Box | Opendrive | Mediafire | 4Shared | Mega |