Cómo adaptar tu plantilla Blogger a vista móvil [Videotutorial]

En la actualidad, casi todas las plantillas son responsive o adaptadas a vista móvil, por lo que cada vez son menos los blogs y webs, que no cuentan con este sistema, pero aún quedan algunos. Así que si formas parte de ese pequeño grupo que aún no ha actualizado su plataforma, ya va siendo hora de que lo hagas.

Básicamente por dos motivos esenciales:

 Google penaliza las páginas que no están adaptadas a vista móvil

 Los usuarios que te visiten desde su smarthphone (que ya superan a los que lo hacen desde el PC) huirán despavoridos, si se tienen que dejar las pestañas para leer tu contenido.

Son motivos de peso ¿verdad? pues vamos a solucionarlo de una manera sencilla.

Antes de nada, te aviso de que no vamos a convertir la plantilla en responsive. Este tutorial es para personalizar la plantilla que Blogger te brinda, para vista móvil. Si tienes dudas, sobre la diferencia entre plantilla responsive y plantilla adaptada a vista móvil, mírate antes el enlace que te acabo de dejar, porque el tutorial que te he preparado es largo y no lo quiero extender aún más.

Aquí tienes el vídeo con todo el paso a paso, por si te resulta más sencillo de seguir de este modo. Bajo el vídeo, tienes todo el tutorial, dividido por secciones, para que localices fácilmente los códigos que te interesen:




Empezamos!


Dirígete a Plantilla y clica en la rueda dentada que aparece bajo la plantilla móvil.


Escoge la opción Personalizado y guarda los cambios. Si miras ahora el blog desde tu smartphone, verás que se ha adaptado a vista móvil, pero hay bastantes cosillas que se podrían mejorar o añadir ¿verdad? pues vamos paso a paso, para configurar la vista totalmente a tus necesidades.

ADAPTAR TU MENÚ A VISTA MÓVIL

Hace 2 semanas, te mostré 3 maneras diferentes de personalizar un menú en Blogger, pero no te conté cómo adecuar esos menús a vista móvil, por lo que si has seguido alguno de los 2 tutoriales que mostré exclusivamente en el blog privado, el menú no se mostrará al completo desde el smartphone.

Pues se acabó el problema, porque hoy lo adaptarás perfectamente.

MENÚ DE BLOGGER

Pero vamos con el 1º de ellos, en el que usábamos el mismo gadget de páginas de nos trae Blogger, como menú horizontal. Si es tu caso, no tienes que hacer gran cosa más allá de cambiar colores y fondos, porque Blogger lo adapta a vista móvil mediante un desplegable, como puedes ver en esta imagen:

Para cambiar los colores de tu menú, dirígete a Plantilla >Editar HTML (recuerda hacer una copia de seguridad, antes de liarte a hacer cambios) y haz clic en cualquier sitio, dentro de la plantilla para pulsar Ctrl+F y que te salga la caja de búsqueda.

Pega lo siguiente: .mobile .tabs-inner .PageList .widget-content {

Ahora que has localizado la parte que interesa, sustitúyela por completo por este código:

.mobile .tabs-inner .PageList .widget-content {

  background-color: #becfe7; /*color de fondo del menú*/

  color: #727272; /*color del texto*/

  border-top: 1px solid #becfe7; /*borde superior del menú*/

  border-bottom: 1px solid #becfe7; /*borde inferior del menú*/

}

Mira el vídeo, si no sabes cómo hacer los cambios.

MENU SUPERIOR PERSONALIZADO

Si has creado un menú personalizado añadiendo tu propio CSS (parecido al que puedes ver en este blog) , entonces la cosa, se complica un poco más, porque tienes que crear un nuevo menú para el móvil, así que vamos a ello.

Te aconsejo que no añadas muchas páginas para vista móvil, porque al estar dispuestas las secciones en línea, se mostrará demasiado alto y quedará feote. Así que lo mejor es elegir las 4 o 5 secciones más importantes.

Vamos al lío!

Copia este código, pégalo en el bloc de notas y configúralo según tus necesidades:

<div id='menu-movil'>
<a href='URL DE PÁGINA'>NOMBRE DE PÁGINA</a>
<a href='URL DE PÁGINA'>NOMBRE DE PÁGINA</a>
<a href='URL DE PÁGINA'>NOMBRE DE PÁGINA</a>
<a href='URL DE PÁGINA'>NOMBRE DE PÁGINA</a>
</div>

•  Si tienes más páginas, copia una línea y pégala a continuación (antes del cierre de la etiqueta div)

•  Si tienes menos, borra las líneas que necesites.

•  Si quieres añadir tus redes sociales, añade también esta parte. Antes, tendrás que tener instalada la cartera de iconos en tu plantilla. Si no la tienes, antes de nada, busca <head> en tu plantilla y justo debajo, pega este código: <link href=’//netdna.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.css’ rel=’stylesheet’/>

¿Ya lo tienes? pues pega esto antes del cierre de tu etiqueta div, en el menú movil que estás configurando.

<a href=’URL FACEBOOK’><i class=’fa fa-facebook’/></i></a>



<a href=’URL INSTAGRAM’><i class=”fa fa-instagram”></i></a>


<a href=’URL GOOGLE+’><i class=”fa fa-google-plus”></i></a>


<a href=’URL PINTEREST’><i class=”fa fa-pinterest”></i></a>


<a href=’URL TWITTER’><i class=”fa fa-twitter”></i></a>

 Quedaría de la siguiente manera:

<div id='menu-movil'>
<a href='URL DE PÁGINA'>NOMBRE DE PÁGINA</a>
<a href='URL DE PÁGINA'>NOMBRE DE PÁGINA</a>
<a href='URL DE PÁGINA'>NOMBRE DE PÁGINA</a>
<a href='URL DE PÁGINA'>NOMBRE DE PÁGINA</a>
<a href='URL FACEBOOK' target='_blank><i class='fa fa-facebook'/></a>
<a href='URL INSTAGRAM' target='_blank><i class="fa fa-instagram"></i></a>
<a href='URL GOOGLE+' target='_blank><i class="fa fa-google-plus"></i></a>
<a href='URL PINTEREST' target='_blank><i class="fa fa-pinterest"></i></a>
<a href='URL TWITTER' target='_blank><i class="fa fa-twitter"></i></a>
</div>

 Cuando lo tengas totalmente configurado, dirígete a la plantilla y busca este código: <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>

Pega tu menú móvil, justo debajo. Procura que quede por encima del menú que personalizaste para vista en ordenador, porque vamos a añadir una condicional, para que cada versión aparezca en el dispositivo correspondiente. Observa cómo está montado, porque te voy a explicar las secciones coloreadas:

<body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>
<b:if cond=’data:blog.isMobile’>

<div id=’menu-movil’>

<a href=’http://demo20spark.blogspot.com.es/’>INICIO</a>

<a href=’http://demo20spark.blogspot.com.es/p/conoceme.html’>SOBRE MI</a>

<a href=’http://demo20spark.blogspot.com.es/p/indice_15.html’>INDICE</a>

<a href=’http://demo20spark.blogspot.com.es/p/contacto.html’>CONTACTO</a>

<a href=’URL PAGINA FACEBOOK’><i aria-hidden=’true’ class=’fa fa-facebook’/></a>

<a href=’URL PAGINA TWITTER’><i aria-hidden=’true’ class=’fa fa-twitter’/></a>

<a href=’URL PAGINA GOOGLE+’><i aria-hidden=’true’ class=’fa fa-google-plus’/></a>

<a href=’URL PAGINA INSTAGRAM’><i aria-hidden=’true’ class=’fa fa-instagram’/></a>

<a href=’URL PAGINA YOUTUBE’><i aria-hidden=’true’ class=’fa fa-youtube’/></a>

</div>

<b:else/>

<div id=’menu-superior’>

<div id=’menu’>

<ul>

<li><a href=’http://demo20spark.blogspot.com.es/’>INICIO</a></li>

<li><a href=’http://demo20spark.blogspot.com.es/p/conoceme.html’>SOBRE MI</a></li>

<li><a href=’http://demo20spark.blogspot.com.es/p/indice_15.html’>INDICE</a></li>

<li><a href=’http://demo20spark.blogspot.com.es/p/contacto.html’>CONTACTO</a></li>

<li><a href=’URL PAGINA FACEBOOK’><i aria-hidden=’true’ class=’fa fa-facebook’/></a></li>

<li><a href=’URL PAGINA TWITTER’><i aria-hidden=’true’ class=’fa fa-twitter’/></a></li>

<li><a href=’URL PAGINA GOOGLE+’><i aria-hidden=’true’ class=’fa fa-google-plus’/></a></li>

<li><a href=’URL PAGINA INSTAGRAM’><i aria-hidden=’true’ class=’fa fa-instagram’/></a></li>

<li><a href=’URL PAGINA YOUTUBE’><i aria-hidden=’true’ class=’fa fa-youtube’/></a></li>

<li><div id=’buscador’><form action=’/search’ id=’searchthis’ method=’get’ style=’display: inline;’>

<input class=’search-box’ name=’q’ placeholder=’BUSCAR’ size=’30’ type=’text’/>

</form></div></li>

</ul>

</div>

</div>

</b:if>

La parte señalada en amarillo, es lo que tienes que localizar, para añadir debajo, el HTML para vista móvil.

Lo señalado en verde , es la condicional que tienes que añadir para que, dependiendo desde dónde visiten tu blog (PC o móvil) se muestre el menú correspondiente.

El código que está en morado, es el menú para vista móvil.

El código que está en azul es el menú para vista ordenador.

Ahora vamos a darle un poco de CSS, para personalizarlo al gusto. Busca en la plantilla: </b:skin> y justo encima, añade este código:

#menu-movil{
   background: #b7cdc0; /*fondo del menú*/
   padding-top:2px; /*espacio del texto respecto a la parte superior*/
   margin:0 auto;
   width:100%; 
   text-transform:uppercase; /*para que el texto aparezca en mayúsculas, borra si no quieres*/
   font-size: 12px; /*tamaño del texto*/
   text-align:center; /*para que el texto esté centrado*/
   display:block; 
box-shadow: 0px 2px 6px #333333; /*sombra del menú, borra si no quieres*/
position:fixed; /*para que el menú permanezca fijo, borra si no quieres*/
z-index:101; 
}

#menu-movil a{
padding: 0px 15px ; /*separación entre los elementos de la barra*/
line-height: 50px; /*espacio entre lineas*/
color:#ffffff; /*Color del texto*/
}

#menu-movil i{
font-size: 20px; /*Tamaño de los iconos*/
}

.mobile #header{
padding-top:70px; /*separación de la cabecera respecto al menú*/
text-align: center; /*posición de la cabecera*/
}

Recuerda guardar los cambios y actualizar tu plantilla en vista móvil, para observar los resultados e ir ajustando lo que no te guste. Mira el vídeo si no sabes cómo hacer los cambios.

MENU SUPERIOR DESPLEGABLE 

Para este menú, te voy a dar enlace al tutorial de Odisea Gráfica, en el que Minerva Aurora, explica cómo adaptar tu menú desplegable a vista móvil. Yo lo he adaptado a mis necesidades, porque el desplegable que tenía anteriormente para vista móvil, era bastante sosete en comparación con este. Así que, me parece lógico, que si ella es la que lo ha publicado, te dirija allí para el paso a paso.

Aún así, te recomiendo que metas la condicional que te he mostrado con el menú anterior para que no te dé problemas 😊

CAMBIAR EL ASPECTO DE LA FECHA

Si muestras la fecha en tus posts, quizás te apetezca cambiar la apariencia en la vista móvil:

Vuelve a la caja de búsqueda de la plantilla, para localizar esta parte de tu CSS: .mobile .date-header span {

Cuando te aparezca, añade esto bajo el padding y el margin:

background: #ffffff; /*color de fondo, si no lo quieres, bórralo*/

border: 1px solid #becfe7; /*para enmarcar la fecha, si no quieres, bórralo*/

color: #becfe7; /*color del texto*/

font-size: 10px; /*tamaño del texto*/

Quedaría de esta manera:

.mobile .date-header span {
padding: 0.1em 10px; /*aumentar espacio si la enmarcas*/
margin: 0  0px; /*posicionarla horizontalmente*/
background: #ffffff; /*color de fondo, si no lo quieres, bórralo*/
border: 1px solid #becfe7; /*para enmarcar la fecha, si no quieres, bórralo*/
color: #becfe7; /*color del texto*/
font-size: 10px; /*tamaño del texto*/
}

Si necesitas seguir el paso a paso en vídeo, puedes ver el proceso a partir del minuto 10.

CAMBIAR EL ASPECTO DEL TÍTULO DE LOS POSTS

Localiza esta parte en tu plantilla: .mobile h3.post-title {

Sustitúyela por esto:

.mobile h3.post-title {
margin: 0;
background: #ffffff; /*color de fondo. Si no lo quieres, bórralo*/
border: 1px solid #becfe7; /*para enmarcar el titulo. Si no quieres, bórralo*/
color: #becfe7; /*color del texto*/
font-size: 10px; /*tamaño del texto*/
}

Mira el vídeo (minuto 15'51) si no sabes cómo hacer los cambios.

POSICIONAR LA CABECERA

Si el título de tu blog, no está posicionado como quieres, dirígete a  Plantilla>Editar HTML y haz clic en cualquier sitio dentro de la plantilla, para pulsar Ctrl+F y que te salga la caja de búsqueda. Pega </b:skin> y justo encima, añade este código:

.mobile #header{
padding-top:70px; /*separación de la cabecera respecto a la parte superior*/
font-size:40px; /*para ajustar el tamaño del titulo*/
text-align: center; /*posición de la cabecera*/
}

Cambia a right (izquierda) o left (derecha), si no quieres que la cabecera aparezca centrada.


Puedes ver el paso a paso en el vídeo a partir del minuto 21'23.

AÑADIR O QUITAR GADGETS EN VISTA MÓVIL

Si tienes gadgets en el sidebar que te gustaría que aparecieran en la vista móvil y no salen, lo primero que tienes que hacer es localizar la ID del gadget. Para eso, sitúa el ratón sobre el gadget y haz clic con el botón derecho del ratón, para elegir la opción "Inspeccionar" donde podrás ver la ID .

Una vez que la localizas, es cuestión de ir a Plantilla>Editar HTML y pulsar en el desplegable "Ir al widget".

 Señala la ID correspondiente y cuando te lleve, cambia lo que te he marcado de azul por la palabra yes.


<b:widget id='HTML8' locked='false' mobile='no' title='' type='HTML' visible='true'>


Eso hará que aparezca en vista móvil.

Si quieres que alguno de los elementos del sidebar sólo aparezcan en vista móvil, tendrías que cambiar el no por only. De esta manera:

<b:widget id='HTML8' locked='false' mobile='only' title='' type='HTML' visible='true'>



Por ejemplo, en la personalización del menú superior a vista móvil, he eliminado el buscador, para no saturar este espacio. Pero si quieres tener un buscador en la vista móvil, podrías crearlo (sigue este tutorial para crear un buscador en el sidebar) y dirigirte al gadget correspondiente para añadirle la condicional mobile='only' , porque no tiene mucho sentido tener 2 buscadores en la vista de ordenador (uno en el menú y otro en el sidebar).

Una vez que configures la aparición de los diferentes gadgets a tu gusto, tendrás que ayudarte del CSS, para posicionarlos correctamente, porque lo más probable es que no aparezcan todo lo centrados que te gustaría.

Para eso, como ya sabes localizar la ID, lo único que tienes que hacer es pegar </b:skin>  en la caja de búsqueda , hacer intro, para que te lleve a esa etiqueta y pegar el siguiente código justo encima:

.mobile #ID {

height: auto;

max-width: 100%;

margin: 10px 85px; /*posicionar el gadget horizontal y verticalmente*/
}

Hazlo tantas veces como gadgets añadas a vista móvil, escribiendo la ID correspondiente y ajustando la cantidad a lo que necesites.

Recuerda guardar los cambios y actualizar tu plantilla en vista móvil, para observar los resultados e ir variando hasta que estés conforme con la posición de los elementos. Mira el vídeo (minuto 25'23), si no sabes cómo hacer los cambios.

¿Aún no tienes el blog adaptado a vista móvil? aprovecha ahora con este videotutorial! Tuitéalo

Y con esto terminamos, creo que no me dejo nada, pero si echas de menos algo o tienes dudas/sugerencias que hacerme, no te cortes y déjalas en los comentarios. Con este post, finalizo los tutoriales para personalizar tu blog con CSS, así que aprovecho para recordártelos, porque el verano es una época estupenda para hacer los cambios que necesita tu blog y empezar Septiembre con una imagen potente y renovada.


 Cómo instalar iconos en tu blog para mostrar tus redes sociales

 Cómo poner imágenes o iconos en los botones de compartir el post

 Cómo instalar un botón de subir con imágenes o iconos

 Cómo sustituir entradas antiguas y recientes por iconos

 Cómo personalizar la caja final del post en Blogger

 Cómo personalizar el sidebar de Blogger con CSS

 3 maneras de personalizar tu menú en Blogger



Anímate, verás cómo te vas a alegrar de lo que puedes conseguir tú misma, tocando tu plantilla sin miedo.

Diseña el blog de tus sueños con estos tutoriales para personalizar Blogger con CSS. Tuitéalo

Espero que las vacaciones te sirvan para descansar, madurar ideas y encauzar tus proyectos con acierto en la próxima temporada. En Septiembre, volveré a asomar por aquí, con novedades, aunque en redes sociales, me dejaré caer de vez en cuando y quizás adelante algo 😉



Que tengas un gran verano!

¿Quieres aprender a diseñar bonito y tener un blog atractivo? Échale un vistazo al Curso de Photoshop para Blogueras Creativas, con el que podrás perfeccionar tu manejo de Photoshop, a la vez que desarrollas tu marca y creas el blog que deseas tener. Es un curso muy completo, en el que sin duda, habrá un antes y un después en tus diseños. Échale un vistazo:

Cómo gestionar las imágenes de tu blog.

Las imágenes juegan un papel fundamental en los contenidos de un blog.

Como ya te expliqué en la entrada Cómo combinar tipografías para crear presentaciones atractivas, un post con imágenes obtiene mucha más atención que uno que no las tiene. Y si además, le añadimos infografías, vídeos o podcast, ni te cuento.
Con lo cual, si te encargas tu misma del diseño de tus imágenes, te vendrá bien tener en cuenta estos consejos. 

Empiezo:

REDIMENSIONA LAS IMÁGENES, TENIENDO EN CUENTA EL ANCHO DE TU ENTRADA.

El primer concepto a tener en cuenta es la medida de tus imágenes. Básicamente por tres razones:


 Si no redimensionas tu imagen antes de subirla al blog, esta puede contener un tamaño que ocupe espacio en Picasa,  ya que a partir de 2048px, las imágenes empiezan a ocupar espacio en este alojamiento.  Picasa tiene un límite gratuito de 15 Gb , un espacio más que generoso y que no es fácil colmar, pero si tu blog trabaja con muchas imágenes y no tienes esta precaución, puede acabar pasando . Y si tienes tu propio servidor, fuera de Blogger, con más motivo, porque allí sí que contará el peso de cada imagen, sea del tamaño que sea y los gigas que tengas disponibles, serán los que hayas pagado.

Si quieres saber más sobre Picasa, te dejo enlace a 6 conceptos básicos que necesitas saber cuando tienes un blog, en el que te cuento este y otros cinco consejos que también te pueden interesar.

 Las imágenes que ocupan casi todo el ancho de la entrada son más atractivas visualmente, por lo que, conociendo el ancho total podrás hacer que se redimensionen automáticamente siempre a esa medida.

PARA BLOGGER:

En el punto 5 de este artículo, te cuento cómo redimensionar tus imágenes, para que se ajusten automáticamente a la entrada de tu post.

PARA WORDPRESS:

Normalmente, los temas en Wordpress, vienen con las imágenes ajustadas al ancho de la entrada por defecto, pero si no fuera así, puedes seguir este tutorial y resolverlo en pocos segundos.


 El peso de tus imágenes, ralentiza el tiempo de carga de tus páginas, por lo que tus visitas, pueden perder la paciencia y desaparecer antes de leer el contenido. Siempre, siempre , siempre, sube tus imágenes a Tinypng, antes de subirlas a tu blog.

¿Aunque la redimensione? por supuesto. Con redimensionar solamente no es suficiente, porque podemos aligerar aun más su peso si las pasamos por esta herramienta gratuita. De esa manera, nuestras imágenes tardarán menos en cargar y ocuparan aun menos espacio en nuestro alojamiento.

QUITAR O NO QUITAR LAS SOMBRAS, ESA ES LA CUESTIÓN.

¿CUAL TE GUSTA MÁS?

Para gustos los colores, y aquí hay bandos definidos. Hay quien le hace gracia el borde o marco, que añade Blogger a las fotografías que subimos y estamos los que preferimos quitarlo.

Si a ti tampoco te entusiasma, no te preocupes, que tiene fácil remedio. Dirígete a Plantilla>Editar HTML y pincha en cualquier sitio dentro de la plantilla para pulsar Ctrl+F y que te salga la caja de búsqueda. Pega .post-body img y dale a intro.

Nos interesa la primera línea post-body que aparece. A continuación, te he subrayado en rosa, lo que tienes que cambiar. Debes dejar los valores a 0 y guardar los cambios. Y desde este momento, tus imágenes se mostrarán sin marcos ni sombras. Simple, ¿verdad?.

ASEGÚRATE DE QUE LAS IMÁGENES LARGAS (TIPO INFOGRAFÍA) SE LEAN BIEN.

Cuando hacemos infografías largas, Blogger nos la reduce a un máximo de 1600pxs, porque es lo que tiene establecido, lo que dificulta bastante la visualización de la imagen. Para evitarlo, una vez que hayas subido tu infografía (a tamaño normal), cambia la vista al modo HTML y fíjate cómo en una parte de tu imagen sale el comando s1600 en dos líneas. Búscalos, cámbialos por s0  y problema resuelto. Aquí te dejo una captura, para que lo localices más fácilmente y a continuación, un antes y un después, ¡verás qué cambio!

3 sencillos trucos para sacar más partido a las imágenes de tu blog ¡no te lo pierdas! Tuitéalo

Pues vamos terminando por hoy, Con estos tres conceptos, te será mucho más sencillo manejar tus imágenes de manera eficaz. Cuéntame, ¿has tenido alguna vez este problema al tratar de crear una infografía? ¿redimensionas las imágenes antes de subirlas? ¿conocías que Picasa tiene un espacio gratuito limitado? ¿eres más de borde o 0,0?.

¡Que tengas un gran día!

¿Te gustaría seguirme en tu lector de feeds favorito?

Si quieres seguir aprendiendo, no olvides unirte a la Comunidad Demo 2.0, porque te esperan contenidos, guías, descargables y secretillos de gran valor exclusivos, que no verás en el blog, como esta super-guía para que aprendas a usar imágenes en la red (sin buscarte problemas) en la que además tendrás acceso a millones de imágenes gratuitas para usar en tu blog, sin ningún miedo.

¿Qué me dices? ¿te apuntas? si es así, encantada de contar contigo   

Imágenes infografía: Unsplash y Picjumbo

Cómo personalizar el sidebar de Blogger con CSS

Buen jueves! ya andamos otra vez por aquí con nueva entrada para personalizar al máximo tu blog en Blogger con CSS. En el último tutorial publicado, te mostré cómo personalizar el footer del post y hoy le toca el turno al sidebar. Vas a ver qué fácil es darle estilo con un poquito de código ¿preparada? allá que vamos!

Un buen sidebar, gana muchos puntos a la hora de atraer la atención hacia tus contenidos. En esta ocasión, voy a hablarte de cómo atraer con el diseño, pero no te olvides de cuidar también los gadgets que alojas en él para potenciar tus objetivos.

CÓMO PERSONALIZAR LOS TÍTULOS DEL SIDEBAR EN BLOGGER

Voy a empezar con los títulos del sidebar, porque tienen muchas posibilidades. Aquí te dejo una imagen de lo que puedes conseguir, para que mires lo que más se ajusta a tu estilo y justo debajo tienes el vídeo y los códigos que necesitas para llevarlo a cabo:

¿Cuál te ha gustado más? elíge el código y dale al play para ver el vídeo en el que te explico el paso a paso:






Aquí te dejo un post con 6 conceptos básicos que debes saber de Blogger, en el que te cuento cómo localizar la dirección de una imagen, entre otras cosas. Y estos son los tipos de líneas más comunes en CSS. Te los nombro, por orden de aparición en la imagen: solid, dashed, dotted, double, ridge y groove:

TÍTULO CON FONDO DE IMAGEN

div.widget > h2,
div.widget h2.title {
  margin: 0 0 1em 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
background: url("DIRECCIÓN DE TU IMAGEN") repeat-x;
padding: 10px;
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

TÍTULO CON FONDO LISO

div.widget > h2,
div.widget h2.title {
  margin: 0 0 1em 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
background: #F3C2D8;
padding: 10px;
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

TITULO CON FONDO Y LÍNEA

div.widget > h2,
div.widget h2.title {
  margin: 0 0 1em 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
background: #F3C2D8;
border-top: 2px solid #C38AA3;
padding: 10px;
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

TITULO ENMARCADO

div.widget > h2,
div.widget h2.title {
  margin: 0 0 1em 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
border: 5px ridge #C38AA3;
padding: 10px;
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

TITULO ENMARCADO CON REDONDEO

div.widget > h2,
div.widget h2.title {
  margin: 0 0 1em 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
border: 5px double #C38AA3;
border-radius: 25px;
padding: 10px;
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

TITULO CON LÍNEAS INDEPENDIENTES

div.widget > h2,
div.widget h2.title {
  margin: 0 0 1em 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
border-top: 5px ridge #C38AA3;
border-bottom: 3px dotted #C38AA3;
padding: 10px;
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

ENMARCAR LOS GADGETS DEL SIDEBAR Y FIJAR EL TÍTULO EN MEDIO DEL MARCO SUPERIOR.

Otra opción es enmarcar el sidebar y fijar el título a mitad del marco superior, que queda también muy bonito, si le sacamos partido con las opciones que te he enseñado anteriormente. Para que te hagas una idea, te dejo esta imagen y también puedes ver otro efecto distinto en este blog de pruebas:

¿Te gustaría adaptarlo a tu blog? pues al lío! bajo el vídeo, tienes el código que necesitas para lograr esta estética en tu sidebar. Dale al play, que te lo cuento con detalle:

.column-right-outer .widget{

border: 2px solid #BBCBE3;

border-radius:0px;

-moz-border-radius:0px;

-webkit-border-radius:0px;

padding:20px;

margin: 50px 0;

}

Si tienes el sidebar a la izquierda, tendrás que sustituir .column-right-outer por .column-left-outer. Un poco más abajo, encuentras el apartado Headings en el que tendrás que reemplazar el código actual, por este otro (mira el vídeo para no equivocarte):

div.widget > h2,

div.widget h2.title {

 margin: -35px 0 1em 0;

 text-align: center;

text-transform: uppercase;

letter-spacing: 1px;

background: #ffffff;

padding: 3px;

}

Listo! El color, la tipografía y el tamaño, mejor lo cambiamos en el diseñador de plantillas. Y con esto me despido, que aún tengo mucho que preparar, porque se avecinan lanzamientos que estoy deseando contarte con detalle. Que tengas un gran día!

¿Quieres aprender a diseñar bonito y tener un blog atractivo? Échale un vistazo al Curso de Photoshop para Blogueras Creativas, con el que podrás perfeccionar tu manejo de Photoshop, a la vez que desarrollas tu marca y creas el blog que deseas tener. Es un curso muy completo, en el que sin duda, habrá un antes y un después en tus diseños. Échale un vistazo:

Socorro, Blogger se me queda pequeño!

Tenía claro que más tarde o más temprano llegaría este momento. Lo que no imaginaba es que lo hiciera tan rápido. Mira que soy cabezona cuando me "emperro" en algo y una de mis tozudeces era quedarme en Blogger durante mi primer año en el blog, una vez lo publicara. 

Pero 3 meses después me veo obligada a hacer las maletas y la verdad, es que tengo una mezcla de agobio y pena. No va a ser una mudanza inmediata, pero antes de que comience Septiembre espero haberme alojado en mi nuevo hogar: me marcho a Wordpress. De momento voy a pasar una parte importante que me corre mucha prisa y que es la principal responsable de que me haya planteado moverme de esta plataforma a la que tanto le debo y en la que dicho sea de paso, estoy súper cómoda.


POR QUÉ HE DECIDIDO CAMBIARME A WORDPRESS

Siempre me ha dado un pelín de vértigo lo desconocido.



  Cuando mis amigos me decían que cuándo iba a hacerme un perfil en Facebook yo contestaba ¿y para qué? (bueno en realidad decía y pa qué, que aquí somos muy castizos con nuestra jerga).

  Una vez me hice el perfil, me comenzó a interesar y se me encendió la bombilla cuando descubrí que los negocios creaban páginas en Facebook para promocionar sus productos.

  A medida que investigaba, cada vez me topaba con más artículos que aconsejaban tener un blog, para reforzar la imagen de tu marca. Que las redes al fin y al cabo eran volátiles, que nunca llegabas a la misma audiencia y que lo mejor era contar con un blog que pudiera acoger una gran cantidad de correos interesados con tu actividad.


Total que como siempre me ha gustado profundizar en los temas que me meto, pues un propósito siempre me ha llevado al siguiente prácticamente sin planearlo. Tengo que confesar que me cuesta pasar de un punto a otro, porque cuando ya tengo algo dominado, las cirscunstancias siempre van pidiendo otro tipo de conocimiento. Y a veces me ha dado mucha pereza.


 Cuando aprendí a manejar Photoscape, la necesidad de borrar fondos y hacer otro tipo de presentaciones más atractivas, me obligó a explorar Photoshop, un editor que a mí me parecía más complicado que silbar con la boca llena de agua.

Con Blogger, igual. Al principio la Visión General del blog, me daba tiritera y el tema de los códigos, para qué te voy a contar, pensaba que tenía más probabilidades como traductora de bebés de 5 meses que entendiendo el funcionamiento del  HTML y el CSS.

Así que cuando por fin pude dominar todo esto, me sentí la reina del mambo y fue entonces cuando mi hermano comenzó a intentar convencerme de que me pasara a Wordpress, para lanzar De morros con el 2.0. Imagínate mi  respuesta.





No sólo él ha intentado convencerme.

 A lo largo de estos casi 2 años, he leído todo lo que tenía que leer por la red y más. Y la mayoría de los mega-bloggers que admiro, te aconsejan Wordpress si quieres ir en serio. Pero una de mis metas era demostrar que se puede emprender igual de dignamente en Blogger y en esas estaba... cuando he decidido cambiarme.


La culpa la ha tenido mi estupendísima idea de crear un blog privado sólo para suscriptores. No me entiendas mal, no me arrepiento, de hecho estoy muy contenta con los resultados de esta decisión. El tema es que no había caído que un blog privado en Blogger, sólo admite 100 lectores...






Hace ya algunas semanas que comenzó a salirme el cartelito de "Hay demasiados lectores en el blog" . Lo que me ha salvado hasta el momento es que casi la mitad de suscriptores, no han aceptado la invitación al blog privado aún (seguramente porque andará de palique con otros correos en la bandeja de spam). Pero hace ya rato que el número de suscriptores supera la centena.


La primera solución que se me ocurrió así de buenas fue "bueeeeno, pues creo otro blog privado, importo el contenido, subo una copia de la plantilla, arreglo los enlaces internos y vámonos que nos vamos..."

Pero después me dí cuenta de que era una locura total. Primero porque cuando llegara a 200, tendría que hacer un tercero y así andaría a cada dos por tres. Pero eso no es lo peor, yo tengo a mis suscriptores segmentados por grupos:


 Los que quieren recibir un correo cada vez que publico

  Los que prefieren que se lo cuente todo una vez por semana

 Los que con una vez al mes que los ponga al día, ya van bien


El siguiente paso sería volver a segmentar a los suscriptores en 2 grupos (de momento):


Los que esten en el blog privado number one y los que estén en el clon. Una vez los segmente, tendría que crear otros 3 subgrupos para enviar newsletter diferentes a los 2 grupos en los momentos acordados para cada uno (una vez al mes, una vez a la semana, cada vez que se publiquen)

Si te estás agobiando de leerlo y no entiendes ni la mitad, imagínate yo metiéndome en faena. Vamos, que sólo con gestionar los blogs privados y las listas de correo, ya tengo aforo completo de tareas casi para el mes entero.


Y esto en Wordpress , pues no pasa. Allí tú puedes tener tu dominio y crear un subdominio privado para meter la cantidad de correos que te dé la gana, sin pasar penas.

Así que de momento, pasaré a mis suscriptores a disfrutar de los contenidos en una plataforma privada en Wordpress, (que por cierto es super moderna la joia) gracias a la impagable ayuda de mi hermanito que es un crack montando webs estupendas en Wordpress súper rápido . Así que ya sabes, si estás en mi lista, el domingo te cuento lo nuevo en mi estrenadísimo hogar.

ENTONCES, ¿HAY QUE ESTAR EN WORDPRESS.ORG, SI VAS EN SERIO CON TU BLOG?

Me encantaría poder decir que para nada, pero tengo que reconocer que según para qué. Es decir, depende de las necesidades que tengas para montarte tu negocio online, la respuesta variará.

En mi caso, yo lo necesito ahora, por la circunstancia de tener un blog privado. Y habrá quien lo necesite si quiere montar una tienda online con más de 50 artículos.

Pero en Blogger se puede perfectamente crear una tienda online sencillita  e incluso diseñar landing pages, si te das cierta traza con los códigos, pero es algo más complejo.

La vida siempre te va pidiendo avanzar y por mucho que te resistas, si quieres prosperar en tus metas, siempre tienes que ir dando pasitos. A tu ritmo, sin agobiarte, pero no te puedes estancar. Y yo eso siempre lo he tenido claro, nunca he forzado la máquina, pero he tirado adelante con lo que ha ido llegando. Y Wordpress, no ha esperado el tiempo que yo calculaba para hacerlo.

De momento tengo allí el Curso de Phostoshop para blogueras creativas y ahora, el blog privado. Pero antes de que termine el verano, espero haber pasado también la tienda online y comenzar a evolucionar con el blog allí.


He decidido hacerlo ya, porque sé que tarde o temprano me acabaré mudando y prefiero que mi dominio definitivo, sea el que recoja los frutos. porque no le veo el sentido a posicionar este blog en Google y marcharme cuando ya vaya viento en popa. Más que nada porque no me voy a pegar la paliza de migrar el blog por completo, no.


Este se queda aquí con estas entradas y cuando tenga que referirme a un tema en especial que se encuentre en Blogger, con poner un enlace ya me vale. Lo que haré será poner un cartelón en el título cuando me mude definitivamente, con el enlace a mi nuevo hogar, y seguiré tratando allí , las mismas temáticas que tengo actualmente. Así que, no te preocupes porque seguiré haciendo tutoriales y plantillas de Blogger, pero ahora también hablaré de Wordpress.


Pero claro, aunque tenga a mi brother para hacerme el trabajo gordo, yo me quiero enterar de todo en condiciones, porque para mí es esencial manejar sin miedo todo lo que toco y porque tampoco me gusta depender de nadie. Y para eso, necesito tiempo para aprender, así que esta será la última semana que publicaré dos veces (hoy y el domingo).


A partir de la próxima, habrá una sola publicación los jueves: una semana tocará de manera abierta a todos los públicos y la siguiente, también, pero habrá contenido exclusivo en el blog privado (lo de siempre, vamos).

¿AUN NO CONOCES LAS VENTAJAS DE LA COMUNIDAD DEMO 2.0?

De esa manera, yo puedo emplearme a fondo para ponerme a buenas con mi nuevo "casero" y de paso ir haciendo realidad nuevos proyectos que se están cociendo, pero que aún no tienen la consistencia necesaria por falta de tiempo. Uno de ellos es la Agenda 2016/2017, que saldrá a finales de Julio. El otro, te lo contaré un poquito más adelante y así te doy la sorpresita.



Si después de leer este post, te encuentras con dudas sobre quedarte en Blogger o migrar a Wordpress, quizás este post de Laura y este de Ana María, te puedan ayudar a tomar la decisión correcta.

Eso sí, si te marchas de Blogger que no sea para hacerlo en Wordpress.com, porque  en el ranking de plataformas gratuitas,  Blogger  tiene una versatilidad que no tienen las demás y los plugins que hacen que Wordpress.org sea tan maravilloso, no se pueden usar en Wordpress.com. Además Blogger, por ser de Google, posiciona mucho mejor y te ayuda  a curtirte para lo que venga. He escuchado en más de una ocasión que el que sabe manejar Blogger, puede hacer virguerías en Wordpress, porque su sistema, una vez lo entiendes, es mucho más sencillo (ojalá, por la cuenta que me trae) 



En fin, que vuelvo a tener la misma sensación de vértigo que me ataca siempre que me enfrento a algo nuevo, pero estoy convencida que me haré con esto como he terminado haciendo con el resto. Hay una frase que dice:

Cuándo es necesario cambiarse a Wordpress: crónica de una mudanza anunciada. Tuitéalo

¿Charlamos un ratito y me cuentas que opinas de todo esto? ¿eres de Blogger, de Wordpress o aún no tienes blog y te estás pensando para dónde tirar? ¿has intentado alguna vez silbar con la boca llena? cuenta, no me dejes con la intriga 


¡Que tengas un gran día!

¿Quieres aprender a diseñar bonito y tener un blog atractivo? Échale un vistazo al Curso de Photoshop para Blogueras Creativas, con el que podrás perfeccionar tu manejo de Photoshop, a la vez que desarrollas tu marca y creas el blog que deseas tener. Es un curso muy completo, en el que sin duda, habrá un antes y un después en tus diseños. Échale un vistazo:

9 claves para mejorar notablemente el diseño de tu blog

Hoy es el Día Mundial del Diseño Gráfico, así que creo que es una ocasión inmejorable para compartir contigo 9 claves para tener un blog con estilo.

La vista juega un papel fundamental y nos dejamos guiar por ella, para sacar conclusiones. Si lo que vemos, nos atrae, investigamos. Si no, salimos en busca de lugares más acogedores. ¿Por qué crees que tienen tanto éxito Pinterest e Instagram? son redes visuales, en las que no nos importa pasarnos horas y horas, alegrándonos los ojillos (al menos a mí me pasa constantemente).

No me cansaré nunca de decir que el diseño de un blog es tan importante como el contenido. De la misma manera, que nadie entraría a comer en una taberna cochambrosa, por muy exquisitos que fueron los platos, es difícil que tus contenidos sean leídos, si tu página espanta al primer vistazo. Así que, si te tomas en serio tu blog, sigue leyendo, que te cuento con detalle los 9 pilares para triunfar con el diseño de tu blog.

1. UN LOGOTIPO QUE TE DEFINA BIEN

Toda buena marca que se precie cuenta con un logotipo, que la haga identificable al primer vistazo. Tener un logo, no sólo servirá para que tus seguidores te distingan con facilidad. Es una parte fundamental del branding de tu blog y lo podrás usar en tus imágenes o productos para crear una identidad visual coherente.

Es importante también que lo incorpores como favicon en la parte superior de tu blog, para que si un lector tiene abierta varias pestañas, pueda encontrarte de un vistazo y seleccionar la tuya. Debes intentar que el diseño de tu logo, guarde relación con tu marca: no tiene ningún sentido tener como logotipo un perrito en un blog de nutrición.

 Pedrita Parker es un buen ejemplo de logotipo sencillo y consecuente. Ella es ilustradora y ha escogido una caracterización propia,  para abanderar su empresa.

Fíjate cómo lo usa en la cabecera, el favicon y hasta en el menú con una pequeña descripción.

2. UNA CABECERA QUE MUESTRE LO QUE HACES

No hace falta complicarse lo indecible con el diseño de la cabecera y más hoy en día, que se llevan las páginas con diseños limpios y sencillos. Lo que sí es importante es que comunique al primer vistazo, lo que ofreces en tu blog. Ya sea ayudándote de una imagen o una pequeña descripción que acompañe al título, da lo mismo, pero que cuente qué tema/s tratas en él.

 Tanto Laucreativa como El armario de Silvia lo hacen genial, tan sólo usando una tipografía bonita y una breve descripción

¿Necesitas inspiración para tu cabecera?

Un diseño no logra la perfección cuando no hay nada que añadir, sino cuando no hay nada que quitar.Tuitéalo

3. UNA PALETA DE COLORES QUE TRANSMITA EL MENSAJE DE TU MARCA

Es importante elegir una paleta de colores que defina tu marca y que puedas usar para diseñar los elementos de tu blog. Forma parte de tu branding y es esencial elegir tonos que transmitan bien la personalidad de tu trabajo. Aquí tienes un muy buen post de Three Feelings, en el que te explica la simbología de los colores y para completar este tema, también puedes leer este artículo que escribí para mostrarte 3 aplicaciones geniales para gestionar los colores de tu blog.

 Vitamina D es un gran ejemplo de un buen uso de colores en el blog. Observa cómo juega con los iconos sociales, añadiendo a cada uno, sus tonos corporativos y sigue la misma línea en el resto de elementos del sidebar.

4. ELEMENTOS FUNCIONALES Y EQUILIBRADOS

Un blog estéticamente equilibrado es más cómodo de leer. Cuida que todos sus componentes guarden la misma relación de aspecto, tanto en tamaños como en colores. Lograr una armonía visual, genera confianza, serenidad y mayor poder de atracción.

  Fíjate cómo lo aplica The Craftcake Mama en su tienda online: las imágenes del slide están colocadas cuidando impecablemente la estética, de manera que los colores y los temas, coincidan a la perfección. Esta idea, quedará genial en tu blog, si diseñas productos artesanales o tu temática se basa en la decoración. 

El diseño realmente elegante es funcional, simple y ordenado.Tuitéalo

5. MUÉSTRATE, NO TE ESCONDAS

Es necesario para generar confianza. A todos nos gusta ponerle cara a quien nos habla y si tu blog tiene una finalidad más allá del hobby, es prácticamente obligatorio. ¿Le comprarías a alguien que no sabes ni como se llama? yo desde luego no. No hace falta que salgas hasta por las esquinas si te da palo, puedes poner una sola imagen en el sidebar. Si la acompañas con una breve descripción que resuma un poco quién eres y para qué estas aquí, mejor que mejor.

  Me maravilla cómo se lo ha montado Clara de Pearl Knitter, para mostrar su "Sobre mí": ella se dedica a tejer y ha usado unas molonas agujas de lana, para colocarse un moño con mucho arte. No da completamente la cara, sino que está de perfil (ideal para tímidas) y ha escrito una pequeña descripción para que te hagas una idea de lo que te ofrece el blog.

Y ya, siguiendo con el hilo de lo que hablamos en el punto anterior, fíjate cómo cuida la proporción de los elementos, tanto en el sidebar como en las imágenes de los posts. Sencillamente genial.

6. COLOCA LO IMPORTANTE, BIEN A LA VISTA

Las redes sociales, el banner de suscripción, la dirección física de tu tienda (en caso de tenerla) y las llamadas a la acción que te benefician directamente, bien a la vista ¡por favor!. Son los elementos que te ayudarán a crecer, así que no los escondas en el footer. Si quieres ponerlos allí también, porque quedan bonitos o profesionales, muy bien: siempre que los pongas también al principio. Hay muchos que no llegan hasta abajo, no te arriesgues.

Ya traté con detalle este tema en el post de 5 errores y 5 aciertos de un sidebar.

  En el caso de Andrea Amoretti, tiene las redes sociales justo entre el título y su imagen.

 Holamama, cuenta con tienda física y lo incluye bien a la vista en su sidebar.

7. USA TIPOGRAFÍAS SENCILLAS Y FÁCILES DE LEER

Por mucho que te gusten las fuentes script, no las pongas en el texto del post, de verdad, da dolor de cabeza leer así. La tipografía de los textos cuanto más sencilla mejor y a buen tamaño, entre 14-16 px, que no tengan que dejarse los ojos para enterarse de lo que cuentas.

No vas a ser menos cuqui o femenina, por reservarlas sólo para títulos o frases concretas de una presentación: vas a ser más profesional.

  Observa cómo lo hace Xo Sarah: no prescinde de ellas, pero sabe dónde colocarlas.

Un buen diseño, es un buen negocio. (Thomas J. Watson Jr.) Tuitéalo

8. PLASMA TU PERSONALIDAD, SÉ ORIGINAL

Cuando conoces la esencia de tu marca, es mucho más fácil crear un diseño que refuerce tu mensaje. Esto se consigue teniendo tus objetivos claros, definiendo tu temática y elaborando el contenido en torno a ella.

  En Pata de pirata, su autora lo hace genial: ella crea imágenes personalizadas mezclando fotografías con ilustraciones. Su temática está dirigida a niños y le ha dado una buena dosis de originalidad a los elementos del sidebar, utilizando banners estampados para señalar sus redes sociales e imágenes con forma de chapas, para presentar algunas de sus páginas.

9. FONDO: ¿SI O NO?

Depende, en principio cuanto más limpio y oxigenado tengas el blog, mejor. Pero hay veces, que según tu temática, puede quedar bien un fondo de color o estampado, si está bien elegido.

  En Small Studio, han usado los colores de su marca, para hacer un fondo color block.

 Y sinceramente, Cocottó no sería tan bonito si hubiera dejado su fondo blanco porque tiene una temática tan cuqui que esos topitos encajan como un botón en el ojal.

Crea tu propio estilo visual, que sea único para ti e identificable para otros. (Orson Welles) Tuitéalo

Como ves, no es tan complicado cuidar tu imagen para lograr un blog profesional con estilo y voz propia. Si quieres cambiar el aspecto de tu blog, pero nunca te has atrevido por falta de presupuesto o claridad en tu objetivo, ahora tienes una gran oportunidad, ya que por fin está disponible el Curso de Photoshop para blogueras creativas.

Toda una experiencia creativa, que te permitirá aprender a manejar Photoshop para lograr presentaciones únicas y diseñar un blog con personalidad que deje huella. Por mucho menos de lo que te costará encargar una plantilla personalizada, tendrás un 2 en 1: un blog maravilloso, a tu medida y habilidad para crear preciosos diseños. Aquí tienes algunas pinceladas de lo que puedes conseguir, pero hay mucho más, no te lo pierdas!

QUIERO SABER MÁS

Espero te haya sido de gran ayuda, para aportarte muchas ideas que implementar en tu sitio. Recuerda que no se trata de copiar, sino de adaptar a la personalidad de tu marca, aquellos conceptos que te interesen y sobre todo de pensar de qué manera puedes diferenciarte para hacerlo único, especial y tuyo.

Ahora te toca a ti, cuéntame:

 ¿Cual ha sido la idea que más te ha gustado?
 ¿Conocías alguno de estos blogs?
 ¿De qué elemento de tu blog estás más orgullosa?

Si te ha gustado esta entrada o la has encontrado útil, no dudes en compartirla para que le sirva a más gente. Te estaré enormemente agradecida.

9 claves para mejorar notablemente el diseño de tu blog ¿cuántas te faltan? Tuitéalo

¡Que tengas un gran día!

Si quieres seguir aprendiendo, no olvides unirte a la Comunidad Demo 2.0, porque te esperan contenidos, guías, descargables y secretillos de gran valor exclusivos, que no verás en el blog, como esta super-guía para que aprendas a usar imágenes en la red (sin buscarte problemas) en la que además tendrás acceso a millones de imágenes gratuitas para usar en tu blog, sin ningún miedo.

¿Qué me dices? ¿te apuntas? si es así, encantada de contar contigo