domingo, 28 de febrero de 2016

Cómo instalar un boton pin-it y un widget de Pinterest en tu blog [Tutorial+Freebies]

instalar-boton-pinear-en-imagenes-blog


¿Tienes un blog muy visual con imágenes atractivas de compartir? entonces no tener un botón de pin-it para enviar tus imágenes a Pinterest, es casi un pecado capital, porque estás desaprovechando una oportunidad única de atraer tráfico de esta red tan viral.

Y aunque ahora esté más de moda Instagram, te aconsejo que no subestimes el potencial de Pinterest, porque juntas pueden ser la bomba. De primeras te diré que a diario se comparten más de 14 millones de artículos en esta red y además, si un pin gusta, se convierte en un trotamundos, ya que es repineado un gran número de veces. De hecho, yo he tenido imágenes en mis tableros que se han repineado más de 350 veces (la pena es que no eran mías) y a esa cifra, le tienes que sumar la cantidad de seguidores de esas personas que repinean y visualizan la imagen o leen el contenido aunque no repineen...vamos que es un no parar!






Así que, si tienes un blog orientado mayormente a público femenino y tus temáticas giran en torno a la moda, cocina, decoración y lifestyle, yo te aconsejo que no esperes ni un minuto más para colocar un botón de pinear en tus imágenes que invite a tus lectores a difundir tus contenidos por Pinterest.



Bueno, al lío, que me enrollo y no acabamos.




COMO AÑADIR UN BOTÓN PIN-IT EN LAS IMÁGENES DE TU BLOG




Existe una extensión que puedes instalar fácilmente en tu navegador y que te da la posibilidad de pinear todo lo que te "pinterese" de la red. Pero precisamente por ser una extensión, es opcional, así que debes pensar en todos los lectores de tu blog que no la tengan y ponérselo fácil a la hora de pinear tus imágenes.





extension-pin-it-para-navegador



Esto es muy sencillito, lo único que debes hacer es diseñar el botón que quieres que se muestre al pasar el ratón por tus imágenes.

Al final del post, encontrarás los que yo he diseñado para que elijas el que más te guste, te están esperando impacientes, deseandito de que los elijas.

También puedes incluir directamente el que te facilita Pinterest que es el oficial.

Una vez tengas claro el modelo que quieres para tus imágenes, llega la hora de instalarlo en la plantilla, para que aparezca automáticamente en todas tus imágenes.


Dale al play, que te lo cuento en un plis:






CÓDIGO PARA INSTALAR EL BOTÓN OFICIAL DE PINTEREST



Aquí te dejo el código, para instalar el boton Pin-it oficial de Pinterest. Si esta es tu opción, copia el código y pégalo justo encima de la etiqueta  </body> de tu plantilla (mira el vídeo si tienes dudas):



<script type="text/javascript">

(function(d){

var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');

p.type = 'text/javascript';

p.async = true;

p.src = '//assets.pinterest.com/js/pinit.js';

f.parentNode.insertBefore(p, f);

}(document));

</script>






CÓDIGO PARA USAR UNA IMAGEN COMO BOTÓN PIN-IT



Si prefieres usar una imagen diseñada, ya sea por ti o por otra persona que la haya facilitado (ejem), te aconsejo que copies el siguiente código y lo pegues en un bloc de notas de tu ordenador (todos los pasos te los muestro en el vídeo), para que puedas editar el código fácilmente, antes de instalarlo en la plantilla:


ATENCIÓN: NUEVA ACTUALIZACIÓN


En Septiembre de 2016, el proveedor de este código, BloggerSentral, decidió incluir el script directamente en la plantilla, ya que el alojamiento donde se encontraba este código, daba problemas. Con esta solución, esperemos que sea la última vez, que tengamos que modificar el código para que aparezca nuestro botón Pin-it personalizado. Este era el código antiguo, te lo dejo por si ya lo tenías instalado, que lo localices en la plantilla y lo sustituyas, por el que te vas a encontrar a continuación de este.



<!-- Inicio Botón de Pin-it -->

    <script>

//<![CDATA[

var bs_pinButtonURL = "DIRECCIÓN DE TU IMAGEN";

var bs_pinButtonPos = "topleft";

var bs_pinPrefix = "";

var bs_pinSuffix = "";

//]]>

</script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

<script id='bs_pinOnHover' src='https://googledrive.com/host/0B40RQ963OElISE9lY1E1YS1lU28/bs_pinOnHoverv1_min.js' type='text/javascript'>

// This Pinterest Hover Button is brought to you by bloggersentral.com.

// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.

// Feel free to use and share, but please keep this notice intact.

</script>

<!-- Fin del código del botón de pin-it -->



ESTE ES EL NUEVO CÓDIGO 

Recuerda instalarlo, justo encima de </body> después de haber eliminado el anterior, si lo tenías instalado.




<script>

//<![CDATA[

var bs_pinButtonURL = "DIRECCIÓN DE TU IMAGEN";

var bs_pinButtonPos = "topleft";

var bs_pinPrefix = "";

var bs_pinSuffix = "";

//]]>

</script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

<script id='bs_pinOnHover' type='text/javascript'>

//<![CDATA[

var _0xa776=["\x3C\x69\x6D\x67\x20\x73\x74\x79\x6C\x65\x3D\x22\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79\x3A\x68\x69\x64\x64\x65\x6E\x3B\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x70\x69\x6E\x69\x6D\x67\x6C\x6F\x61\x64\x22\x20\x73\x72\x63\x3D\x22","\x22\x20\x3E","\x61\x70\x70\x65\x6E\x64","\x62\x6F\x64\x79","\x68\x69\x64\x65","\x23\x62\x73\x5F\x70\x69\x6E\x4F\x6E\x48\x6F\x76\x65\x72","\x6F\x75\x74\x65\x72\x57\x69\x64\x74\x68","\x2E\x70\x69\x6E\x69\x6D\x67\x6C\x6F\x61\x64","\x6F\x75\x74\x65\x72\x48\x65\x69\x67\x68\x74","\x72\x65\x6D\x6F\x76\x65","\x6C\x6F\x61\x64","\x62\x6C\x6F\x67\x67\x65\x72\x73\x65\x6E\x74\x72\x61\x6C\x2E\x63\x6F\x6D","\x69\x6E\x64\x65\x78\x4F\x66","\x68\x74\x6D\x6C","\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79","\x68\x69\x64\x64\x65\x6E","\x63\x73\x73","\x2E\x70\x69\x6E\x69\x74\x2D\x77\x72\x61\x70\x70\x65\x72","\x6D\x61\x72\x67\x69\x6E\x2D\x74\x6F\x70","\x6D\x61\x72\x67\x69\x6E\x2D\x6C\x65\x66\x74","\x74\x6F\x70","\x70\x6F\x73\x69\x74\x69\x6F\x6E","\x6C\x65\x66\x74","\x63\x65\x6E\x74\x65\x72","\x74\x6F\x70\x72\x69\x67\x68\x74","\x74\x6F\x70\x6C\x65\x66\x74","\x62\x6F\x74\x74\x6F\x6D\x72\x69\x67\x68\x74","\x62\x6F\x74\x74\x6F\x6D\x6C\x65\x66\x74","\x73\x72\x63","\x70\x72\x6F\x70","\x2E\x70\x6F\x73\x74\x2D\x74\x69\x74\x6C\x65\x2C\x2E\x65\x6E\x74\x72\x79\x2D\x74\x69\x74\x6C\x65\x2C\x2E\x65\x6E\x74\x72\x79\x2D\x68\x65\x61\x64\x65\x72","\x66\x69\x6E\x64","\x2E\x70\x6F\x73\x74\x2C\x2E\x68\x65\x6E\x74\x72\x79\x2C\x2E\x65\x6E\x74\x72\x79","\x63\x6C\x6F\x73\x65\x73\x74","\x74\x65\x78\x74","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","","\x6C\x65\x6E\x67\x74\x68","\x61","\x72\x65\x70\x6C\x61\x63\x65","\x68\x72\x65\x66","\x61\x74\x74\x72","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x70\x69\x6E\x69\x74\x2D\x77\x72\x61\x70\x70\x65\x72\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x64\x69\x73\x70\x6C\x61\x79\x3A\x6E\x6F\x6E\x65\x3B\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x20\x61\x62\x73\x6F\x6C\x75\x74\x65\x3B\x7A\x2D\x69\x6E\x64\x65\x78\x3A\x20\x39\x39\x39\x39\x3B\x20\x63\x75\x72\x73\x6F\x72\x3A\x20\x70\x6F\x69\x6E\x74\x65\x72\x3B\x22\x20\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x70\x69\x6E\x74\x65\x72\x65\x73\x74\x2E\x63\x6F\x6D\x2F\x70\x69\x6E\x2F\x63\x72\x65\x61\x74\x65\x2F\x62\x75\x74\x74\x6F\x6E\x2F\x3F\x75\x72\x6C\x3D","\x26\x6D\x65\x64\x69\x61\x3D","\x26\x64\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x3D","\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x64\x69\x73\x70\x6C\x61\x79\x3A\x62\x6C\x6F\x63\x6B\x3B\x6F\x75\x74\x6C\x69\x6E\x65\x3A\x6E\x6F\x6E\x65\x3B\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x3E\x3C\x69\x6D\x67\x20\x63\x6C\x61\x73\x73\x3D\x22\x70\x69\x6E\x69\x6D\x67\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x2D\x6D\x6F\x7A\x2D\x62\x6F\x78\x2D\x73\x68\x61\x64\x6F\x77\x3A\x6E\x6F\x6E\x65\x3B\x2D\x77\x65\x62\x6B\x69\x74\x2D\x62\x6F\x78\x2D\x73\x68\x61\x64\x6F\x77\x3A\x6E\x6F\x6E\x65\x3B\x2D\x6F\x2D\x62\x6F\x78\x2D\x73\x68\x61\x64\x6F\x77\x3A\x6E\x6F\x6E\x65\x3B\x62\x6F\x78\x2D\x73\x68\x61\x64\x6F\x77\x3A\x6E\x6F\x6E\x65\x3B\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x3A\x74\x72\x61\x6E\x73\x70\x61\x72\x65\x6E\x74\x3B\x6D\x61\x72\x67\x69\x6E\x3A\x20\x30\x3B\x70\x61\x64\x64\x69\x6E\x67\x3A\x20\x30\x3B\x62\x6F\x72\x64\x65\x72\x3A\x30\x3B\x22\x20\x73\x72\x63\x3D\x22","\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x50\x69\x6E\x20\x6F\x6E\x20\x50\x69\x6E\x74\x65\x72\x65\x73\x74\x22\x20\x3E\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x69\x73","\x70\x61\x72\x65\x6E\x74","\x70\x69\x6E\x69\x74\x2D\x77\x72\x61\x70\x70\x65\x72","\x68\x61\x73\x43\x6C\x61\x73\x73","\x6E\x65\x78\x74","\x61\x66\x74\x65\x72","\x6F\x6E\x6D\x6F\x75\x73\x65\x6F\x76\x65\x72","\x74\x68\x69\x73\x2E\x73\x74\x79\x6C\x65\x2E\x6F\x70\x61\x63\x69\x74\x79\x3D\x31\x3B\x74\x68\x69\x73\x2E\x73\x74\x79\x6C\x65\x2E\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79\x3D\x27\x76\x69\x73\x69\x62\x6C\x65\x27","\x74\x68\x69\x73\x2E\x73\x74\x79\x6C\x65\x2E\x6F\x70\x61\x63\x69\x74\x79\x3D\x31\x3B\x74\x68\x69\x73\x2E\x73\x74\x79\x6C\x65\x2E\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79\x3D\x27\x76\x69\x73\x69\x62\x6C\x65\x27\x3B\x63\x6C\x65\x61\x72\x54\x69\x6D\x65\x6F\x75\x74\x28\x62\x73\x42\x75\x74\x74\x6F\x6E\x48\x6F\x76\x65\x72\x29","\x76\x69\x73\x69\x62\x6C\x65","\x73\x68\x6F\x77","\x66\x61\x64\x65\x54\x6F","\x73\x74\x6F\x70","\x6D\x6F\x75\x73\x65\x65\x6E\x74\x65\x72","\x2E\x6E\x6F\x70\x69\x6E\x2C\x2E\x6E\x6F\x70\x69\x6E\x20\x69\x6D\x67","\x6E\x6F\x74","\x2E\x65\x6E\x74\x72\x79\x2D\x63\x6F\x6E\x74\x65\x6E\x74\x20\x69\x6D\x67\x2C\x2E\x70\x6F\x73\x74\x2D\x62\x6F\x64\x79\x20\x69\x6D\x67\x2C\x2E\x65\x6E\x74\x72\x79\x2D\x73\x75\x6D\x6D\x61\x72\x79\x20\x69\x6D\x67","\x6D\x6F\x75\x73\x65\x6C\x65\x61\x76\x65","\x6D\x73\x69\x65","\x62\x72\x6F\x77\x73\x65\x72","\x6F\x6E","\x72\x65\x61\x64\x79"];jQuery(document)[_0xa776[68]](function(_0x8b11x1){_0x8b11x1(_0xa776[3])[_0xa776[2]](_0xa776[0]+ bs_pinButtonURL+ _0xa776[1]);_0x8b11x1(_0xa776[5])[_0xa776[4]]();var _0x8b11x2;var _0x8b11x3;var _0x8b11x4;_0x8b11x1(_0xa776[7])[_0xa776[10]](function(){_0x8b11x3= _0x8b11x1(_0xa776[7])[_0xa776[6]](true);_0x8b11x4= _0x8b11x1(_0xa776[7])[_0xa776[8]](true);_0x8b11x1(_0xa776[7])[_0xa776[9]]()});var _0x8b11x5=_0x8b11x1(_0xa776[5])[_0xa776[13]]()[_0xa776[12]](_0xa776[11]);_0x8b11x5!= -1&& _0x8b11x6();function _0x8b11x6(){_0x8b11x1(_0xa776[63])[_0xa776[62]](_0xa776[61])[_0xa776[60]](function(){_0x8b11x1(_0xa776[17])[_0xa776[16]](_0xa776[14],_0xa776[15]);clearTimeout(_0x8b11x2);var _0x8b11x7=_0x8b11x1(this);var _0x8b11x8=parseInt(_0x8b11x7[_0xa776[16]](_0xa776[18]));var _0x8b11x9=parseInt(_0x8b11x7[_0xa776[16]](_0xa776[19]));var _0x8b11xa;var _0x8b11xb;switch(bs_pinButtonPos){case _0xa776[23]:_0x8b11xa= _0x8b11x7[_0xa776[21]]()[_0xa776[20]]+ _0x8b11x7[_0xa776[8]](true)/ 2- _0x8b11x4/ 2;_0x8b11xb= _0x8b11x7[_0xa776[21]]()[_0xa776[22]]+ _0x8b11x7[_0xa776[6]](true)/ 2- _0x8b11x3/ 2;break;case _0xa776[24]:_0x8b11xa= _0x8b11x7[_0xa776[21]]()[_0xa776[20]]+ _0x8b11x8+ 5;_0x8b11xb= _0x8b11x7[_0xa776[21]]()[_0xa776[22]]+ _0x8b11x9+ _0x8b11x7[_0xa776[6]]()- _0x8b11x3- 5;break;case _0xa776[25]:_0x8b11xa= _0x8b11x7[_0xa776[21]]()[_0xa776[20]]+ _0x8b11x8+ 5;_0x8b11xb= _0x8b11x7[_0xa776[21]]()[_0xa776[22]]+ _0x8b11x9+ 5;break;case _0xa776[26]:_0x8b11xa= _0x8b11x7[_0xa776[21]]()[_0xa776[20]]+ _0x8b11x8+ _0x8b11x7[_0xa776[8]]()- _0x8b11x4- 5;_0x8b11xb= _0x8b11x7[_0xa776[21]]()[_0xa776[22]]+ _0x8b11x9+ _0x8b11x7[_0xa776[6]]()- _0x8b11x3- 5;break;case _0xa776[27]:_0x8b11xa= _0x8b11x7[_0xa776[21]]()[_0xa776[20]]+ _0x8b11x8+ _0x8b11x7[_0xa776[8]]()- _0x8b11x4- 5;_0x8b11xb= _0x8b11x7[_0xa776[21]]()[_0xa776[22]]+ _0x8b11x9+ 5;break};var _0x8b11xc=_0x8b11x7[_0xa776[29]](_0xa776[28]);var _0x8b11xd=_0x8b11x7[_0xa776[33]](_0xa776[32])[_0xa776[31]](_0xa776[30]);var _0x8b11xe=_0x8b11xd[_0xa776[34]]();if( typeof bs_pinPrefix=== _0xa776[35]){bs_pinPrefix= _0xa776[36]};if( typeof bs_pinSuffix=== _0xa776[35]){bs_pinSuffix= _0xa776[36]};if(_0x8b11xd[_0xa776[31]](_0xa776[38])[_0xa776[37]]){pinitURL= _0x8b11xd[_0xa776[31]](_0xa776[38])[_0xa776[41]](_0xa776[40])[_0xa776[39]](/\#.+\b/gi,_0xa776[36])}else {pinitURL= _0x8b11x1(location)[_0xa776[41]](_0xa776[40])[_0xa776[39]](/\#.+\b/gi,_0xa776[36])};var _0x8b11xf=_0xa776[42]+ pinitURL+ _0xa776[43]+ _0x8b11xc+ _0xa776[44]+ bs_pinPrefix+ _0x8b11xe+ bs_pinSuffix+ _0xa776[45]+ bs_pinButtonURL+ _0xa776[46];var _0x8b11x10=_0x8b11x7[_0xa776[48]]()[_0xa776[47]](_0xa776[38])?_0x8b11x7[_0xa776[48]]():_0x8b11x7;if(!_0x8b11x10[_0xa776[51]]()[_0xa776[50]](_0xa776[49])){_0x8b11x10[_0xa776[52]](_0x8b11xf);if( typeof _0x8b11x2=== _0xa776[35]){_0x8b11x10[_0xa776[51]](_0xa776[17])[_0xa776[41]](_0xa776[53],_0xa776[54])}else {_0x8b11x10[_0xa776[51]](_0xa776[17])[_0xa776[41]](_0xa776[53],_0xa776[55])}};var _0x8b11x11=_0x8b11x10[_0xa776[51]](_0xa776[17]);_0x8b11x11[_0xa776[16]]({"\x74\x6F\x70":_0x8b11xa,"\x6C\x65\x66\x74":_0x8b11xb});_0x8b11x11[_0xa776[16]](_0xa776[14],_0xa776[56]);_0x8b11x11[_0xa776[59]]()[_0xa776[58]](300,1.0,function(){_0x8b11x1(this)[_0xa776[57]]()})});_0x8b11x1(_0xa776[63])[_0xa776[67]](_0xa776[64],function(){if(_0x8b11x1[_0xa776[66]][_0xa776[65]]){var _0x8b11x12=_0x8b11x1(this)[_0xa776[51]](_0xa776[17]);var _0x8b11x13=_0x8b11x1(this)[_0xa776[48]](_0xa776[38])[_0xa776[51]](_0xa776[17]);_0x8b11x2= setTimeout(function(){_0x8b11x12[_0xa776[59]]()[_0xa776[16]](_0xa776[14],_0xa776[15]);_0x8b11x13[_0xa776[59]]()[_0xa776[16]](_0xa776[14],_0xa776[15])},3000)}else {_0x8b11x1(_0xa776[17])[_0xa776[59]]()[_0xa776[58]](0,0.0)}})}})

//This Pinterest Hover Button is developed by bloggersentral.com.

//Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html details

//Please do not remove this attribution

//]]>

</script>




Cambia lo que está en color morado, por la dirección de tu imagen y la posición que desees para tu botón. Estas son las posiciones que puedes modificar:



topleft  (arriba a la izquierda)
topright  (arriba a la derecha)
center  (centro)
bottomleft  (abajo a la izquierda)
bottomright  (abajo a la derecha)






CÓMO INSTALAR EL WIDGET DE PINTEREST EN EL SIDEBAR



Si de paso tienes cuenta en Pinterest (y si no, deberías) no dejes pasar la oportunidad de colocar un widget en el sidebar que muestre las ventajas de seguirte en esta red social. Yo te tengo que confesar que siempre ha sido mi red favorita, en la que me puedo pasar el día entero (literal) llenándome de inspiración con sus contenidos. Algo, que no consigo que me pase con Instagram, con la que estoy intentando entenderme, pero la puñetera se me resiste.




Bueno, a lo que iba (no lo puedo evitar...) este elemento es altamente efectivo, para atraer visitas a tu perfil de Pinterest, sobre todo si las imágenes que contiene, son muy llamativas para tus lectores. El tema está en saber qué clase de tablero instalar, porque puedes instalar un widget, que muestre todos los pines que hayas añadido últimamente, (sea cual sea el tablero) o instalar un widget de un tablero específico, con una temática que sabes que resulta muy atractiva para tus lectores. Esto, lo irás afinando con el paso del tiempo, cuando conozcas a través de las estadísticas, las preferencias de tu público. Así que, no te preocupes, porque es algo que siempre podrás ir variando. 



  Para mostrar tu perfil genérico con  los últimos pines que vayas incorporando, tienes que hacer clic, en la ruedita que encuentras junto al botón de crear perfil y elegir la opción Crear un widget.

poner-widget-pinterest-en-sidebar




Ahora tendrás que copiar el código que te facilita y pegarlo en un gadget HTML/Javascript del sidebar, para obtener un tablero igual al que te muestra en la ventana.


añadir-widget-pinterest-en-el-blog


Y listo, así de fácil es tener una vista previa de tus imágenes en Pinterest, para mostrarla a tus lectores. Te aseguro que es una táctica muy muy efectiva, para desviar visitas a tu perfil.





  Si quieres mostrar un tablero específico, tendrás que seguir los mismos pasos, pero situándote dentro del tablero que quieras enseñar. Una vez allí, tendrás que clicar en el botón que contiene tres puntos suspensivos y elegir la opción Crear un widget, para repetir el paso anterior.

añadir-gadget-pinterest-en-el-blog



Y con esto, dejamos listo el blog, para enviar lectores y contenidos fácilmente a Pinterest. Son pasos básicos que no cuestan apenas tiempo y te pueden brindar grandes resultados, así que, no los pases por alto.





DESCARGA LOS BOTONES QUE MÁS TE GUSTEN


Aquí tienes los botones que he diseñado para ti. Tan sólo tienes que hacer clic en los que más te gusten y te llevarán al enlace de descarga.

(Si quieres crear una galería de imágenes como esta, no te pierdas este tutorial)



Pajaritos pin-itFlechazo pin-itGlobos pin-it
Hoja pin-itPinterest pin-itPost-it pin-it





La verdad es que no entraba en mis planes publicar un tutorial de Pinterest ,porque de hecho es algo que está muy trillado,  pero a lo largo de estas semanas, he descubierto muchos blogs con temáticas muy visuales que no tenían un botoncito pin-it en sus imágenes y esto ha hecho que me ponga las pilas, a ver si consigo convencer a las que aún no lo tengan, porque es una pena que dejen pasar esta oportunidad tan buena de atraer tráfico a su blog.

En concreto me decidí gracias a mi compi Helena de Estupendos 40, que tiene unas recetas tentadoras y súper sanas en su blog y me parecía un desperdicio que sus lectoras no pudieran guardar esas recetas en sus tableros, para consultarlas cuando las necesitaran. De hecho, mi tablero Recetario, tiene ese fin: guardar todas las recetas que quiero hacer, para tenerlas bien a mano. De esta manera, cuando no sé qué cocinar, miro mi tablero desde el móvil,  accedo a la página de la receta y sigo los pasos desde ahí, por lo que me resulta comodísimo.



Bueno chiqui, pues colorín colorado, pero no me marcho sin que me cuentes cositas, que hablar sola es muy aburrido...(aunque Carlos Lozano no opine lo mismo) dime, ¿tenías ya botoncito y gadget de Pînterest en tu blog? ¿qué diseño de botón pin-it, te ha gustado más? ¿eres pinteresca o instagramer? cuenta, cuenta  


Qué disfrutes de lo que queda de puente!






¿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







miércoles, 24 de febrero de 2016

Mis 5 herramientas favoritas para aumentar la productividad

5-herramientas-para-aumentar-la-productividad



Suelo tener obsesión por la organización y la planificación, por eso antes de publicar el blog, diseñé mi propio planificador blogger para tenerlo todo estructurado, antes de lanzarme al ruedo.


Pero el que este sea un tema que centra gran parte de mi atención, no significa (ni mucho menos) que lo tenga todo perfectamente controlado. Así que hoy te muestro mis 5 herramientas favoritas, para conseguir aumentar mi productividad y lograr cumplir con los plazos (o al menos acercarme mucho).







A punto de cumplir mi 1º mes con el blog de forma pública, todavía estoy adaptándome a los horarios y a la terminación de tareas en el tiempo que me he asignado. De hecho, este post que estás leyendo tenía que haber salido ayer martes, pero entre que los días son imprevisibles (puede surgir cualquier cosa) y que no me gusta crear artículos de cualquier manera (con tal de cumplir con los plazos), he tenido que dejarlo para hoy.


Y tampoco pasa nada, al menos yo soy de las que piensa que si es necesario alargar el tiempo en algo, para que salga bien, merece la pena. ¿O acaso tú te comerías unos garbanzos duros, por querer disfrutarlos en 10 minutos, en vez de esperar 20?


Aún así, con todo lo que llevo trillado detrás del telón, tengo que reconocer que adaptarme al ritmo que me marqué en un principio, me está costando más de lo que había pensado antes de salir a escena. Porque aunque piense que para hacer las cosas bien, hay que dedicarles su tiempo, también le doy mucha importancia a cumplir los plazos.


Por eso hoy te cuento cómo estas 5 herramientas, me están ayudando a poner orden en mi rutina laboral y han logrado aumentar considerablemente mi productividad. El vídeo dura 48 minutos, porque no te las muestro por encima, sino que he preparado un tutorial paso a paso, para que le saques todo el partido, así que a continuación del vídeo, tienes el tiempo en el que comienza cada una y su duración :







GOOGLE CALENDAR

[Duración: 16'  5'' | Comienza en: 00:01:03]


Este servicio de Google me viene de perillas para recordar citas o tareas importante, pero además también la uso para guardar ideas.

 Normalmente la inspiración llega cuando estamos relajados. Es en esos momentos de parón productivo cuando la creatividad se muestra más despierta. Por eso cuando al mirar Pinterest o dedicarme a cualquier otra actividad fuera de mi horario laboral, me asalta una nueva idea, corro a apuntarla en mi calendario de tareas y le pongo una hora para que al día siguiente me la recuerde y me ponga a trabajar en ella.


Además también es fantástico para consultar el calendario de festividades y preparar un tema en concreto sin que te pille el toro.

Igualmente resulta excelente para programar toda la jornada o crear un calendario semanal y que te vaya avisando de cuando tienes que terminar una actividad y saltar a la siguiente.




NOISLI

[Duración: 7'  7'' | Comienza en: 00:17:08]



Esta aplicación me tiene enamorada, y es que me resulta imprescindible para centrarme y evitar distraerme con los sonidos que tengo alrededor, como por ejemplo, la peque viendo la tele, el perro ladrando o el vecino cantando.


Se trata de una selección de 16 sonidos especialmente indicados para aumentar la concentración. Puedes combinarlos como quieras y crear tus combos para escuchar siempre tus favoritos.


Te da la posibilidad de fijar un tiempo para esos sonidos, de manera que cuando finalizan sabes que debes descansar o pasar a otra tarea.


Además también cuenta con un editor de texto, libre de complementos, para reducir al mínimo las distracciones y poder escribir como una metralleta sin preocuparte de corregir nada. Una vez que has acabado, puedes echar mano del corrector ortográfico y guardar el texto o llevártelo a otro destino, como por ejemplo el editor de tu blog.

Pero lo mejor de todo es que cuenta con una extensión, que la puedes fijar en tu barra de navegación, para acceder directamente a tus combos favoritos y establecer el tiempo que necesites para cumplir tu tarea, sin necesidad de meterte en la página de la aplicación.

Para mí Noisli, ha sido todo un descubrimiento.







ONETAB

[Duración: 3'  91'' | Comienza en: 00:24:15]


Cuando me pongo a trabajar, suelo abrir tropecientas pestañas, que si Facebook, Metricool, Sinónimos, Blogger, Google +, Mailrelay y así nos podemos tirar hasta mañana. Esto antes me ralentizaba horrores el ordenador y además me causaba distracción, porque al tener activas las dichosas pestañitas, te vas coscando de si te mandan un mensaje en Facebook, si tienes una nueva notificación en Twitter etc...


Todas estas distracciones te las puedes ahorrar con One Tab. Se trata de una extensión (yo la tengo en Chrome, pero también está disponible para Firefox) que te aloja las pestañas en una sola, de manera que puedes acceder a cualquiera de ellas, en el momento que lo necesites con un simple clic y mientras no las usas, están guardaditas y no consumen apenas espacio en el navegador.


Desde que la uso, no escucho el ruido de sobrecarga que antes hacía el ordenador debido al exceso de pestañas abiertas y no estoy pendiente de las 20 notificaciones que se van añadiendo en las redes sociales a cada minuto. Supone un gran respiro para mi alocado cerebro que siempre tiene ganas de parranda  .





PABLO

[Duración: 14'  29'' | Comienza en: 00:28:06]


Se trata de una herramienta de edición gráfica, que viene genial, tanto para los que no tienen mucha maña diseñando como para los que vamos con prisa y no nos da la vida en ese momento, para crear una presentación sencilla, pero que quede fenomenal.


Pablo es un servicio de Buffer, que pone a tu disposición un banco repleto de preciosas imágenes que actuan como fondo para tu mensaje. Es ideal para crear banners o hacer una presentación con mensaje.


Sus 3 grandes ventajas son:


  Recorte automático de la imagen, adaptado a la red social en la que quieras publicar.


  Posibilidad de editar cualquier imagen que encuentres por la red, a través de su extensión para la barra de navegación (ojito con esto, que la frase cualquier imagen, tiene muchos matices, en el vídeo te lo explico bien).


  Una vez editada tu imagen, puedes compartirla directamente en la red social que quieras, sin salirte de la herramienta.



A mí personalmente me requetencanta, por su sencillez y lo bonita que quedan las presentaciones sin ningún esfuerzo. Al final del artículo, tienes un cartel que he creado en Pablo, mientras hacía el tutorial (puedes verlo en el vídeo).





RITE TAG

[Duración: 6'  18'' | Comienza en: 00:42:35]



Esta extensión la descubrí hace muy pocas semanas, gracias a un artículo estupendo de Manolo Rodriguez con 50 consejos cortos para promocionar un post. Me ha venido tan bien, que aunque es reciente, se ha ganado una plaza en este ranking, porque no sólo sirve para programar publicaciones.



Entre sus múltiples opciones, se encuentra la posibilidad de:


  Obtener sugerencias de hashtags, basados en el texto de tu mensaje.

  Crear hashtags predefinidos, para que se añadan a tu publicación con un simple clic.

  Variedad de emojis, para reforzar tu anuncio.

  Buscador de imágenes en Pixabay o en las redes sociales.

  Buscador de gifs (eso si, en inglés)

  Buscador de influencers por temas (ideal para mencionarlos y ganar mayor visibilidad)

  Integrar tus publicaciones en Rite Tag con Buffer, Hootsuite y todas tus redes sociales.

  Consultar los hashtags más relevantes del momento.

  Automatizar tus publicaciones.


Como hace muy poquito que la conozco, aun no me he puesto a la tarea de exprimir al máximo sus funciones (que encima son gratuitas) , por eso en el vídeo te explico sólo las dos primeras.

Pero la verdad es que es una extensión súper intuitiva aunque no entiendas inglés, por lo que creo que no tendrás ningún problema, pero si no entiendes algo, me lo preguntas en comentarios y te lo explico.





Acabo de descubrir 5 herramientas estupendas para aumentar mi productividadTuitéalo




Gestionar tu tiempo, de manera que te cunda al máximo es posible si ordenas tus tareas en función de urgencia o necesidad. Intenta cumplir primero con lo que corra más prisa o te reporte beneficios inmediatos y así, si no te da tiempo acabarlo todo, al menos habrás conseguido terminar lo más importante.



No existe una formula mágica para sacarle horitas extras al día, pero teniendo claras las prioridades  y haciendo uso de maravillosas herramientas que te simplifiquen la tarea, cumplir con tus objetivos, sólo es cuestión de tiempo: TIEMPO BIEN EMPLEADO.



el-secreto-de-la-productividad

         (Imagen: Noel Bauza)




Para terminar, te dejo esta infografía que resume las principales ventajas de cada una de estas magníficas herramientas, por si te la quieres guardar para tenerla a mano, pinearla en un tablero o compartirla en redes para que más personas le saquen partido (ambos, te estaremos muy agradecidos)  .

Pero no me voy sin preguntarte cositas, que a mí me gusta mucho una charleta, así que ¿qué te han parecido estas herramientas? ¿cual te ha gustado más? ¿alguna sugerencia que te esté dando resultado y pueda venirnos bien a los demás? te espero abajo, no tardes mucho!



infografia-5-herramientas-para-aumentar-productividad





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








domingo, 21 de febrero de 2016

Descubre la forma más fácil de incluir un Podcast en Blogger


insertar-un-podcast-en-blooger



 Hoy quiero hablarte de los podcast, sus ventajas y de cómo crearlos e instalarlos en tus entradas del blog de la manera más fácil. Cuando yo empecé a rastrear la red en busca de información para hacer un podcast, me encontré con mucha teoría y programas que había que descargar con los que, acto seguido, había que dar un curso acelerado para saber manejarlos. 



Tuve que tirarme varias horas y leer muchos artículos, hasta conseguir averiguar la manera más fácil de crear uno para incluirlo en una entrada. Así que he decidido evitarte a ti el sufrimiento y ahorrarte tiempo para que lo emplees en tareas más interesantes.







Muy buenos días ¿cómo vas con el fin de semana? ¿ya estás lamentando que mañana es lunes?, pues aprovéchalo que aún quedan muchas horas por delante.

 ¿Quieres descubrir la manera más fácil de hacer un podcast? pues vamos al turrón!




QUÉ ES UN PODCAST



Antes de nada, voy a definir en qué consiste este recurso, porque aunque es muy probable que lo sepas, puede que haya gente que aterrice en la entrada y no tenga ni la menor idea.

Se trata de una publicación en formato de audio, que se muestra como un pequeño reproductor en el que normalmente puedes controlar el momento en el que quieres escucharlo (mediante un botón de play) y adelantarlo, atrasarlo o pararlo según tus necesidades. Vamos, lo que harías en un reproductor MP3 normal. Aquí tienes un podcast en el que te hablo de cómo encontrar tu talento.



PARA QUÉ SE UTILIZA UN PODCAST



El podcast puede tener tantos usos como imaginación tengas:


  Puedes utilizarlo para grabar tu entrada de manera que pueda ser escuchada en vez de leida.


Básicamente, este es el uso que yo le doy a los podcast, porque al llevar una vida tan acelerada, en la que nos agenciamos un gran número de tareas al día, es bastante común, no poder pararnos a leer un artículo de un blog, peeeeero.... es probable que sí podamos enchufarnos unos cascos y escucharlo mientras hacemos otras cosas.

La mayoría de información que yo consumo, es a través de podcast y vídeos, por la falta de tiempo. De esta manera, no paro de conocer temas que me interesan, mientras plancho, cocino, limpio o salgo al parque. Conecto los auriculares al móvil y ¡carretera y manta!

Es una manera tan cómoda de consumir contenidos, que incluso Amazon le ha visto el filón, incorporando un servicio de descarga de audio libros por cuota mensual, no te digo más.



Claro está, que no se puede hacer esto con todas las entradas, por ejemplo, un tutorial es difícil  incluirlo en un podcast, porque falta el elemento visual para acabar de entenderlo. Pero para una entrada, quizás sobre reflexiones, consejos, incluso una entrevista a otra persona, viene genial y los lectores que anden pillados de tiempo, te lo agradecerán enormemente.


  También viene muy bien para compartir audios interesantes de otras personas, que contengan temas relacionados con los tuyos. Normalmente, se pueden descargar o incrustar en tu entrada de manera sencilla, al igual que hacemos con los vídeos.



  Igualmente, puedes compartir tu música favorita con un podcast.



    CÓMO INCLUIR UN PODCAST EN BLOGGER




    Seguramente hayas tenido la necesidad en alguna ocasión de incluir un podcast para mostrar a tus lectores. O puede que a raíz de ver en otros blogs este formato, que se ha puesto tan de moda, te haya picado el gusanillo de la curiosidad y desees saber de qué manera poder incluirlo en el tuyo.


    Como ya te he comentado, el problema suele ser que hay poca información práctica sobre el tema y la que has visto, se muestra de manera incompleta. Así que vamos a ver paso a paso, todo el procedimiento. Desde qué programa usar para grabarlo, hasta cómo subirlo a Soundcloud para obtener el código que nos permita insertarlo en la entrada del blog.



     Lo primero es grabar el audio que vamos a compartir. Ahí es dónde suele estar la madre del cordero, ¿qué programa utilizo que no me cueste horas de formación para hacerme con él?.

    Normalmente te recomiendan  Audacity para esto, pero yo no sé si seré la mujer más torpe del mundo, pero ni con manuales he conseguido enterarme del proceso. Para mí la manera más sencilla es grabar el audio directamente con  Movie Maker, para  editarlo y guardarlo en formato MP3. Pero claro, es un proceso  al que ya estoy acostumbrada y lo hago con los ojos cerrados, pero si tú nunca has manejado Movie Maker, te puedes pasar un rato para conseguirlo.

    Por eso te voy a mostrar cómo hacerlo en pocos minutos, usando un programa en línea, por lo que no te tienes que descargar nada (bueno si, el audio cuando lo grabes   )


    Para esto vas a necesitar usar tres opciones distintas en la misma aplicación:



     No te preocupes, porque todas están en la misma página. Al principio te va a resultar un pelín entretenido componer tu audio, pero a nada que lo practiques lo harás con facilidad. Además, no necesita ningún tipo de registro para usarla.


    ¡Por fin voy a saber cómo crear e insertar un podcast en mi blog, en pocos minutos!Tuitéalo


    Voy a explicarte el proceso paso por paso en el vídeo, para que lo entiendas con facilidad. Cuando termines de verlo, podrás añadir tu primer podcast en Blogger . Antes de nada, te advierto, que el vídeo lo grabé hace casi un año, por lo que vas a comprobar que la estética en general del blog, ha cambiado bastante, pero he preferido dejarlo, para que veas como todo es mejorable a base de formación y práctica.    ¿Todo listo? pues vamos al lío:




    Perdona el ruido del vídeo, por entonces tenía un portátil con poca capacidad y demasiado sobrecargado. Pero lo importante es que te haya servido para poder grabar tu podcast fácilmente en poco minutos.

    Como ves, una vez que tengas tu audio editado correctamente, tan sólo tienes que subirlo a SoundCloud, escribir el título, las etiquetas, la descripción, subir una imagen para el podcast si lo deseas y guardar. SoundCloud, te proporcionará el código que puedes incluir en tu blog para poder mostrar tu audio.
    Ya ves que no es nada difícil, aunque pueda resultarte algo entretenido, sobre todo al principio hasta que empieces a hacerte con el manejo.

    Espero que a partir de ahora, puedas incluir este tipo de recurso en tus entradas sin ningún problema, ya que el facilitar a tus seguidores la forma de consumir los contenidos, te supondrá un mayor número de visitas y tiempo de estancia en tu blog.

    Cualquier duda, déjame tu comentario y lo intentamos resolver. Y ahora, cuéntame:
    ¿Conocías el formato podcast? ¿Lo estas usando en algunas de tus entradas? Si es así, ¿qué tipo de herramientas usas para incluirlo en tu blog?

    ¡Que tengas un gran domingo!







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





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





    martes, 16 de febrero de 2016

    Crea una galería de imágenes en tu blog + 8 bancos de imágenes gratuitas

    como-crear-galeria-de-imagenes-en-blogger

    Una forma muy interesante para presentar una entrada que contiene un buen número de imágenes, puede ser crear una galería donde muestres esas imágenes alineadas en fila y puedas enlazar a la vez, cada una a un destino distinto, según te convenga.


    Para que lo entiendas mejor, te puede ser muy útil si tienes una tienda online y quieres hacer un especial mostrando tus productos o creaciones. También te puede servir para hacer un recopilatorio de entradas antiguas del blog, un tablero de fotografías enlazadas a tu Instagram, una selección de recomendaciones...


    Yo, por ejemplo en esta ocasión lo he utilizado para mostrarte una selección de imágenes gratuitas (de libre uso) que si haces clic en cada una de ellas, enlazan a las paginas, desde las que te podrás descargar dichas fotografías en alta resolución. Con lo cual, hoy te ofrezco un 2x1: un tutorial HTML muy útil + 8 webs de imágenes de libre uso. Recuerda pinchar en cada imagen para ir a la web correspondiente.










    Y ahora, vamos con el tutorial.


     Para hacer una galería de imágenes como esta, tan solo tienes que:


      Crear una entrada nueva en tu blog


      Pinchar en la pestaña HTML


      Pegar el siguiente código


      <table border="0" cellpadding="4"><tbody>

      <tr>

      <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

      <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

      <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

      <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

      </tr>

      </tbody></table>

      Lo que está en colores, es lo que vamos a modificar para crear nuestra galería de imágenes:


        En primer lugar nos encontramos con el código table border="0", esto solamente lo modificarás si deseas que tu galería tenga un borde alrededor, añadiéndole en ese caso el valor de grosor que desees para la línea que encuadre tu galería.


        El segundo código, cellpadding="4", corresponde a la separación de las imágenes que incluyas en tu presentación. Deberás aumentar este valor o disminuirlo, según la distancia que quieras crear en cada imagen respecto a la siguiente.


        En "URL DESTINO" debemos pegar la dirección a la que llevaremos al lector , cuando haga clic en la imagen.

        Pegaremos la dirección de nuestra imagen en "URL IMAGEN" (si no sabes cómo obtener la dirección de tu imagen, clic aquí y te lo explico en un plis)


        Si quieres añadir una descripción a tu imagen, rellena el campo "DESCRIPCION", si prefieres dejarlo en blanco, selecciona esta parte del codigo: alt="DESCRIPCION" y suprímelo (aunque te aconsejo que la añadas, porque es muy útil de cara al seo)


        IMPORTANTE: redimensiona las imágenes antes de pegar la dirección de enlace. Todas deben tener las mismas medidas para que la galería se vea armónica. Debes tener en cuenta el ancho de tus entradas para averiguar (según el número de imágenes que añadas en cada línea) la anchura que debe tener cada una de ellas. Por ejemplo:


          Si yo tengo un ancho máximo de 650px para mis entradas y quiero añadir 5 fotografías en cada línea, debo dividir 650/5= 130px. A esa cantidad le debo quitar al menos 10px, si quiero que me quede alguna separación entre ellas, con lo cual la medida correcta sería 120px.





        Si aun así, una vez que introducimos el código HTML, vemos necesario agrandarlas o reducirlas, debes añadir el siguiente código  width="ancho deseado en pixeles", justo a continuación de  "URL IMAGEN". Quedaría de esta manera:


        <table border="0" cellpadding="4"><tbody>

        <tr>

        <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" width="ancho en pixeles" alt="DESCRIPCION" /></a> </td>

        <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" width="ancho en pixeles" alt="DESCRIPCION" /></a> </td>

        <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" width="ancho en pixeles" alt="DESCRIPCION" /></a> </td>

        </tr>
        </tbody></table>


        Sustituyendo la palabra "ancho en pixeles" por el valor que necesites, por ejemplo "150". Recuerda no introducir la medida en la tabla desde el principio, (porque va a influir en el tamaño inicial de tu imagen), sino como retoque si crees que es necesario. Aunque yo no tocaría aquí, para evitar deformar la imagen.




        Cómo añadir o quitar líneas a nuestra galería:




        Con el código que te muestro al principio, tienes una galería de una sola línea y cuatro filas. Si quieres añadir más líneas, copia el código completo y pégalo a continuación en el HTML de tu entrada:


          <table border="0" cellpadding="4"><tbody>

          <tr>

          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

          </tr>

          </tbody></table>

          <table border="0" cellpadding="4"><tbody>

          <tr>

          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
          </tr>
          </tbody></table>



          Y así sucesivamente, tantas líneas como desees.



          Cómo añadir o quitar filas a nuestra galería de imágenes:



          Si quieres quitar filas (imágenes), selecciona una y suprime (en negrita te señalo todo lo que debes suprimir):





          <table border="0" cellpadding="4"><tbody>

          <tr>

          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
          </tr>
          </tbody></table>




          Y si quieres añadir selecciona, copia y pega:




          <table border="0" cellpadding="4"><tbody>

          <tr>
          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>

          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>
          </tr>
          </tbody></table>





          Añade color en el fondo o en el borde de tu galería




          Otra manera de añadirle un extra de encanto a tu galería, es incluir un fondo o colorear el borde de algún color que guarde relación con las imágenes o con los tonos de tu blog. Para que tengas claro el resultado te lo muestro a continuación:








          En la primera tabla, he incorporado un fondo de color y en la segunda, le he dado color al borde de la tabla. ¿Qué te parece el efecto? ¿te mola? pues aquí te cuento cómo se hace:





          Añadir un fondo de color




          <table bgcolor="#E3ABC4" border="2" bordercolor="#E3ABC4" cellpadding="4"><tbody>


          <tr>


          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>


          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>


          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>


          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>


          </tr>


          </tbody></table>



            Cambia el número hexadecimal que aparece en naranja #E3ABC4 por el que corresponda al color que te guste. Si no sabes cómo incluir colores hexadecimales, te aconsejo que te instales la extensión Colorzilla y si quieres que te cuente cómo usarla, en el anterior tutorial que publiqué, te lo cuento en vídeo, además de enseñarte a crear una barra informativa.



            En esta ocasión, he puesto un borde, porque como se mostraban las dos tablas juntas, de no hacerlo, hubieran quedado descompensadas en alineación, pero cómo puedes observar, le he puesto el mismo tono, para que no se note. Si tú vas a añadirle a tus tablas el mismo fondo y no vas a incluir bordes, puedes dejar el borde a 0 y suprimir la parte que pone bordercolor="#E3ABC4. Aunque también la puedes aprovechar para resaltar un color de borde dentro del fondo, pero recuerda que si añades un borde, debes tener un valor superior a 0 y cuanto mayor sea el valor, más grueso será el borde.






          Colorear el borde de la galería de imágenes


          Para añadir un color al borde, tan sólo tendrás que determinar el grueso que tendrá, aumentando o disminuyendo el valor border="2y añadir el número hexadecimal que corresponda al tono que quieres que se muestre.



          <table border="2" bordercolor="#E3ABC4" cellpadding="4"><tbody>


          <tr>


          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>


          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>


          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>


          <td> <a href="URL DESTINO" target="_blank"><img src="URL IMAGEN" alt="DESCRIPCION" /></a> </td>


          </tr>


          </tbody></table>




          Crear una galeria de imágenes sin enlaces



          Después de publicar el post, me han preguntado como crear la galería sin enlazar las imágenes. Así que lo voy a explicar, por si alguien más, ha tenido esa duda. 
          Si no deseas incluir ningún enlace en tus imágenes, tendrías que eliminar las etiquetas <a> </a> que son las que direccionan a un vínculo. Quedaría de esta manera:




          <table border="0" cellpadding="4"><tbody>

          <tr>

          <td><img src="URL IMAGEN" alt="DESCRIPCION" /></td>

          <td><img src="URL IMAGEN" alt="DESCRIPCION" /></td>

          <td><img src="URL IMAGEN" alt="DESCRIPCION" /></td>

          <td><img src="URL IMAGEN" alt="DESCRIPCION" /></td>

          </tr>

          </tbody></table>




          Pues esto ha sido todo, creo que lo he explicado de una manera sencilla y que lo habrás entendido sin dificultad, pero si tienes alguna duda, deja tu comentario y te lo aclararé tan pronto como lo lea. De paso estaría genial que me contaras qué te ha parecido la entrada de hoy y qué es lo que más te ha gustado ¿el tutorial o las páginas de imágenes gratuitas?  (espero que las dos)





          Descubre cómo presentar varias imágenes para captar la atención.Tuitéalo



          ¡Que tengas una gran semana!



          ¿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 para mis chicas, 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








          domingo, 14 de febrero de 2016

          Cómo crear una barra informativa estilo Hello Bar


          barra-hello-bar-personalizar



          No sé si seré la única o le habrá pasado a más personas, pero cuando instalé la Hello Bar en mis plantillas prediseñadas, a veces me daba problemas, porque mostraba su publicidad en vez de la mía.


          Vale que en la opción gratuita muestre su logotipo, hasta ahí me parece lógico, pero había veces que entraba en el blog y me encontraba una sorpresita como esta:







          problemas-hello-bar


          En lugar de mostrar el mensaje que yo había creado, que era este:


          diseñar-hello-bar


          Y no es que me pasara sólo en una plantilla. De haber sido así, hubiera pensado que era algún problema con mi HTML, pero no, me lo hacía en todas. Así que, cansada de que no estuviera cumpliendo con su labor, rastreé la red en busca de posibles opciones. Pero como no encontraba ninguna aplicación que pudiera personalizar a mi manera, al final opté por crearme yo misma un código HTML, para mostrar un mensaje de contacto a las personas que entraran a mirar la plantilla.


          QUÉ ES LA HELLO BAR



          Pero antes de nada, voy a contarte brevemente para qué sirve la herramienta Hello Bar, por si aún no la conoces. Se trata de un código script que puedes insertar en tu plantilla, para destacar mediante una barra superior un mensaje que comunique a tus visitas cualquier evento importante que quieras resaltar.

          Por ejemplo:


            Has decidido hacer un sorteo y quieres lograr una mayor participación


            Quieres que más personas se apunten a tu lista de suscripción


            Necesitas avisar de algo importante


            Te gustaría que leyeran un post en particular


            Vas a ofrecer servicios profesionales


            Has creado una oferta y no quieres que se la pierdan


            Quieres enviarlos a una página o red social



          Aquí tienes un gift con todos los ejemplos que te he propuesto, para que lo veas más claro:


          diseñar-hello-bar




          Como puedes comprobar se trata de una utilidad a la que se le puede sacar muchísimo partido. Encima la puedes personalizar con los colores de tu blog y no es difícil de configurar. Pero como ya te he comentado, mi pega es que cuando le da la gana, muestra su publicidad en vez de mi mensaje y eso le quita de un plumazo todo su encanto.




          CÓMO INSTALAR UNA BARRA INFORMATIVA CON HTML








          Si no tienes mucha idea de HTML, puede que te esté dando miedito, pero no problem, porque lo vamos a hacer con videotutorial y una copia de seguridad, como es costumbre. Vamos, que tu blog está a salvo y además instalar este código es una "chuminá", en menos de un minuto, lo tienes ventilado, no te preocupes. Al no llevar ningún script, ni nada raro, tampoco te va a ralentizar la página, así que puedes estar tranquila que es completamente inocuo.





          VENTAJAS Y DESVENTAJAS



          Pero antes de empezar, te cuento las ventajas y desventajas con respecto a la Hello Bar, para que valores si para ti suponen un problema o no. Empezamos primero por lo malo, (a mí me gusta siempre comenzar con lo peor, así termino con buen sabor de boca  ):



          DESVENTAJAS 


            Si tienes un menú superior, te lo va a tapar. Con la Hello Bar, también pasa, pero tiene una flechita que puedes clicar para ocultarla y así acceder al elemento que esté tapando. Aún así, se puede optar por situar la barra informativa, bajo el menú superior (esto quedará bien, si tu menú no es desplegable). Esta sugerencia la ha aportado Yudy, de Ingenio Diy y se lo agradezco mucho, porque últimamente tengo las neuronas un poco aletargadas y no había caído  


            Tendrás que diseñar tu barra informativa. Con la Hello Bar, eliges los tonos, el texto y el enlace. Y una vez lo configuras todo, sólo tienes que copiar un código script y pegarlo en el blog. Con este código, lo que vas a mostrar es una imagen, previamente diseñada. Esto es fundamental que lo hagas tú, porque yo no puedo adivinar, qué mensaje quieres transmitir a tus lectores, así que no se puede arreglar de otra forma...



          VENTAJAS


            El único mensaje que mostrará tu barra informativa, será el tuyo. Ni logotipo ajeno, ni riesgo de que le dé un ataque de protagonismo y sólo hable de ella.


            Al ser una imagen, podrás darle el diseño que te dé absolutamente la gana, estampados, brillos, texturas... imaginación al poder! (aunque yo te aconsejo que destaques el mensaje y no lo hagas pasar a un segundo plano, por exceso de parafernalia) y con los botones más de lo mismo. Además , te voy a contar paso a paso como diseñarla, tanto en Photoshop como en Photoscape, por si no tienes (o no entiendes) el primero. Y encima, vas a conocer 3 aplicaciones muy interesantes para tu blog: Tinypic, Tinypng y Colorzilla. Seguramente, te haya hablado alguna vez de ellas, pero hoy las vas a ver en acción.


            Es ligera (no ralentiza el blog) y se adapta perfectamente a vista móvil.



          Bueno, pues ya está todo dicho. ¿Qué te parece? ¿te gusta la idea, prefieres Hello Bar o ninguna de las dos?


            Si es la última opción, te felicito por haber llegado hasta aquí, eres de las que te gusta leer y eso me encanta. Si ya de paso, me cuentas tu opinión en los comentarios, me encantaría aún mas.


            Si prefieres la Hello Bar, la instalación es muy sencilla, pero por si acaso, aquí tienes un tutorial de Cyball Brigitte, que lo explica muy bien.


            Si te ha molado mi propuesta, pues aquí tienes el vídeotutorial y justo a continuación, los códigos que necesitas.




          Aquí tienes los enlaces a las herramientas de las que te he hablado en tutorial:
















          Y ahora, vamos al lío!

          Dirígete a Plantilla y haz una copia de seguridad primero. Una vez dentro de Plantilla >Editar HTML, haz clic en cualquier sitio (dentro de la plantilla) y pulsa Ctrl+F para que aparezca la caja de búsqueda. Pega esto y dale a intro:

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

          Justo debajo, añade este código:

          <div id='barrainformativa'>
          <a href='enlace al que quieres llevar a tus lectores' target='_blank'><img border='0' src='enlace de tu imagen'/></a></div>


          Ahora vamos a dirigirnos a las parte del CSS dentro de tu plantilla, para pegar este código. Sigue paso a paso el videotutorial, para que sepas dónde colocarlo:

          #barrainformativa {
          margin-left: -40px;
          width: 100%
          float: center;
          position: fixed;
          z-index: 601;
          }




          *Si eres de las que tiene un menú superior y no quieres que te lo tape, puedes incluir este código padding-top: 40px; e ir jugando con el valor, hasta situarlo justo debajo de tu menú. (Esto me lo sugirió Yudy de Ingenio Diy, y en buena hora, porque la verdad es que yo no había caído). Quedaría así:

          #barrainformativa {
          margin-left: -40px;
          padding-top: 40px;
          width: 100%
          float: center;
          position: fixed;
          z-index: 601;
          }


          Para terminar, vamos a añadir un último código CSS para que tu barra, se adapte perfectamente a la vista móvil:

          .mobile #barrainformativa img{
          height: auto; 
          max-width: 100%;
          }




          Y ya la tienes lista! ¿qué te parece? ¿ha sido sencillo, verdad? pues ahora espero que te dé muchas alegrías, en cualquier objetivo que la emplees. Y ya que sigues ahí, déjame un comentario anda, que me hace mucha ilusión y me cuentas qué te ha parecido o si tienes alguna duda ¿vale?

          Aprovecha lo que queda de Domingo y que tengas una gran semana. Un abrazo!




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





          ¿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