Bloggerest: Plantilla para Blogger

descargas

Nombre:	Bloggerest
Diseñador:	El Potro
Compatibilidad:	Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer
Características:	Plantilla para Blogger, 2 columnas, 980px de ancho, Entradas estilo Pinterest, Cabecera flotante, Colores minimalistas, Comentarios del autor destacados, Botones para compartir.
Incluye:	Plantilla XML, Instrucciones de instalación, Licencia

Hace ya mucho tiempo que no creaba una plantilla gratuita para Blogger, así que esta vez quise darme un tiempo para poder diseñar una plantilla que pudieran descargar y usar libremente.

Bloggerest es una plantilla gratuita inspirada en Pinterest, aunque no es una réplica (ni pretende serla), ideal para blogs de fotografia, o blogs donde las imágenes juegan un rol importante.

El diseño de la plantilla es un tanto minimalista, predominan los colores rojo y blanco con un toque de gris. El título del blog así como los títulos de los gadgets usan una fuente tipo caligrafía para darle un aire elegante.
La cabecera ocupa el 100% del ancho de la página al mismo tiempo de ser flotante. Las imágenes en la portada tienen opacidad al pasar el cursor y éstas conducen a la entrada al dar click sobre ellas, también muestra la miniatura del video cuando están alojados en YouTube y cuando no hay una imagen que lo antecede.
Este es un ejemplo de una entrada donde se puede apreciar cómo se visualizan los bloques entrecomillados, las listas numeradas, las listas con viñetas, los botones para compartir, los gadgets de la sidebar y los comentarios donde se destacan los realizados por el autor.

Personalización:

La cabecera tiene un alto de 124px por lo que se recomienda usar un logotipo que no exceda esa medida.

El menú de la plantilla es el menú horizontal con subpestañas y buscador integrado, por lo que en esa entrada podrás ver un poco más sobre su personalización. En la plantilla puedes identificar el menú por la etiqueta <div id='menuWrapper'>

La forma de redactar las entradas es igual que como lo harías siempre, sin embargo, en caso de que tu entrada sólo contenga una imagen, o un video, sin nada de texto, tendrás que dar uno o más saltos de línea (ENTER) al final del código de tu imagen o de tu video, ya que si no lo haces la imagen no se formará en miniatura y se distorcionará.

---

Es compatible con todos los navegadores más conocidos (arriba se especifica cuáles) según la última versión actual de cada uno de ellos.

El sistema magazine que utiliza permite mostrar muchas entradas en la portada ya que en la portada las entradas no cargan de forma completa, permitiendo agilizar la carga del blog. Las pocas imágenes que usa la plantilla están alojadas directamente en base 64 por lo que no dependerás de ningún servicio externo para cargarlas.

Espero que sea de su entero agrado, que la disfruten, y que no retiren los créditos :P

ACTUALIZACIÓN 4/abr/2013
Si en la pestaña Diseño no ves la sidebar, entra en Plantilla | Edición de HTML y elimina estas partes en color rojo:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' mobile='yes' title='Categorías' type='Label'/>
<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Entradas populares' type='PopularPosts'/>
<b:widget id='BlogArchive1' locked='false' mobile='yes' title='Archivo del blog' type='BlogArchive'/>
</b:section>
</div>
</b:if>
</b:if>
</b:if>

Eso hará que la sidebar aparezca en la sección Diseño. Si notaras que con ese cambio tarda un poco más en cargar la portada del blog, o si aparecen menos entradas, pon de nuevo ese código después de haber hecho todas las modificaciones deseadas en la sidebar.


ACTUALIZACIÓN 12/abr/2013
Se ha modificado la plantilla para resolver el problema de las entradas que tenían añadido el salto de línea (Leer más) manualmente. También se ha agregado un enlace a la imagen predeterminada para las entradas que no tienen una imagen.

Ocultar botón Send Feedback/Enviar comentarios en las Vistas Dinámicas

Me preguntaban varias personas si había alguna manera de eliminar u ocultar el botón "Send Feedback" o "Enviar comentarios" que aparece en la parte inferior derecha de las plantillas de Vistas Dinámicas.

Sí es posible ocultar este botón. Sólo debemos seguir estos pasos:

1.§ Vamos a Plantilla - Personalizar - Avanzado - Añadir CSS.

2.§ Pegaremos las siguientes líneas de código:

.feedback {
display: none !important;
}

3.§ Damos clic a Aplicar al blog y listo, el botón habrá desaparecido.

Plantillas de San Valentín para blogger 2013

Aquí les dejo dos plantillas de San Valentín para blogger. Son gratuitas y tienen muy buenos diseños.

Heart Beat

Demo - Descarga
Valentine Desktop

Demo - Descarga

Plantillas navideñas para blogger 2012

Aquí les dejo dos plantillas de Navidad para blogger. Son gratuitas y están muy bien para usarlas por estas fechas.

Krismas

Demo - Descarga
Christmas V2

Demo - Descarga

Descargar las plantillas de diseño de Blogger (Mínima, Rounders, Thisaway, etc.)

Desde que la nueva interfaz se lanzó primeramente a modo de prueba me fijé que no incluían las plantillas de diseño del 2006, ya saben, la plantilla Mínima, Rounders, Thisaway, Son of Moto, etc. Pensé que como la interfaz estaba en desarrollo sería cuestión de tiempo para que las agregaran, sin embargo ahora que la nueva interfaz ya es por defecto (y obligación) para todos los usuarios de Blogger veo que siguen sin incluirse esas plantillas.

En su momento hice un respaldo de todas esas plantilla temiendo que justamente no las fueran a incluir más y nos tuviéramos que privar de ellas. Ignoro si más adelante vayan a agregarlas a esa interfaz, pero entre si eso sucede o no, les dejo la descarga de cada una de estas plantillas por si alguien las necesita.

Estas plantillas las guardé desde octubre del 2011 así que seguro no tienen todos los códigos que Blogger continuamente va añadiendo, pero al instalarlas deberán agregarse esos datos de forma automática.

Para descargar cada una de ellas sólo selecciona el nombre de la plantilla que deseas.

Mínima Mínima Dark Mínima Blue Mínima Ochre	Denim Stretch Denim Washed Denim Stretch Denim Light	Rounders Rounders 2 Rounders 3 Rounders 4
Mínima Lefty Mínima Stretch Mínima Lefty Stretch	Herbert JellyFish	Harbor
Scribe	Dots Dots Dark	No. 897 No. 565
Thisaway Thisaway Blue Thisaway Green Thisaway Rose	Son of Moto Mr. Moto Ms. Moto	Snapshot Snapshot Sable Snapshot Tequila
TicTac TicTac Blue	Tekka	Sand Dollar
Simple II

Recuerda que, para subir una plantilla en la nueva interfaz debes ir a la sección Plantilla, y en la parte superior derecha verás un botón que dice Crear copia de seguridad/Restablecer. Dando click ahí podrás subir tu plantilla en formato XML.

Todo al rojo

REFERENCIA:reinventaWEB

Introduciendo la plantilla para Blogger: Fashionista

¡Hola qué tal!, ya tengo lista para compartirte la plantilla que ya te había mencionado antes desde Google+, es una plantilla minimalista altamente personalizable, y lo mejor de todo es que le puedes dar un look diferente desde el Diseñador de Plantillas  ;)

Esta plantilla puede adaptarse a varias temáticas, como blogs de moda, decoración, etc. Guarda un orden perfecto en las separaciones de los posts y la columna lateral, y usa colores sólidos (sin texturas). Utiliza masonry, un plugin de jQuery que permite que los posts que flotan de este modo, no necesariamente tengan que tener la misma altura, de ese modo podemos crear el efecto de mosaico sin problemas.

Olvídate de ingresar a la edición de HTML de la plantilla para editar los elementos como el menú desplegable, los iconos sociales y el carrusel, ya que estos los agregarás/editarás desde un gadget con la opción HTML/Javascript, así evitarás dolores de cabeza, o perderte entre el código de la plantilla. Aunque si eres usuario avanzado, desde luego puedes hacer cambios desde la edición de HTML de la plantilla.

Demostración

Características

• Plantilla de cuatro columnas (tres de los posts, y una lateral adicional para agregar gadgets)


• Iconos sociales en la parte superior


• Menú en la parte superior izquierda que son los títulos de las páginas estáticas


• Menú desplegable adicional


• Carrusel de imágenes para que puedas destacar algunos posts


• Cuatro columnas adicionales en el footer


• Resumen automático en las entradas

El resumen de las entradas es automático, aunque si lo quieres, puedes mostrar sólo la imagen en la página principal, y para ello, necesitas poner la imagen como primer elemento en el post, desde el panel de edición de entradas, y poner el salto de linea debajo de ésta, como se muestra en la imagen, puedes ver el resultado en la plantilla de demostración.

Así es como se muestra el layout o Diseño, en la imagen puedes ver la ubicación de cada elemento de la plantilla , ya que todos los elementos han sido colocados en secciones, de ese modo, puedes editar los elementos desde la sección de Diseño:

Click para ampliar

Cómo Agregar y Editar los Iconos de Redes Sociales

Ve a Diseño y en el gadget superior derecho (ver imagen arriba del diseño donde dice iconos sociales) haz click en "Editar" y agrega el siguiente código:

<ul id="m-soc2">

<li><a class="twitter" href="#"></a></li>

<li><a class="facebook" href="#"></a></li>

<li><a class="google" href="#"></a></li>

<li><a class="pinterest" href="#"></a></li>

<li><a class="rss" href="#"></a></li>

</ul>

Luego, sustituye las almohadillas "#" por la dirección web de cada página respectivamente. Es fácil saber a que página corresponde cada enlace, ya que la clase (class) lleva el nombre de cada red social.

Cómo Agregar y Editar el menú desplegable

Ve a Diseño y en el gadget del lado derecho de la cabecera, agrega el siguiente código:

<ul id="nav">

<li>

<a class="inicial" href="#">Salud</a>

<ul>

<li><a href="#">Salud 1</a></li>

<li><a href="#">Salud 2</a></li>

</ul>

</li>

<li>

<a class="inicial" href="#">Amore</a>

<ul>

<li><a href="#">Amore 1</a></li>

<li><a href="#">Amore 2</a></li>

</ul>

</li>

<li>

<a class="inicial" href="#">Belleza</a>

<ul>

<li><a href="#">Belleza 1</a></li>

<li><a href="#">Belleza 2</a></li>

<li><a href="#">Belleza 3</a></li>

</ul>

</li>

<li>

<a class="inicial" href="#">Moda</a>

<ul>

<li><a href="#">Moda 1</a></li>

<li><a href="#">Moda 2</a></li>

<li><a href="#">Moda 3</a></li>

<li><a href="#">Moda 4</a></li>



</ul>

</li>

<li>

<a class="inicial" href="#">Recetas</a>

<ul>

<li><a href="#">Recetas 1</a></li>

<li><a href="#">Recetas 2</a></li>

</ul>

</li>

<li>

<a class="inicial" href="#">Viajes</a>

</li>



</ul>

Luego, edita lo que esta resaltado de rojo, guíate por cada linea de código, en donde están las almohadillas "#", pones la dirección de la página a donde quieres que te dirija, y enseguida está el texto que corresponde a cada enlace respectivamente.



Puedes agregar más enlaces dentro de cada sección con enlaces, o bien puedes quitarlos. Por ejemplo, vamos a suponer que quieres quitar el último enlace de Moda, entonces, quitarías esta linea:

<li><a href="#">Moda 4</a></li>

Si por lo contrario quisieras agregar otro enlace en Recetas, entonces colocarías una linea de código debajo de la última que haya, es decir, debajo de:



<li><a href="#">Recetas 2</a></li> pondrías:

<li><a href="#">Recetas 3</a></li>

...y así sucesivamente, por supuesto, con tus respectivos textos y direcciones de las páginas que editarás en el código.

Cómo Agregar y Editar el carrusel

Desde Diseño, identifica el gadget donde colocarás el HTML del carrusel (ver imagen arriba del diseño) y agregas esto:

     <div class="infiniteCarousel">

<div class="wrapper" style="overflow-x: hidden; overflow-y: hidden; ">

<ul>

      <li><a href="#"><img alt="" src="URL DE LA IMAGEN" /><span>Texto que se muestra</span></a></li>

                                                      <li> <a href="#"> <img alt="" src="URL DE LA IMAGEN" /><span >Texto que se muestra</span></a></li>

                                                      <li><a href="#"><img alt="" src="URL DE LA IMAGEN" /><span>Texto que se muestra</span></a></li>

                                                       <li><a href="#"><img alt="" src="URL DE LA IMAGEN" /><span>Texto que se muestra</span></a></li>

                                                      <li><a href="#"><img alt="" src="URL DE LA IMAGEN"/><span>Texto que se muestra</span></a></li>

                                                      <li><a href="#"><img alt="" src="URL DE LA IMAGEN"/><span>Texto que se muestra</span></a></li>

                                                     </ul>    

      </div>        

         </div>

Cada imagen con su enlace y texto que se mostrará al poner el puntero del ratón sobre la imagen, viene resaltado de rojo, y cada uno está dentro de un elemento de lista, es decir dentro de <li>...</li>, así que si necesitas mas imágenes, tendrás que repetir todo esto:

<li><a href="#"><img alt="" src="URL DE LA IMAGEN"/><span>Texto que se muestra</span></a></li>

...antes de </ul> de ese código.



Donde esta la almohadilla, pones la dirección de la página a donde se va a dirigir, y el resto es para la URL de la imagen, y para el texto que se muestra al poner el puntero del ratón sobre la imagen. La medida recomendada para la imagen es de 175 pixeles de ancho x 155 pixeles de alto.



Puedes usar otro efecto en las imágenes del carrusel, si ya estas familiarizado con la Edición de HTML de la plantilla y para ello deberás buscar estas lineas de código:



.infiniteCarousel ul li a:hover span{height:90px; padding-top:80px;

Luego, lo que resalte de rojo, lo eliminas o bien, lo vuelves comentario poniendo una barra-asterisco al principio y asterisco barra al final, como se muestra abajo, para que no se interpreten esas propiedades, de ese modo, puedes usar los dos estilos cuando quieras,  poniéndolo y quitándolo ¿me explico? Entonces  quedaría así:



.infiniteCarousel ul li a:hover span{/*height:90px; padding-top:80px;*/...el resto de las propiedades





Enseguida de eso, están el resto de las propiedades para la capa con el texto que se muestra en el evento hover (al poner el puntero del ratón sobre la imagen). Y el resultado sería este:

Ahh, pero, ¿buscas un look, con menos dramatismo?, entonces ¡ve al Diseñador de plantillas y consíguelo!

¿Todavía más claridad?, no hay problema, puedes conseguirlo fácilmente cambiando los colores...  

Bordes con un tono más fuerte, fuentes distintas, colores brillantes, en fin todo lo que buscas lo conseguirás muy fácilmente gracias a las bondades del Diseñador de plantillas ;)





¡Así que, ve a jugar al Diseñador de plantillas y diviértete creando tu propio look...!

Descargar



Temporalmente suspendida la descarga por actualizaciones, avisaré cuando este lista para la descarga 

Introduciendo la Plantilla para Blogger Cocinando con Adela

Ya tengo lista la primer versión de la plantilla Cocinando con Adela que ya te había mencionado antes, es una plantilla pensada en blogs de cocina, puedes personalizar la imagen de la cabecera con tu logo, con una imagen propia, o bien no poner ninguna.



También es una plantilla versátil como la plantilla Versatile, ya que podrás cambiar los fondos de ciertos elementos, como el color de fondo del menú, fondo de la galería de imágenes miniaturas de tus entradas populares, etc, desde el Diseñador de Plantillas, de ese modo, la plantilla tendrá una apariencia diferente cada vez que lo quieras, y podrás darle tu toque personal fácilmente, sin ingresar a la edición de HTML de la plantilla, así que a divertirse ;)

Para Ingresar al Diseñador de Plantillas, necesitas ir a Plantilla > Personalizar > Avanzado y desde ahí hacer los cambios que desees.



Características

• Plantilla de 2 columnas


• Menú desplegable


• Resumen automático en las entradas


• Buscador Integrado en el header


• Mucho espacio para colocar gadgets


• Sección especial para agregar banner publicitario el el heaer de 468x60 pixeles


• Secciones especiales para agregar banners de 125x125 pixeles (agregas gadget de imagen y pones el enlace)


• Sección especial para mostrar tres gadgets de forma alterna 


• Sección especial para mostrar galería de imágenes en miniatura del gadget de Entradas populares


• Tres columnas adicionales en el Footer

Demostración   

Tendrás mucho espacio para colocar gadgets, como puedes ver en la imagen:

Como Personalizar la imagen de la cabecera o header

Lo puedes hacer de dos maneras, la primera, es colocar una imagen en el #outer-wrapper, en donde actualmente muestra esa imagen de los sartencitos que puse en la demostración, la ventaja de ponerla ahí, a diferencia de subirla desde Diseño en la sección de la cabecera, es que la imagen puedes ser tan grande "de alto" como desees, ya que no está limitada al alto del header. En cuanto al ancho, no debería superar los 990 pixeles que tiene definido. Te recomiendo usar como fondo la imagen del body (el pattern), en el editor que uses, o bien usar una imagen con fondo transparente.

La otra forma, es ir a Diseño y subir la imágen que quieras desde la sección de la cabecera, donde puedes elegir que se muestre en lugar del título y la descripción, debajo de estos etc. Puedes mover dicha imagen por medio del #header-inner.

Como editar el Menú de navegación

Esta es la estructura que tiene el menú desplegable, y que necesitas que editar, he resaltado de rojo lo que necesitas cambiar:

<!-- Empieza Menú Desplegable -->

<div class='nav'>

  <ul class='menu' id='menu'>

    <li class='nodiv'><a class='nodiv' expr:href='data:blog.homepageUrl'>Inicio</a></li>

    <li>

      <a class='desplegable' href='#'>Entradas</a>

      <ul>

        <li><a href='#'>Ensaladas</a></li>

        <li><a href='#'>Aderesos</a></li>

        <li class='submenu'>

          <a href='#'>Sopas &#187;</a>

          <ul>

            <li class='noborder'><a href='#'>Sopas 1</a></li>

            <li><a href='#'>Sopas 2</a></li>

            <li><a href='#'>Sopas 3</a></li>

          </ul>

        </li>

      </ul>

    </li>

    <li>

      <a href='#'>Platillos</a>

      <ul>

        <li><a href='#'>Platillo 1</a></li>

        <li><a href='#'>Platillo 2</a></li>

        <li><a href='#'>Platillo 3</a></li>

        <li class='submenu'>

          <a href='#'>Guisos &#187;</a>

          <ul>

            <li class='noborder'><a href='#'>Guiso 1</a></li>

            <li><a href='#'>Guiso 2</a></li>

            <li><a href='#'>Guiso 3</a></li>

            <li><a href='#'>Guiso 4</a></li>

          </ul>

        </li>

       </ul>

    </li>

    <li>

      <a href='#'>Postres</a>

      <ul>

        <li><a href='#'>Panes</a></li>

        <li><a href='#'>Pasteles</a></li>

        <li><a href='#'>Helados</a></li>

        <li><a href='#'>Galletas</a></li>

        <li><a href='#'>Gelatinas</a></li>

      </ul>

    </li>

<li>

      <a href='#'>Otras</a>

      <ul>

        <li><a href='#'>Otras 1</a></li>

        <li><a href='#'>Otras 2</a></li>

        <li><a href='#'>Otras 3</a></li>

              </ul>

    </li>

    <li>

      <a class='last' href='#'>Favoritos</a>

      <ul>

        <li><a href='#'>Favorito 1</a></li>

        <li><a href='#'>Favorito 2</a></li>

        <li><a href='#'>Favorito 3</a></li>

        <li><a href='#'>Favorito 4</a></li>

       </ul>

    </li>

  </ul>

Ya deje el menú con algunos textos para los enlaces que tendrás que editar, poniendo tus propios textos y la dirección web a donde quieres que se dirija al hacer click sobre este.

Simplemente sigue cada linea de código y dentro de la linea debe estar el texto y la dirección web.

Ejemplo:



<li><a href='#'>Favorito 1</a></li>

Donde esta la almohadilla '#'  pones el enlace en sustitución a este, recuerda quitar la almohadilla de otro modo no funcionará, sólo debe estar el enlace.



Y donde dice Favorito 1, pones el texto del enlace.

Cómo configurar la fecha de los posts

Necesitas ir a Configuracion > Idioma y Formato (en la nueva interfaz) y en Formato hora, seleccionarla como se muestra en la imagen:

*Varía según la fecha actual.

Cómo agregar los banners publicitarios

Sólo necestitas agregar la imagen en el gadget de "Imagen" en las secciones correspondientes,  y agregar el enlace para dicha imagen en la configuración.

Cómo agregar últimas entradas con miniatura

Desde diseño, haz click en el gadget de Lista de Blogs y agrega el siguiente enlace de forma repetitiva, cambiando el número marcado de rojo cada vez que agregues el enlace, (el primer enlace 1, luego 2, después 3...) cada enlace sirve para que se muestre una entrada, y vas a poner tantos enlaces como entradas quieras mostrar.

http://Nombreblog.blogspot.com/feeds/posts/default?start-index=1&max-results=1

Deberás configurarlo para que muestre el titulo y la imagen miniatura. Todas mostrarán el enlace a la entrada que dice: "Ver artículo".

Configurar el gadget de entradas populares  (galería de miniaturas) para que muestre el tooltip

Necesitas configurar el gadget de entradas populares, para que muestre solamente la miniatura, no marques la casilla del fragmento, de ese modo se verá el tooltip con el título de la entrada.

Cómo mostrar la Evaluación de Estrellas

Para agregarlo, solo necesitas ir al Diseño de la plantilla y hacer click en la sección de la Entradas y marcar la casilla para que se muestre:

Este elemento estuvo por un tiempo en periodo de prueba desde Blogger in Draft, luego lo pasaron a Blogger, y después lo regresaron, ahora, según compruebo no necesitas ir a Blogger in Draft, si esto cambia otra vez, ya sabes donde encontrarlo ;)

Descargar

Ahora, lo que sigue es, compartir esas ricas recetas!!

Créditos:

Javascript del menú desarrollado por: scriptiny

Plantillas para Blogger en azul

Escoger el color de nuestra plantilla puede ser una tarea que nos lleve tiempo decidirnos o quizás lo tengamos muy claro desde el primer momento.

La temática del sitio influye especialmente en la decisión. Los sitios dedicados a bebés, servicios médicos o tecnología se decantan por tonos azulados y en esta decisión tiene mucho que ver lo que nos trasmiten los colores.

El color azul nos transmite calma y seguridad, nos recuerda el cielo y el mar.

Junto a otros colores como el naranja o el verde se obtienen combinaciones alegres mientras que con el gris o el negro aportan elegancia y austeridad.

Todas estas plantillas y algunas más en reinventaWEB

Introduciendo la Plantilla Exclusiva para Blogger: "Círculos"

Hola, ¿cómo estás?, como te lo había prometido, ya tengo lista la plantilla y de forma exclusiva podrás descargar desde Google Plus.



Es una plantilla perfecta para blogs que siempre muestren imágenes relevantes, es un diseño minimalista, con contrastes que la hacen ver muy elegante, y además es versátil, ya que podrás cambiar el color de elementos clave, como el color de fondo del menú y detalles del footer desde el Diseñador de Plantillas, para darle un toque único ;)



Características

• Plantilla de dos columnas


• Imagen principal del post que será mostrada en un círculo como se puede apreciar


• Barra flotante en el top, que podrás cambiar si no quieres la posición fixed


• Menú en el top que son los títulos de las páginas estáticas


• Sección especial para agregar gadgets


• Sección especial en sidebar para agregar banners de 125x125 pixeles


• Gadget de entradas populares personalizado, que es la galería de imágenes horizontal


• Iconos Sociales para que te sigan en el footer


• 3 columnas adicionales en el footer


• Comentarios Personalizados


• Imágenes optimizadas

Demostración

La plantilla sólo usa 3 imágenes de las 12 que hubiera necesitado si las pusiera de forma separada, lo cual definitivamente le da más rendimiento al blog, en lo que al tiempo de carga se refiere. De cualquier modo te recomiendo almacenarlas por ti mismo en Blogger, para luego sustituir los enlaces respectivamente.

Cambiar la posición fija de la barra del menú

Si te decides por no tener posición fixed (que flote) en la barra del menú, simplemente elimina estas propiedades en #crosscol-wrapper

position: fixed;

top: 0;

left: 0;

z-index:20;

Configurar imagen en la página Principal

El resumén de entradas no utiliza Javascript, es sólo con CSS, y te recomiendo que pongas el salto en linea de Blogger desde el editor entradas, si no lo haces se mostrará la última imagen del post, cuando uses más de dos imágenes. Te recomiendo mostrar entradas impares 3,5,7, para darle un look asimétrico, aunque tu decides.



ACTUALIZACIÓN: Ahora no es necesario que insertes el salto de linea, debido a una actualizacion que hice en la plantilla ;)

Si no te gusta que muestre "Home" en el enlace de navegación para dirigirse a la página principal, sólo cambia la posición de la imagen para que se muestre "Inicio", y lo haces en esta linea de CSS:

a.home-link{

background-position: -187px -284px; /* -157px -329px; para Inicio*/

Es decir, en lugar de poner:



background-position: -187px -284px;    pondrás:

background-position: -157px -329px;

Configurar el gadget de Entradas Populares



Sólo configura el gadget de "Entradas populares", para que muestre solamente la miniatura, de ese modo se verá el tooltip con el título de la entrada. También puedes hacer más grande la letra del título del gadget (Lo + Visto) cambiando el valor de font-size, en #Popularposts2 h2.





Configurar el gadget del Feed para que muestre últimas entradas (Lo + Nuevo)



Sólo agrega el siguiente enlace al gadget del Feed, sustituyendo el nombre de tu blog, resaltado de rojo:

http://Tu-blog.blogspot.com/feeds/posts/default

Agregar enlaces de Redes Sociales

Para agregar los enlaces de tus páginas, ve a la edición de HTML, y sustituye la almohadilla (#) por la dirección web, y si deseas, cambia el texto que está resaltado de rojo. Solo sigué linea por linea y guiate con las clases que llevan el nombre de la red respectivamente.

<ul id='m-social'>

<li><a class='twitter' href='#' rel='nofollow' target='_blank'><span> Sígueme en Twitter</span></a></li><li>

<a class='facebook' href='#' rel='nofollow' target='_blank'><span>Sígueme en Facebook</span></a></li>

<li><a class='rss' href='#' target='_blank'><span>Recibe Actualizaciones</span></a></li>

<li><a class='plus' href='#' target='_blank'><span>Llévame a un Círculo</span></a></li>

</ul>

Espero que te guste, y cualquier inquietud, etc, no dudes en comentarla, se aceptan críticas de todo tipo ;)



El link de descarga, en unos minutitos más en la página de Google Plus. (sólo para quienes estén en mis círculos), ¡espera muchas más!.



Crédito por las imágenes en los posts de la demostración: nonsen sesociety



Podrás acceder al link de descarga, sólo si estás en mis círculos. Versión actualizada.

Download EN version

Descargar ES