En Blogger: Más Seguridad para ti y los Usuarios de tu Blog usando el Protocolo HTTPS

Me acabo de enterar vía +Andrés Tirado, que Blogger está implementando una nueva opción que hará que tu blog sea más seguro para ti y tus visitantes. Se trata de la posibilidad de obtener el protocolo llamado HTTPS" totalmente gratis.



Este nuevo beneficio que, gradualmente será añadido para todos los usuarios como opción en las opciones de configuración del panel, es una iniciativa apoyada en la idea: HTTPS Everywhere, de la que Google es un gran defensor, y que promueve el uso del protocolo HTTPS en la Web con el fin proveer más seguridad a los usuarios al usar Internet.

Usar en tu blog el protocolo HTTPS ofrece múltiples beneficios en cuanto a seguridad se refiere. Como nos explican desde su blog, es posible impedir el acceso no autorizado a información confidencial de tus visitantes, o que un ciberdelincuente le de seguimiento a la actividad de un usuario o a la de los administradores del blog. Evita que a un usuario se le redireccione a otro sitio malicioso mientras trata de visitar tu blog y también, se detecta si un atacante quiere modificar los datos que Blogger envía al visitante.

Otro beneficio, no menos importante es que usar protocolo HTTPS mejora la clasificación del sitio en Google, según nos dicen en el blog para webmasters de Google. Además favorece la confianza que depositan los usuarios o visitas del blog al usarlo.

De momento, según nos dicen, esta nueva opción solo estará disponible para quienes utilicen en su blog:"blogspot", y no para quienes tienen configurado un dominio personalizado.

Si usas el dominio "blogspot" y quieres habilitar en tu blog el protocolo HTTPS, tienes que ir a Configuración > Lo básico > Configuración de HTTPS y en Disponibilidad de de HTTPS seleccionar: "Sí".

Una vez activado, la dirección web de tu blog pasaría a ser: https://mi_blog.blogspot.com en lugar de: http://mi_blog.blogspot.com.

¿Ansioso por usar en tu blog el protocolo HTTPS? Yo estoy que me muero de las ganas.

Más Información recomendada
Protege tu sitio con protocolo HTTPS
Activa el protocolo HTTPS para tu blog de Blogger

No Aparecen las Secciones con Gadgets en Diseño. Solución

Hace varios días, recibí un correo de un usuario de Blogger que decía más o menos así:

Hola Karla,
Mi problema y consulta radica en que no puedo ver ningún widget en  "Page Elemments" o "Diseño".
He tratado y he intentado jugar un poco con el css (por aquello de que talvez me lo esté ocultando). Espero que puedas ayudarme. De antemano, muchas gracias.

Ésto es algo que ya me habían comentado antes, pero sucedía solo en la sección de las entradas del blog, ésta no aparece, así como tampoco se ve el widget de las entradas como puede apreciarse en la imagen de abajo. ¿Qué misterioso verdad?





Para que no cunda el pánico, debo empezar por decir que ésto puede pasar solo al usar alguna plantilla de terceros, no en las nativas de Blogger donde ésto no sucede o no debería suceder.

La causa

Partiendo del punto de que la plantilla soporta widgets, por lo que he visto y he comprobado en mi propia experiencia, la causa principal de este misterio/problema se origina al utilizar el elemento: <section> de HTML5 en la sección que comprende el widget de las entradas. Aunque puede darse el caso de que dicha etiqueta haya sido usada también en alguna columna lateral u otra sección que incluya contendio relevante del blog.

Por alguna razón, y que tal vez tenga que ver con su etiqueta propia b:section, Blogger, tiene dificultades al devolver resultados en la página que muestra los "elementos de la página" o "Diseño" cuando se utiliza el susodicho elemento <section>, y no aparece la sección con su respectivo gadget, solo se ve el espacio vacio y por lo tanto, no es posible acceder a las opciones de configuración del gadget.

La solución

La solución es simple, tomando en cuenta que se va a mantener el elemento <section>. Solo habrá que cambiar el corchete angular: < de dicha etiqueta por su entidad: < y ésto lo haríamos tanto en la etiqueta de apertura como la de cierre, accediendo al código fuente de la plantilla (en Editar HTML) y para no batallar mucho, usaríamos el buscador de editor pulsando las teclas Ctrl + F, y buscaríamos la susodicha etiqueta.

Entonces nos quedaría así:

<section> Todo el código que encierra la etiqueta </section>

Y así lo haríamos para las secciones que haya. Hecho lo anterior, la sección de la columna principal u otra sección con su respectivo gadget(s) se visualizarán correctamente en la página que muestra los elementos de la página (desde Diseño) y la plantilla tendrá la respectiva etiqueta <section> de HTML5.

Notas Finales

Otra causa que provoca que no se visualice la sección y gadgets desde Diseño, es que simplemente en la plantilla no se han definido secciones propias de Blogger, en cuyo caso no será posible añadir widgets a la plantilla, sino que habrá que utilizar HTML para agregar un elemento desde el código de la plantilla. 

Por lo anterior no habrá que preocuparse mucho, ya que por lo general, las plantillas de terceros que se ofrecen a los usuarios de Blogger soportan widgets. Cuando ocurre, suele pasar solamente en la sección de la cabecera del blog, donde el programador/diseñador o quien haya editado la plantilla a agregado el código de la sección de la cabecera sin utilizar código propio de Blogger, que habilita la funcionalidad de agregar una imagen y configurar la forma en que ésta se muestra desde la sección de Diseño.

Espero sea útil. Como los he extrañado ;)

Novedades en los Códigos Condicionales Blogger (que permiten Mostrar Contenido o Excluirlo )

Recientemente Blogger hizo unos cambios en su código condicional. Ahora, en muchos casos, podemos usar menos código al crear sentencias condicionales, así que pensé que sería bueno dar una repasadita al tema.

Los códigos condicionales de Blogger, resultan muy útiles al personalizar el blog, ya que permiten llevar a cabo determinadas acciones como por ejemplo, incluir o excluir elementos de la plantilla en determinada página.

¿Alguna vez te has preguntado porqué en la página principal los títulos del blog son enlaces que dirigen a una entrada, y una vez que accedes a la página individual, ya no lo son? Pues éso sucede gracias a este código.

Este código se ejecuta del lado del servidor, éso quiere decir que Blogger lo procesa y luego devuelve los resultados al navegador y éste los muestra en pantalla.

Usándolo, podemos por ejemplo optimizar el encabezado del título del blog haciendo que en la página principal el título tenga una etiqueta h2 y al ingresar al post una etiqueta h1 (así como lo tengo en mi blog), también podemos excluir elementos de una manera eficiente, mostrar elementos en páginas con determinada etiqueta, cerrar comentarios automáticamente y mucho más.

En resumen y dicho de una forma breve, los códigos condicionales son una serie de instrucciones que ejecuta Blogger y permiten incluir contenido en el blog o excluirlo. 

Cómo luce el código condicional

Formato
Una expresión condicional simple, que solo incluye una sola condición tiene el siguiente formato:
<b:if cond='condición'>
[contenido que se va mostrar]
</b:if>

Si se cumple la condición, entonces se mostrará el contenido que pusimos dentro de ésta.

Dicho código está compuesto de una etiqueta b:if, y debe llevar una etiqueta de cierre </b:if>.

En las condiciones se usan ciertos elementos que permite devolver un resultado.  Por ejemplo: <data:post.title/> devuelve el título de las entradas. Estos elementos tienen un formato: <data:name/>, en donde name es el nombre de la información que se va a utilizar.

Algunos datos pueden utilizarse en todo el blog, mientras que otros están reservados para usarse solo en un widget específico.

Puedes ver la lista maestra de todos los datos disponibles para los widgets de Blogger en su página.

Una novedad interesante, es que el código también puede incluir etiquetas b:elseif, además de la  b:else, aunque ambas son opcionales. La primera sirve para mostrar contenido si aún no se ha mostrado contenido usando b:if, por otro lado  b:else muestra contenido cuando no se cumplieron ninguna de las condiciones b:if o b:elseif previa (s).

Algo que ahora también resulta interesante, es que podemos simplificar las condiciones cuando usamos  b:if o b:elseif si utilizamos: or y and dentro de la condición.

Con esta nueva posibilidad, nos estaremos ahorrando algunos caracteres (menos caracteres al final de cuentas es igual a un menor tamaño de nuestro documento/plantilla) y el código resultante es más legible.

Usando etiquetas b:if y b:elseif y b:else.

Formato 
<b:if cond='condition'>
  [contenido que se va mostrar si se cumple la condición]
<b:elseif cond='otra condition'>
  [contenido que se va mostrar si no se ha cumplido ninguna condición "if" ni "elseif"]
<b:else/>
  [contenido a mostrar si no se cumple ninguna condición "if" ni "elseif"]
</b:if>

Ejemplo de código condicional que usa las etiquetas b:if b:elseif y b:else  y que se usa en las plantillas para el título de los entradas.

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

Antes de la actualización las plantillas usaban todo este código condicional para lograr lo mismo:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Los dos códigos arrojaran el mismo resultado, que es el título del post con una etiqueta h3 y que figura como enlace a la entrada, siempre y cuando no esté en la página individual. La diferencia es que el primero es más compacto, ya que con la nueva etiqueta b:elseif y el operador and se simplificó el código.

Lista de código condicional que resultan muy útil

Si la página actual es una página de Inicio

<b:if cond='data:blog.url == data:blog.homepageUrl'>[contenido]</b:if>

Si la página actual es una página estática

<b:if cond='data:blog.pageType == "static_page"'>[contenido]</b:if>

Si la página actual es una entrada individual

<b:if cond='data:blog.pageType == "item"'>[contenido]</b:if>

Si la página actual tiene determinada URL (especificamos la URL)

<b:if cond='data:blog.url == "URL_de_la_Página"'>[contenido]</b:if>

Si la página actual es una página no encontrada o de Error 404

<b:if cond='data:blog.pageType == "error_page"'>[contenido]</b:if>

Si la página actual en una página de archivo:

<b:if cond='data:blog.pageType de archivo == "archive"'>[contenido]</b:if>

Si la página actual es una página de inicio, o página de archivo o página de etiquetas o página de un búsqueda

<b:if cond='data:blog.pageType == "index"'>[contenido]</b:if>

Si la página actual es una entrada ó una página (una sola condicional para aplicar en dos tipos de página)

<b:if cond='data:blog.pageType in {"static_page", "item"}'>[contenido]</b:if>
que sería lo mismo que:

<b:if cond='{"static_page", "item"} contains data:blog.pageType'>[contenido]</b:if>

Así como usamos el operador: == que se significa: igual a, podemos usar != que significa lo contrario (no igual o desigual) para cambiar la condición.

Por ejemplo:
Si la página actual no es una página estática y no es una entrada individual (útil cuando usamos resúmenes automáticos en todas las páginas del blog, excepto por la página individual)

<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>[contenido]</b:if>

Ejemplos de Usos

Aplicar CSS. Por ejemplo, vamos a imaginar que quieres que el color de fondo del blog cambie al estar en las páginas estáticas  y en las entradas.

Para tal caso habrá de definir la regla de CSS para que ésto ocurra y ponerla dentro del código condicional, y lo haríamos así en las nuevas plantillas, y lo pondríamos después ]]></b:skin>

<b:if cond='data:blog.pageType in {"static_page", "item"}'><!--Si el tipo de página actual es una página estática, o una página individual-->
<style>body{background-color:green}<!--Se aplica un color verde al fondo--></style>
</b:if>

Para las viejas plantillas (de diseño como mínima, etc.) habrá que usar <style type="text/css"> en lugar de <style> para que valide según las especificaciones de la W3C.

Mostrar un elemento solo en la página principal. Imagina que quieres mostrar un elemento como un slideshow solo en la página principal. Para lograrlo creamos la condición y ponemos dentro el CSS y el script:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>...</style>
<script>...</script>
</b:if>

Luego creamos la condición para el HTML, por ejemplo, supongamos que lo pusimos en una sección debajo de la cabecera:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="seccion_slider">
...
</div>
</b:if>


De ese modo, tanto el CSS, el script como el HTML del slideshow se cargan solo en la página de inicio.

Ocultar/Excluir la columna lateral del blog en las páginas estáticas.
Si bien podemos ocultar la columna lateral del blog usando un display:none podemos hacerlo de forma más eficiente, si creamos una condición para que no se muestre en la página estática, y lo hacemos si envolvemos el código b:if en toda la estructura de la columna lateral.

Eso quiere decir que todos los elementos que estén en la columna lateral, no van a ser descargados por el navegador, a diferencia de usar display:none, en donde si se descargan  pero no se muestran porque lo evitamos con ese CSS.

<b:if cond='data:blog.pageType != "static_page"'><!--Si la página actual no es una página estática, entonces se muestra la columna lateral-->
<aside>
...
</aside>
</b:if>

Como puedes ver el código condicional te ofrece un montón de posibilidades en el diseño del blog y en su optimización ;)


Referencias
Etiquetas de Blogger para Diseño del centro de ayuda oficial Blogger
Códigos de información de "Diseños" del centro de ayuda oficial Blogger
Entradas relacionadas de terceros que te recomiendo:
Uso de condicionales en Blogger
Usar condiciones

Cómo Seguir a un Blog de Forma Privada desde Blogger

Afortunadamente para los que usamos Blogger, existe una forma de seguir a un blog de forma privada fácilmente (también tenemos cosas interesantes que presumirles a los que usan Wordpress...).

Sí, seguir un blog que te gusta y/o del que no te quieres perder ninguna actualización, sin que Juanito o Pepito sepan que lo sigues. ¿Por qué todo mundo tiene que enterarse de ésto si no lo quieres?

La lista de lecturas se actualiza rápido según he comprobado, así que puedes estar tranquilo de que recibirás las novedades oportunamente y no tendrás que usar servicios de terceros para poder consultar las actualizaciones de un blog ;)

Ésto lo lograrás con unos simples pasos, y una  vez que configures las opciones, podrás mantenerte al tanto de las actualizaciones del blog o blogs que te interesen.

Cómo Agregar a un Blog para Seguirlo

1. Ingresa al  panel de Blogger. O bien, otra forma de acceder si estás en cualquier página de las opciones de configuración de uno de tus blogs, es haciendo click en: "Mis blogs".
2. Dirígete al fondo de la página, donde dice "Lista de Lecturas".
3. Haz click en el botón que dice: "Añadir".
4. Añade la URL del blog en el campo, y en la opción de seguimiento selecciona: "seguir de forma anónima".
   
   
   
   Puedes añadir varios blogs, si haces click en +Añadir, antes de hacer click en el botón que dice: "Seguir".
   
5. Una vez que hagas click en Seguir estarás añadiendo el blog (o blogs) a tu lista de lecturas, siguiéndolo (s) de forma privada, y podrás acceder a las actualizaciones seleccionando el blog desde lista de Blogs que sigues y que aparece a la izquierda en dicha sección.

Nota: Si un blog al que sigues utiliza el gadget de "seguidores" disponible en Blogger, no aparecerás como seguidor, puesto que le sigues de forma anónima.

¿Qué fácil verdad? Ahora podrás mantenerte al tanto de las novedades de los blogs que te gustan de forma privada o te enterarás de lo que publica tu ¿competencia?

Tus Opciones para Poner Botones de Redes Sociales en las Entradas

Antes de escribir unas guías para poner botones de redes sociales tanto en la versión de escritorio como la móvil, quería escribir una entrada que sirviera como introducción, sobre el muy gastado pero necesario tema de los botones, con el fin de que cualquier persona, sobre todo los que recién comienzan, sepan con certeza el panorama actual de los botones para compartir de Blogger y puedan decidir cuál es la opción más conveniente para su blog.

Echando un vistazo al panorama actual de los botones para compartir nativos de Blogger

Blogger ya nos facilita botones para que podamos agregar al blog fácilmente. Tal vez no sean los más modernos o vistosos, pero es lo que hay y cumplen el propósito.

Para agregarlos, simplemente haces click en la pestaña: Diseño, luego, haces click en "Editar", en la sección que dice: "Entradas del blog". Después, marcas la casilla que dice: "Mostrar botones para compartir", tal y como se muestra en la imagen de abajo, y luego guardas el cambio haciendo click en el botón que dice: "Guardar".

Hecho lo anterior, los botones se verán así en la versión Web:

Y así lucirán en la versión móvil:

Toma en cuenta que el color de fondo y que en las imágenes anteriores se ve gris puede ser cualquier otro, ya que ese color de fondo lo personalizas tú en tu plantilla, si usas una plantilla nativa de Blogger.

En la versión de escritorio, aparecen los botones de: Gmail, para enviar una entrada a una dirección de correo electrónico, el de Blogger, para crear un enlace al blog desde una entrada, el de Twitter, el de Facebook  y de Pinterest para compartir la entrada respectivamente, y finalmente el botón +1 de Google+, para hacer +1 y/o compartirlo en Google plus.

Las cosas cambian dramáticamente en en el caso de la versión móvil de Blogger. Ahí aparece un botón que dice:"Compartir", y al hacer click sobre éste, aparecen las opciones con los botones para compartir en : Google+, por correo electrónico, en Facebook y en Twitter. No hay disponible un botón para Pinterest, que fue agregado el año pasado solo a la versión Web (nos lo siguen debiendo).

A un lado del botón: "compartir", figura el botón +1, que solo sirve para hacer más uno a la entrada. No para compartir la entrada.

Como puedes ver, los botones lucen diferente en ambas versiones.

Yo no sé que pienses tú pero el hecho de que el botón +1 aparezca a un lado del que dice: "compartir", a simple vista puede creerse que solo ése botón está disponible, me refiero al botón +1. Ya me lo han comentado antes un par de personas.

Ésto pudiera parecer muy subjetivo, pero el hecho de que alguien lo haya pensado, hace que surja la duda e inquietud de que otras personas puedan pensar lo mismo, y creo que merece la pena prestar atención a ésto.

Una vez sabiendo lo que Blogger facilita y cómo funciona, habrá que decidir si ésta opción es la más conveniente para ti, y por ende la usarás, o si vas a usar otra opción que disponga los botones que a ti te conviene tener.


Las opciones disponibles

No tienes que resignarte a usar los botones para compartir de Blogger, si no te gustan o quieres algo diferente, o más botones de redes sociales.

Hay varias opciones por las que puedes optar, y las hay para casi todos los gustos y necesidades. Veamos algunas ventajas, limitaciones, entre otros aspectos importantes.

1. Servicios de terceros que ofrecen botones

Existen en la red varios sitios que ofrecen botones de redes sociales para que puedas poner en el blog. Algunos de los más importantes debido en gran parte a su antigüedad en la red, y a la popularidad que gozan son:

• AddThis. AddThis en un servicio que ofrece botones de redes sociales y otros elementos destinados a la promoción de contenidos.
  
  Para empezar a usar sus complementos tienes que registrarte o acceder por medio de tu cuenta de Google+, Twitter o Facebook, y una vez que lo hagas tendrás acceso a todos sus complementos gratuitos, entre ellos los botones para compartir.
  
  A continuación puedes ver dos de sus recursos gratuitos, el primero se trata de una barra flotante y enseguida unos botones sin el uso de JavaScript.
  
  
  
  
  Como ellos facilitan el código, tú solo tienes que preocuparte por agregarlo al blog, y estos estarán funcionando sin problemas.
  
  Puedes configurar los botones que quieres poner, y no tienes que dedicar tiempo a crear unos botones, lo cual te ahorrará tiempo y trabajo.
  
  También puedes obtener una cuenta premium que ofrece soporte técnico inmediato y múltiples herramientas para personalizar sus complementos.
  
  
• Shareaholic es otro servicio que permite agregar botones de redes sociales a las entradas fácilmente.
  Para agregarlos al blog, hay que abrir una cuenta o bien acceder usando tu cuenta de Facebook o Twitter.
  
  Una vez teniendo la cuenta activa, podrás configurar los botones fácilmente.
  
  Disponen varios temas y diseños, y puedes elegir el que más te guste para el blog. A continuación puedes ver las opciones de configuración de sus botones para compartir.
  
  
  
  Una vez que configures las opciones, guardas los cambios y te darán un código que tendrás que poner en la plantilla.
  
  Al igual que AddThis, no tendrás que preocuparte por crear los botones. Sin embargo, el optar por una opción que utilice código JavaScript, terminará por agregar más peso a tu página.

2. Obtener los botones oficiales de las distintas redes sociales

Como no podía ser de otra forma, cada red social nos facilita sus botones con el fin de poderlos usar en cualquier web para que se comparta el contenido. A continuación una lista de las páginas de las principales redes sociales:

• Facebook
• Twitter
• Google+
• Pinterest

Agregarlos de forma individual es más laborioso que usar un servicio de terceros que ya facilita todos los botones.

Como mínimo, tendrás que preocuparte por agregar algunas reglas de CSS para que aparezcan de forma alineada, y en algunos casos configurar el código para que funcione todo correctamente y como Dios manda.

Para el caso del botón +1. Como usuarios de Blogger, no tenemos que preocuparnos por agregar el código JavaScript del Botón +1, ya que Blogger lo envía al blog de forma predeterminada.

3.Crear unos botones, usar unos de diseñador, o bien obtener los botones (iconos) de las redes sociales y configurar el código necesario para que funcionen

Provengan del sitio de Juanito o de Pepito, aquí habrá que usar el código de Blogger (etiquetas propias de Blogger), un poco de HTML y CSS para que funcionen los botones personalizados.

Una buena idea es procurar seguir las pautas y recomendaciones de la marca, si es que optamos por usar unos de diseñador o los creamos nosotros mismos, para evitar infringir las pautas de uso de la marca. Es lo recomendable.

Es cierto, cada diseñador hace y deshace con los iconos, ya hasta alitas les ponen, entre muchas otras cosas...

Pero bueno, hasta la fecha no se ha sabido que a alguien lo hayan multado o encarcelado por no usar los iconos como se debe, al menos que yo sepa...

El propio Blogger utiliza una "t", de Twitter!, que según Twitter no debería usarse. Y en la versión móvil figura ese pajarraco copetudo que parece haber adoptado una nueva imagen con el estilista...

Pero bueno, vamos aprendiendo. Yo también tuve es "t" por mucho tiempo en el blog y Twitter, probablemente ni lo supo, pero, lo mejor y lo más recomendable es apegarse a las pautas de uso de las marcas para evitar broncas.

A continuación las páginas de las principales redes sociales donde nos explican las pautas y usos de la marca:

• Google+
• Facebook
• Twitter
• Pinterest

Cuál opción debería usar

Éso definitivamente lo decidirás tú. Una buena idea es tener accesibles por lo menos los botones de las principales redes sociales para que los usuarios puedan compartir una entrada sin problemas.

Si te sientes indeciso y vas empezando con tu blog, ¡usa los de Blogger!. Ya sobre la marcha, podrás usar unos nuevos que se adapten al diseño del blog y a tus necesidades.

Hay que tomar en cuenta que agregando scripts de terceros agregán más peso al blog. Si te preocupa este aspecto probablemente la mejor opción para ti es poner botones sin usar JavaScript (opción 3), y poniendo por ejemplo todos los iconos en un solo archivo de imagen.

Otra opción es prescindir del uso de los iconos y usar solo botones con  los colores propios de los iconos de cada red, como ya han hecho algunos sitios como Librosweb.es, CSS-Tricks.com, solo por mencionar algunos. Pero eso sí, de preferencia, hay que evitar usar las imágenes de forma separada a como de lugar.

Cómo Obtener la URL de una Imagen Fácil y Rápido en Blogger

Cuando usas plantillas de terceros, es decir, aquellas que descargaste en algún sitio que ofrece plantillas personalizadas como Btemplates, Reinventa WEB, con una servidora, o bien, utilizas imágenes que se ofrecen en algunos tutoriales, lo más recomendable es que tú mismo alojes las imágenes, y una de las mejores opciones es hacerlo desde Blogger. 

De ese modo, tendrás control absoluto de éstas, y evitarás sorpresas y dolores de cabeza si por ejemplo la imagen se elimina, o se supera el límite de ancho de banda que ofrece el sitio donde está alojada, como sucede con photobucket.

Obtener la URL de una imagen que alojes desde Blogger es simple: solo subes la imagen como lo haces en una entrada, y luego, la puedes copiar desde el HTML de la misma. Pero...espera, hoy compartiré contigo algunos tips, para que obtener las URLs de las imágenes sea una tarea sencilla y rápida, y sin ingresar al HTML de la entrada ;)


Subir las imágenes desde tu Blog

Puedes usar tu mismo blog para subir las imágenes de las que desees obtener la URL(s).

Blogger aloja estas imágenes de forma gratuita y no tienes que preocuparte por el ancho de banda como sucede con photobucket, aunque hay que mencionar que tienes un límite de espacio disponible.

Dicho espacio, difícilmente lo rebasarás si es que tus imágenes son menores de 2048 pixeles en el extremo más ancho, ya que éstas no son contabilizadas.

Puedes ver el espacio disponible de tu cuenta de Google, mismo que actualmente es compartido entre Google+, Gmail, y Google Drive. Si quieres saber cuánto espacio has utilizado en cada uno, solo pon el puntero del ratón sobre el gráfico circular.

Para subir las imágenes, puedes usar una nueva entrada del blog o una página estática y luego obtener las URLs.

Partiré del hecho de que ya descargaste la imagen, es decir, que ya la tienes guardada en una carpeta de tu computadora.

Ahora, veamos cómo obtener la URL de la imagen en los distintos navegadores.


Obtener la URL de la imagen, cuando usas Google Chrome

Paso 1. Ve al panel de edición de entradas, y sube la imagen desde "Redactar" (No del HTML de la entrada) usando la herramienta de "Inserta imagen" que aparece a un lado de "Enlace".

Paso 2.  Ya que subiste la imagen, pon el puntero del ratón sobre ésta, haz click en el botón derecho del mouse, y selecciona la opción de "Copiar dirección de enlace" del menú contextual, como puede apreciarse en la imagen.

Y listo!, ya habrás obtenido la URL de la imagen y ésta está almacenada en el portapapeles. Así de fácil y rápido.

Ahora, para usarla, solo pega la URL en una nota de tu computadora, o donde la vayas a necesitar, usando de nuevo el botón derecho del mouse y seleccionando la opción "Pegar", o bien pulsando Ctrl + V.


Tip: Ya que subiste todas las imágenes que necesites, guarda la entrada o página como borrador, así, podrás seguir subiendo otras imágenes en los siguientes días, u obtener de nuevo la URL de alguna imagen.



Obtener la URL de la imagen cuando usas Firefox

Paso 1. Ve al panel de edición de entradas, y sube la imagen desde "Redactar" (No del HTML de la entrada), usando la herramienta de "inserta imagen" que aparece a un lado de "Enlace".

Paso 2.  Pon el puntero del ratón sobre la imagen, haz click en el botón derecho del mouse, y selecciona la opción que dice: "Copiar la ruta del enlace", como puede verse en la imagen:

...y listo!, ya habrás obtenido la URL de la imagen. Como la URL de la imagen está en el portapapeles, usa Ctrl + V para pegarla donde necesites, o bien, usa de nuevo el botón derecho del mouse, y selecciona la opción "Pegar" ;)

Tip: Ya que subas todas las imágenes que necesitas, guarda la entrada o página como Borrador, así, podrás seguir subiendo otras imágenes, y volver a dicha entrada cuando lo necesites.


Obtener la URL de la imagen cuando usas Internet Explorer

Paso 1. Ve al panel de edición de entradas, y sube la imagen desde "Redactar" (No del HTML de la entrada)  usando la herramienta de "inserta imagen" que aparece a un lado de "Enlace".

Paso 2. Pon el puntero del ratón sobre la imagen que acabas de subir, haz click en el botón derecho del mouse, y selecciona la opción de "Abrir en una pestaña nueva", o "Abrir en una ventana nueva", como lo prefieras.

Paso 3.Ya que se abrió la ventana o pestaña con la imagen (según como elegiste), copia la dirección que aparece en la barra de direcciones de tu navegador, esa es la URL de la imagen.

Tip: Finalmente, ya que subas todas las imágenes que necesitas, guarda la entrada o página como Borrador, así, podrás seguir subiendo otras imágenes, y volver a dicha entrada cuando lo necesites

Otra forma de obtener la URL de la imagen, en Internet Explorer, es seleccionar la opción de "Agregar a favoritos" del menú contextual, (estando en el panel de edición de entradas) y copiar la URL de la imagen que aparecerá en el nombre, como se puede ver en la imagen:

De ese modo evitarás abrir la imagen en una ventana o pestaña nueva. ¡listo!, ya tienes la URL de la imagen.


 Subir las imágenes a un blog que uses para subir imágenes, o usar un blog de pruebas.

Si no quieres subir las imágenes desde tu blog, otra opción es subirlas desde un blog que crees para este propósito, o bien en un blog de pruebas (aquel que usas para probar los trucos y tutoriales).

Puedes seguir los mismos pasos que anteriormente mencioné, o publicar la entrada con las imágenes y obtener las URLs desde la entrada.

Si te decides por lo último, entonces una vez que publiques la entrada con las imágenes, vas a dicha entrada,  y pones el puntero del ratón sobre la imagen, haces click en el botón derecho del mouse, y si usas Chrome, seleccionas la opción de "Copiar URL de la imagen" y si usas Firefox  seleccionas la opción de "Copiar ruta de la imagen".

En el caso de Internet Explorer, tendrás que seleccionar la opción de "Abrir enlace en una ventana nueva" o la opción de "Abrir enlace en un pestaña nueva", y copiar la URL desde la barra de direcciones.

La opción de abrir enlace de una ventana nueva la tienen todos los navegadores, por lo que es una opción viable para todos. Recuerda que las imágenes llevan por defecto un enlace a la dirección web o URL de la misma imagen, en su tamaño original.


Notas Finales:

• Las imágenes que subas desde Blogger (del modo que aquí se menciona) se alojarán en Google Photos, del mismo modo que sucede con las imágenes que subes a tus entradas, aunque las guardes como borrador.

Ultima actualización: Julio/02/2013

Error bX-67oaj1 y la solución

Ayer, antes de cambiar mi plantilla, me dí cuenta que tenía un problema al usar los enlaces de navegación de blogger: entradas antiguas y entradas más recientes,  ya que al navegar desde ahí, se mostraban las entradas sin resumen automático y además sin la fecha.

Me sorprendió un poco ese asunto,  ya que no recordaba haber hecho ningún cambio importante, solo había sustituido el texto del enlace por flechas usando caracteres unicode, eso fue todo; posteriormente cuando cambié la plantilla, el problema continuó, lo que me preocupó o mejor dicho ocupo un buen rato.

Como no tenía una idea clara de que se trataba, fui a ver  toda esa parte del código que corresponde a la navegación de blogger, y lo comparé con el código de una plantilla de blogger sin editar, y que es este... (a veces varía un poco en las lineas que corresponden al enlace de la página principal)

<b:includable id='nextprev'>

  <div class='blog-pager' id='blog-pager'>

    <b:if cond='data:newerPageUrl'>

      <span id='blog-pager-newer-link'>

      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>

      </span>

    </b:if>

    <b:if cond='data:olderPageUrl'>

      <span id='blog-pager-older-link'>

      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

      </span>

    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

  </div>

  <div class='clear'/>

</b:includable>

                                                            
Todo se veía igual,  entonces, buscando respuestas, fui a ver otras de mis plantillas para ver si pasaba lo mismo y en la la plantilla Atheros, también  me encontré con el mismo problema,  (no se muestran los resúmenes en las entradas al navegar desde los enlaces de navegación) .

Luego me di cuenta que en las plantillas Mis dulces tentaciones y la  plantilla papel azul y se generaba un error llamado: bX-67oaj1, al navegar desde dichos enlaces, cosa que me hizo sospechar que mi problema con las entradas tenían que ver con ese susodicho error, ya que también provenía de los enlaces de navegación de Blogger.

Teniendo como base ese error,  y ya sabiendo que buscar, fui al foro de Blogger a ver si había reportes sobre ese problema y encontré muchas comentarios mencionando ese error y una solución  planteada por un usuario.

Probé la solución y si funciona pero, posteriormente en una conversación sostenida con JMiur, me comentó que viendo lo del foro, recordó que hace mucho (2007) ya habían tenido un problema con ese código y ahí explicaba una solución, y leyéndola vi que no era necesario eliminar la clase para cada enlace de navegación como se mostraba en la respuesta del foro que les decía, pues lo probé así como dice JMiur y si funciona perfectamente :) Parece que es un fantasma que regresa del pasado para ponerlos los pelos de punta a más de uno, lo bueno es que existen los casa-fantasmas XD

La solución 

Entonces, el problema se soluciona cambiando:

expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' 

 por:

id='blog-pager-newer-link'

y...

expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'

por:

id='blog-pager-older-link'

...del código que se muestra allá arriba, al hacerlo el problema del error bX-67oaj1 desaparece, y también el problema de las entradas que se muestran sin el resumen automático al navegar desde los enlaces en cuestión, como en el caso de mi plantilla.

 A veces los problemas se arreglan solos o mejor dicho Blogger los soluciona, sin embargo a veces hay que echar de mano algunos truquillos mientras las cosas se arreglan.

Quien sabe desde cuando tenía ese problema aquí en mi blog y yo sin enterarme, afortunadamente ya se arregló, así que cuando vean algo raro al navegar en mi blog (siempre y cuando no sea del diseño o una foto mía... jaja) por favor díganmelo, tal vez sea algún problema y la solución ande por ahí navegando como en este caso XD.

Si tienes resumen automático en la entradas o no, sería bueno que revisaras que todo esta bien al navegar por los enlaces de navegación de blogger, tal vez hay un problema y ni siquiera lo sabes, tal y como me paso a mi,  y si lo hay, y se trata de lo que hablamos, pues la solución ya esta dicha, y desde el 2007.

Nota: Ese código lo verán marcando la casilla de expandir plantillas de artilugios, desde la Edición de HTML de su plantilla y utilicen CTRL F para localizarlo más fácilmente escribiendo una de sus lineas de código.