Mostrando entradas con la etiqueta Tutoriales. Mostrar todas las entradas
Mostrando entradas con la etiqueta Tutoriales. Mostrar todas las entradas

jueves, 30 de marzo de 2017

¿Tienes un botón Pin-it para tus imágenes? esto te interesa

eliminar-boton-pin-it


¡Sorpresa! ¡vuelvo a escribir en Blogger! 🎉


¿Pensabas que no iba a volver a aparecer por estos lares? la verdad es que yo tampoco lo tenía claro. Desde un principio, cuando decidí mudarme a Wordpress, tuve claro que no traspasaba el dominio. Quería conservar este blog en Blogger, porque casi todos los tutoriales hablan de Blogger y no quería mezclarlos con mi nueva etapa.

Además, prefiero que si tengo que volver a hacer un tutorial de Blogger, se aloje aquí para que tengas todos los contenidos ordenaditos en el Indice. Así que ese es el motivo de que hoy me pilles por Bloggerlandia.




El truco que te traigo es muy sencillito, pero lo tenía pendiente desde que me fui y no me gusta dejar cosas pendientes.


Y ¿sabes qué? no podía haber elegido mejor momento que este, porque quienes tenían un botón de Pin-it personalizado para sus imágenes, habrán notado que ya no les aparece. Esto es porque el proveedor del código, ha decidido crear un código que se aloje completamente en la plantilla,  ya que no es la primera vez que el alojamiento inicial del script da problemas. Ya hice un tutorial de cómo instalar un botón de Pin-it personalizado, así que, puedes volver a verlo para eliminar el antiguo código (en caso de que ya lo hubieras instalado) y pegar el nuevo, porque lo he actualizado😉.



 Por cierto, qué divertido es esto de poder añadir (por fin!) los emojis directamente desde el editor de Blogger, veo que ya se van poniendo las pilas, porque hasta están creando plantillas nativas responsive 👏👏👏👏


¡La sorpresita que me he llevado cuando he entrado y he visto esto!




Bueno al turrón, que me lío y no te cuento el truco. Se trata de que puedas elegir en qué imagenes quieres que aparezca tu botón personalizado de Pin-it y en cuales no.

Normalmente cuando incluimos un botón de Pin-it, es porque queremos que el 95% de nuestras imágenes se pineen. Pero puede haber un 5% de imágenes que no nos interesen que sean pineables, por ejemplo puede ser muy útil para evitar que salga en una tabla de imágenes.


Observa la siguiente tabla en la que he colocado los dos iconos de los feeds más famosos, para invitarte a que me sigas desde tu favorito. En cada icono, he incluido un enlace, pero si estás viendo el post desde el ordenador, podrás observar que al acercar el ratón, sale el botón de pinear, por lo que puede ocurrir que al pulsar te envíe a Pinterest en vez de al enlace y eso es una faena ¿verdad? .





Pues para esto o para cualquier otra necesidad que se te presente, aquí va el tutorial.




Deshabilitar botón Pin-it en una imagen



Sin botón Pin-it
Con botón Pin-it

Añade class=nopin tras img, (en la vista HTML) de esta manera:

<a href="DIRECCIÓN DE ENLACE"><img class=nopin src="DIRECCIÓN DE TU IMAGEN" /></a>




Deshabilitar botón Pin-it en tablas de imágenes




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




Para las tablas es exactamente igual. Añade class=nopin tras img, (en la vista HTML) de esta manera:

<table border="0" cellpadding="4"><tbody>
<tr>
<td><a href="DIRECCIÓN DE ENLACE" target="blank"><img class="nopin" src="DIRECCIÓN DE TU IMAGEN"  /></a> </td>
<td><a href="DIRECCIÓN DE ENLACE" target="blank"><img class="nopin" src="DIRECCIÓN DE TU IMAGEN"  /></a> </td></a> </td>
</tr>
</tbody></table>


Y ya está, sé que es un truco que de simple, es tonto, por eso no he querido llamarlo tutorial. Pero mucha gente no lo sabe y tienen que conformarse con que aparezca el botón en todas las imágenes, quieran o no. De todas maneras, esto sólo sirve para evitar que pineen tus imágenes, desde el botón que tú has incluido en tu blog voluntariamente. Cualquiera que tenga la extensión de Pin-it, podrá pinearlas igual, por mucho que deshabilites la opción de esta manera. La utilidad de esto, es evitar que el botón interfiera con un enlace, como has podido observar que sucedía en mi tabla de los iconos de feeds.


Aprovecho para comentarte que, si me seguías desde Feedly o Bloglovin, esos son los nuevos feeds del blog en Wordpress, así que si te apetece estar al día de mis publicaciones y no te quieres suscribir, clica en tu feed favorito y no te perderás nada.




Sinceramente, me da alegría volver a usar este editor. En Wordpress apenas tengo que trabajar el HTML de las entradas, porque tengo un plugin que me coloca todo como quiero sin esfuerzo, pero también es verdad, que tardo más tiempo en estructurar los posts, porque tiene demasiadas funciones 😂


Pues esto ha sido todo por aquí... pero volveré, no sé cuando pero en cuanto tenga algo interesante que contar que afecte a Blogger, asomaré la nariz para decírtelo. Mientras, te invito a que sigas mis contenidos en la nueva web, porque aunque no hable de Blogger, sí que publico contenidos de diseño, marketing, redes sociales y herramientas que te pueden interesar. Aquí te dejo todo lo que he publicado hasta ahora, para que decidas si te resultan útiles.



Mockups y freebies
Mockups gratis con Graphic Twister
Consigue una marca inolvidable
Consigue que tu marca sea inolvidable
ideas para San Valentín
Tarjeta e ideas San Valentín
Objetivos y estrategias 2017
Objetivos 2017 de 6 emprendedoras

Tutorial Visual Composer
Tutorial Visual Composer
LinkedIn: entrevista a Inge Sáez
LinkedIn: entrevista a Inge Saez
Tutorial Genial.ly
Tutorial Genial.ly
Nueva etapa en Wordpress
Nueva etapa en Wordpress




P.D: una de las cosas que más echo de menos en Wordpress, son los comentarios. Aquí charlabais bastante conmigo y ha sido moverme y ver pasar las bolas del desierto por la zona baja. Así que, dame una alegría y coméntame qué te ha parecido esta publicación ¿sabías que me había mudado? ¿tenías el botón de Pin-it instalado y no te habías coscado de que había desaparecido de tus imágenes? ¿conocías este truco tontorrón que te he contado? cuéntame y charlamos un rato, que tengo muchísimas ganas 😜


Que vaya genial el jueves!


Imágenes portada: Pixabay e Ivorymix


¿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:


jueves, 29 de septiembre de 2016

Cómo crear una firma profesional para tu e-mail [tutorial]

firma-correo-profesional-facil-wisestamp

Esto parece que ya va en serio, con el paso del tiempo tu proyecto va cogiendo forma y estás en camino de profesionalizar tu marca. Te has roto la cabecita eligiendo los colores adecuados, las tipografías, el logo, la firma.... espera ¿qué no tienes una firma profesional para tus correos?. Pues te falta la guinda del pastel! 


Vamos a ponerle remedio ahora mismo con una aplicación con versión gratuita que se llama Wisestamp y que te va a facilitar la creación de una firma requeteapañada en menos de 10 minutos. 


¿Lo quieres más fácil? te lo cuento en videotutorial, vamos a ello!








PARA QUÉ SIRVE LA FIRMA DE CORREO ELECTRÓNICO




La firma de correo electrónico es una parte fundamental de tu marca, en la que puedes añadir más información sobre los medios de comunicación y servicios que ofreces.

Pero ya no es sólo cuestión de imagen, sino que además, a través de tu firma puedes promocionar enlaces que te interesen que tengan visibilidad, como tu web o tus redes sociales. Y todo esto, de una manera más estética que si te dedicas a incluir en tus correos imágenes o enlaces sin orden ni concierto.


Como ejemplo, te pongo la firma que me he creado con Wisestamp, que es la aplicación de la que te voy a hablar:



crear-firma-de-correo-con wisestamp-tutorial




QUÉ ES WISESTAMP



Es una aplicación para crear una firma profesional de correo que cuenta con versión gratuita y de pago. Evidentemente con la de pago vas a tener muchas más opciones de personalización, pero la versión free para mi gusto es bastante completa.

Wisestamp te permite añadir una imagen, iconos y enlaces varios, de manera automática (y estética) al final de tus mensajes de correos.


Esta es la 1º opción que te he preparado, la 2º te la contaré al final del post. Así que vamos por partes:





CÓMO AÑADIR UNA FIRMA A TU  E-MAIL CON WISESTAMP




 Visita la página de Wisestamp

 Loguéate introduciendo nombre y e-mail (o a través de Facebook)

 Introduce los datos (puedes añadir más campos) y la imagen que quieres que aparezcan en tu firma

 Añade tus redes sociales




OPCIONES DE LA VERSIÓN FREE DE WISESTAMP



La versión free es muy limitada: sólo tiene una plantilla e incluye publicidad de la aplicación, pero si quieres algo sencillo y fácil, es suficiente. Además, cuando añadas la extensión al navegador, se incluirá tu firma en cualquier gestor de correos que uses, de manera autómatica. Estas son las opciones en versión free:


 Subir los datos que necesites añadir a tu firma

 Subir imagen y elegir el tipo de marco (cuadrado, redondo, bordes redondeados)

 Elegir el color de la línea vertical

 Incluir los iconos de tus redes sociales

 Añadir alguna app





APPS QUE TE OFRECE WISESTAMP



En Featureds, tienes para elegir:


apps-para-wisestamp-tutorial



 Like a tu página de Facebook

 Follow a tu cuenta de Twitter

 Follow a tu cuenta de Linkedin

 Ultima publicación en Facebook

 Ultimo Tweet publicado

 Insertar un vídeo de Youtube

 Añadir una cita/frase

 Añadir un texto para concienciar sobre la necesidad de no imprimir inútilmente

 Añadir Aviso legal

 Incluir el feed de tu blog

 Incluir el enlace a una oferta

 Incluir un banner con enlace






En Tools, puedes escoger entre:


apps-para-wisestamp-tutorial



 Ultima publicación en Facebook

 Añadir suscripción a tu newsletter

 Incluir último post del blog

 Promocionar un evento

 Incluir el enlace a una oferta

 Pedir feedback para una página

 Promocionar una app

 Incluir un código QR

 Introducir un código html

 Incluir un banner con enlace

 Programar una cita

 Promocionar un webinar




En Badgets, te ofrecen:


apps-para-wisestamp-tutorial



 Like a tu página de Facebook

 Follow a tu cuenta de Twitter

 Incluir enlace a un vídeo de Youtube

 Follow a tu cuenta de Linkedin

 Promocionar una oferta estacional

 Incluir un mensaje para felicitar San Valentín

 Incluir logo de tu equipo favorito (pero vamos, que es de rugby...)

 Botón para que te sigan en Pinterest

 Botón para que te sigan en Instagram

 Enseñar tu portfolio en Behance

 Botón a tu cuenta de Dribbble





En Social puedes optar por:


apps-para-wisestamp-tutorial



 Follow a tu cuenta de Twitter

 Ultimo Tweet publicado

 Like a tu página de Facebook

 Ultima publicación en Facebook

 Follow a tu cuenta de Linkedin

 Botón para que te sigan en Instagram

 Mostrar las imágenes recientes de tu Instagram

 Incluir enlace a un vídeo de Youtube

 Insertar un vídeo de Youtube

 Botón para que te sigan en Pinterest

 Pedir apoyo para una causa

 Ultima actualización que hayas hecho en Wordpress

 Ultima actualización que hayas hecho en Tumblr

 Ultima actualización que hayas hecho en Medium

 Incluir último post del blog




En Business tienes para elegir entre:


apps-para-wisestamp-tutorial


 Follow a tu cuenta de Linkedin

 Ultimo Tweet publicado

 Añadir Aviso legal

 Promocionar un artículo subido a Ebay

 Enlazar a tu tienda Etsy

 Enseñar tu portfolio en Behance

 Botón a tu cuenta de Dribbble

 Incluir el enlace a una oferta

 Añadir suscripción a tu newsletter

 Pedir feedback para una página

 Programar una cita

 Promocionar tu app

 Promocionar un evento




Y en Dinamics tienes:


apps-para-wisestamp-tutorial



 Ultima publicación en Facebook

 Ultimo Tweet publicado

 Insertar un vídeo de Youtube

 Añadir una cita/frase

 Promocionar un artículo subido a Ebay

 Enlazar a tu tienda Etsy

 Ultima actualización que hayas hecho en Medium

 Ultima actualización que hayas hecho en Tumblr

 Ultima actualización que hayas hecho en Wordpress

 Mostrar las imágenes recientes de tu Instagram





QUÉ TE OFRECE LA VERSIÓN DE PAGO DE WISESTAMP




La opción de pago sale a 48$/año (42,64€) y podrás optar por:


 Crear más firmas

 Copiar tu firma

 Eliminar la publicidad de la aplicación

 4 modelos de plantillas a elegir

 Cambiar el tamaño de tu imagen, del texto y de los iconos sociales

 Elegir modelo (bordes redondeados, cuadrado, redondo) y color de tus iconos sociales

 Añadir bordes a tu firma



No está nada mal el precio para la cantidad de opciones que ofrece, pero si no te importa que la aplicación incluya su publicidad y te conformas con una firma de e-mail sencilla, la versión free también te vendrá genial. Además tiene el plus de la cantidad de opciones que tienes para insertar aplicaciones extras.



Aquí te dejo un video tutorial para que veas  cómo crear tu firma con Wisestamp:






Crea gratis una firma de correo profesional en menos de 10 minutos. Tuitéalo



¿PREFIERES CREAR UNA FIRMA PERSONALIZADA SIN USAR UN SERVICIO EXTERNO?




Pues aquí te traigo la 2º opción, que ya sabes que yo siempre intento dar alternativas para que no te quedes sin poder elegir (si algo nos gusta sobremanera es tener opciones para todo ¿que no?).

Así que te he preparado una plantilla para que puedas personalizar tu firma y añadirla automáticamente a tu gestor de correos. El resultado sería algo parecido a esto:




Raquel Orta
De morros con el 2.0
Diseño y Marketing para tu blog, motivación para ti



Facebook   Twitter   Google plus   Pinterest   Youtube


¿Te gusta? pues bajo el vídeo,  tienes el código que tienes que copiar para personalizar tu firma. Dale al play!:




Y aquí tienes el código que necesitas:

<table border="0" cellpadding="0" cellspacing="0" style="width: 750px;">

  <tbody>

<tr>

    <td align="center"><a href="http://www.demorrosconel20.com/" target="_blank"><img alt="Raquel Orta" height="169" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinwg9Ync6hvsk7jUudGy7CDwZkqh2q3hQeP4U6wfA7xNenqhN1SPossxYzpg1yrLhyphenhyphen4vb3BvBvDk0ar9WwEiUxRAoJ_-sVKTgojQj2i4DEyGifNjae3NgWTDyNOLV24zC9y9cUae5MUP8/s1600/perfil+demorros.png" width="168" /></a></td>

<td align="center"><div style="background-color: white; border-left: 2px solid #c27ba0; height: 170px; padding: 5px; width: 2px;">

</div>

</td>

<td align="left" style="margin: 0; padding: 0;" valign="top"><a href="http://www.demorrosconel20.com/" target="_blank"><img alt="De morros con el 2.0" border="0" src="http://i68.tinypic.com/2sa1cwj.jpg" style="margin: 0px;" /></a><br />

<div style="font-size: 12px; margin-top: 0px; text-align: left;">

<span style="color: #666666; font-family: &quot;verdana&quot; , sans-serif;">Diseño y Marketing para tu blog, motivación para ti</span></div>

<br />

<div style="font-size: 12px; text-align: left;">

<span style="font-family: &quot;verdana&quot; , sans-serif;"><a href="http://www.demorrosconel20.com/">www.demorrosconel20.com</a></span></div>

<br />

<br />

<div style="text-align: left;">

<a href="https://www.facebook.com/demorrosconel20/" target="_blank"><img alt="Facebook" src="http://i67.tinypic.com/16m5e2x.jpg" height="30" width="30" /></a>&nbsp;&nbsp;

<a href="https://twitter.com/demorros20" target="_blank"><img alt="Twitter" src="http://i67.tinypic.com/4pxyxt.jpg" height="30" width="30" /></a>&nbsp;&nbsp;

<a href="https://plus.google.com/+Demorrosconel20oficial" target="_blank"><img alt="Google plus" src="http://i65.tinypic.com/28clhc4.jpg" height="30" width="30" /></a>&nbsp;&nbsp;

<a href="https://www.pinterest.com/demorros20/" target="_blank"><img alt="Pinterest" src="http://i67.tinypic.com/2nkrixj.jpg" height="30" width="30" /></a>&nbsp;&nbsp;

<a href="https://www.youtube.com/c/Demorrosconel20" target="_blank"><img alt="Youtube" src="http://i66.tinypic.com/sd33es.jpg" height="30" width="30" /></a></div>

</td>

  </tr>

</tbody></table>



Bueno, pues me voy marchando que la vida offline me reclama y se me acumulan las lavadoras! 😜


Espero que te haya sido de ayuda para tener un correo más profesional con el que atender mejor a tus clientes. Me encantaría que me contaras en los comentarios qué te ha parecido ¿ya tenías firma en tu e-mail? ¿te mola Wisestamp o prefieres crear tu propia firma personalizada? cuenta y charlamos un rato!
Que tengas un gran día!





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






jueves, 8 de septiembre de 2016

Cómo usar los iconos de Font Awesome en Photoshop

como-usar-iconos-font-awesome-en-photoshop

Ya te he hablado en otras ocasiones de las ventajas de usar Font Awesome en tu blog, pero me faltaba mostrarte cómo usar esta fuente para diseñar tus propios iconos en Photoshop. Así que te lo cuento en vídeo y por escrito, para que tengas dónde elegir.






Buen jueves, ya ando de vuelta por aquí! la verdad es que no sé si contarte que se me ha pasado el mes de Agosto volando o se me ha hecho eterno, porque ha habido un poco de todo.

Estamos haciendo todo lo posible (próximamente seremos dos) por tener a punto la nueva web en breve y contarte todas las novedades. Algunas ya las sabrás si formas parte de la Comunidad Demo 2.0 y te has leído los correos que he ido enviando este mes pasado.

Pero bueno, no quiero enrollarme mucho con eso, ya te lo contaré todo con detalle cuando llegue el momento (que espero que sea muy prontito), ahora vengo a contarte cómo puedes usar Font Awesome en Photoshop, para crear tus propios iconos.

Y con esto puede que te preguntes ¿para qué quiero yo crear mis propios iconos? . Pues ahora mismito te doy razones, no te preocupes.




VENTAJAS DE CREAR TUS PROPIOS ICONOS



Existen muchos packs de iconos gratuitos en Internet que puedes usar para crear presentaciones o incluir en tus diseños, pero no siempre es fácil encontrar iconos que cumplan estas 3 condiciones:



 Que tengan una gran variedad de formas que cubran tus necesidades.


 Que los puedas usar sin atribución.


 Que los puedas redimensionar como quieras sin que pierdan calidad.



En mi tablero de Pinterest, puedes encontrar muchos packs de iconos gratuitos, pero puede ocurrir que el pack no contenga todos los tipos de iconos que necesitas en ese momento o que el tamaño que ofrecen es demasiado pequeño y al agrandar, pierdan calidad.





CÓMO ESCOGER TUS ICONOS PARA QUE RESULTEN ATRACTIVOS




Uno de los puntos fundamentales al usar iconos es que guarden la misma proporción y estilo. Mezclar iconos de distintos diseñadores, puede llevarte al desastre, porque perderán coherencia visual.

Observa como en esta imagen, a pesar de que he intentado aplicarles la misma tonalidad, se ve claramente la falta de sintonía en el grupo de iconos :


iconos-sin-coherencia-visual




Estos 4 iconos pertenecen a distintos diseñadores. 


 Si te fijas, de los 4, los que más se asemejan son el ordenador y el reloj, porque ambos tienen "casi" el mismo grosor de líneas y se encuentran completamente coloreados. Pero los tonos y el grosor, no coinciden al 100% . Además al reloj le faltaría la línea azul por todo el contorno para armonizar con el ordenador.


 El sobre es un icono lineal, con lo cual, en lo único que coincide con sus compañeros vecinos es en el color azul.


 El icono de comentarios, viene envuelto en un circulo y además incluye sombra en su interior.




¿Los incluirías en un mismo diseño? espero que no. Por eso es importante encontrar una buena cartera de iconos con los que poder diseñar unos iconos semejantes que aporten coherencia y atractivo visual a tu presentación.


Y ahí es donde Font Awesome te puede ayudar.



Descubre como usar Font Awesome en Photoshop y diseña tus propios iconos. Tuitéalo




QUÉ ES FONT AWESOME



Se trata de una fuente tipográfica de 634 iconos (por ahora) . Al ser una fuente, es escalable, se le puede asignar cualquier tamaño sin perder calidad.

La puedes usar tanto para web o blog, como en tus proyectos de diseño a través de Photoshop.


Aquí tienes algunos modelos de iconos que puedes diseñar con Font Awesome y en el videotutorial, te muestro otro ejemplo para usarla.



como-usar-iconos-font-awesome-en-photoshop


como-usar-iconos-font-awesome-en-photoshop



CÓMO USAR LOS ICONOS DE FONT AWESOME EN PHOTOSHOP




 Visita Font Awesome y descarga la cartera de iconos en tu ordenador a través del botón Download.


 Descomprime el archivo de descarga e instala las dos fuentes de la carpeta Fonts.


 Abre Photoshop (en caso de que lo tuvieras abierto, ciérralo y vuelve a abrirlo).


 Escoge la herramienta Texto, selecciona la tipografía Font Awesome y el color y el tamaño que prefieras.


 Haz clic dentro del lienzo y dirígete a Font Awesome Cheatsheet.


 Elige el icono que quieres usar, selecciónalo y cópialo.


 Vuelve a Photoshop y pégalo en el area de trabajo.




Mira el vídeo si tienes alguna duda:





Y eso es todo por hoy, ¿conocías la importancia de la coherencia visual en los iconos? ¿has tenido alguna vez problemas para encontrar un pack de iconos que se ajuste a tus necesidades? ¿te ha resultado útil este tutorial?


Cuéntamelo todo en comentarios que estoy deseando de charlar un rato contigo  


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   


 Únete a la Comunidad Demo 2.0




jueves, 28 de julio de 2016

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

como-adaptar-plantilla-blogger-vista-movil


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:


menu-blogger-vista-movil

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



personalizar-fecha-plantilla-movil



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 .


inspeccionar-elementos-de-la-plantilla-blogger




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


poner-gadgets-sidebar-vista-movil




 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 actualizar una URL en Blogger sin perder posicionamiento

Actualizar una url en Blogger, sin perder posicionamiento, ni comentarios, es posible. Te cuento cómo hacerlo fácil y rápido con este videot...

demo