5 Trucos en el Editor de Blogger que debes Saber
Yo utilizo Windows Live Writter, aunque a veces también uso el editor de Blogger; de hecho, en este momento, para escribir esta entrada, lo estoy usando :P
Debo decirte que hay algunas cosas que me gustan del editor de entradas y otras que literalmente me sacan de onda, y aveces me hacen perder la paciencia... pero bueno, nadie es perfecto y esa ya es otra historia.
No hace mucho que Blogger implementó un editor de entradas nuevo, dotado de más características, como por ejemplo, fijar la ubicación de una imagen con un solo click, insertar videos de Youtube, etc.
Si aún no lo usas, y quieres probarlo, ve a Configuración►Básico y abajo donde dice Configuración global, en la opción de seleccionar editor de entradas, habrá que seleccionar la opción de Editor actualizado.
Yo así lo tengo habilitado en mis blogs, y la ventaja a la que más saco partido, es, la de colocar código para mostrarlo tal cual, e interpretar otro al mismo tiempo. Sin embargo los truquillos que hoy te compartiré pueden ser usados en cualquier editor, excepto por algunos.
Ahora, mejor vayamos a ver de que se tratan estos presuntos trucos.
1. Colocar código e interpretar código al mismo tiempo en una entrada
Tal vez tengas la idea de compartir algún código en una entrada, y a la vez quieres que cierto código también sea interpretado, esto es común cuando usamos clases para usar algunas cajas para textos o para que aparezcan ciertos estilos en nuestra entrada.
Blogger en el editor nuevo de entradas, permite elegir la opción de interpretar código, y otra opción para mostrarlo literalmente, pero ¿cómo lograr hacer las 2 cosas al mismo tiempo?
Para lograrlo, primero, es necesario elegir en opciones de entrada la opción que dice:
Mostrar HTML literalmente
Luego, estando en Redactar (la pestaña superior derecha) debemos escribir el código que queremos mostrar, después, ir a la Edición de HTML, y agregar ahí el código que debería ser interpretado, por ejemplo, el de una caja con barra de desplazamiento donde quisiéramos poner el código que queremos mostrar literalmente.
Después si nos regresamos a Redactar, veremos que el código de la caja con barra de desplazamiento (por ejemplo), ya aparecerá, y el código que queremos mostrar literalmente no ha sido afectado, sin embargo, desde Edición de HTML, ya pudiera ser publicada la entrada sin ningún problema.
2. Eliminar el enlace de la(s) imágen(es)
Al subir una imagen a una entrada, Blogger, agrega a esta un enlace, y al hacer click en la imagen se abre la imagen con el tamaño original en una ventana, con lo que es posible ver el enlace directo a la imagen en cuestión.
Si lo que quieres es eliminar ese enlace, solo tendrás que dirigirte a la edición de HTML en el editor de entradas, y luego identificar el código de la imagen, que se parecerá a esto:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy7FXr0cHpB_zrfqMZBgHkGiRs_nCF1jCUO4WxA4Bky7KQCptgUi4-LVDDtkdONZkQsg7jPYF0zwT3EmPN5hdgOH2LRROdQULPDsnHDfzm1VqJoID_ndfFzpIZjrn0tntMJ2Nx8JljP4_b/s1600/slide2.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="269" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy7FXr0cHpB_zrfqMZBgHkGiRs_nCF1jCUO4WxA4Bky7KQCptgUi4-LVDDtkdONZkQsg7jPYF0zwT3EmPN5hdgOH2LRROdQULPDsnHDfzm1VqJoID_ndfFzpIZjrn0tntMJ2Nx8JljP4_b/s400/slide2.png" /></a>Y aquí lo podemos apreciar en la imagen, directamente desde el editor de entradas en la sección de HTML del mismo:
Claro que la dirección web (URL) será diferente, pero solo necesitarás eliminar el código resaltado con fondo rojo. Una vez que hayas eliminado ese código, habrás eliminado el enlace de la imagen.
3. Colocar otro enlace a una imagen
Si no deseas eliminar el enlace de la imagen, pero si cambiarlo por otro, entonces lo que harás es ir a la edición de HTML en el editor de entradas, identificar el código de la imagen en cuestión, y cambiar la dirección web o URL y que he resaltado de rojo:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy7FXr0cHpB_zrfqMZBgHkGiRs_nCF1jCUO4WxA4Bky7KQCptgUi4-LVDDtkdONZkQsg7jPYF0zwT3EmPN5hdgOH2LRROdQULPDsnHDfzm1VqJoID_ndfFzpIZjrn0tntMJ2Nx8JljP4_b/s1600/slide2.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="269" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy7FXr0cHpB_zrfqMZBgHkGiRs_nCF1jCUO4WxA4Bky7KQCptgUi4-LVDDtkdONZkQsg7jPYF0zwT3EmPN5hdgOH2LRROdQULPDsnHDfzm1VqJoID_ndfFzpIZjrn0tntMJ2Nx8JljP4_b/s400/slide2.png" /></a></div>Ojo: Hay que tener cuidado de no eliminar las comillas que están antes y después de editor ;)
4. Colocar el atributo alt en las imágenes
El atributo alt, es un atributo obligatorio en las imágenes. Sirve para que los motores de búsqueda como Google, puedan saber de qué se trata la imagen, o para que el navegador pueda mostrarlo en sustitución a ésta, cuando no se carga, haciendo así tu página más accesible.
Windows Live Writer, si agrega este atributo a las imágenes, incluso otro atributo llamado title*, por su parte Blogger nos lo sigue debiendo, y tendremos que hacerlo nosotros.
A continuación podemos ver como insertarlo:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy7FXr0cHpB_zrfqMZBgHkGiRs_nCF1jCUO4WxA4Bky7KQCptgUi4-LVDDtkdONZkQsg7jPYF0zwT3EmPN5hdgOH2LRROdQULPDsnHDfzm1VqJoID_ndfFzpIZjrn0tntMJ2Nx8JljP4_b/s1600/slide2.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img alt="mi texto alternativo" border="0" heightwidth="400" src="http://4.bp.blogspot.comTXkrPiTmLqI/AAAAAAAAE4g/64WCHra3r4E/s400/slide2.png" /></a></div> Como puedes ver, lo puse inmediatamente después de "img", y tú lo puedes hacer así para que no batalles, pensando en que Blogger de todos modos cambiará el orden.
Pero, ¿que escribir dentro de alt?
Una descripción corta y lo más clara posible, y que denote el significado de la imagen.
Si la imagen no puede ser mostrada por el navegador, ese texto aparecerá en sustitución de esta, para más información, puedes leer como especificar texto alternativo.
Debo confesar, que en mi blog, hay mucho trabajo por hacer en lo que respecta a ésto, y aún tengo imágenes que arreglar, que he subido desde el editor de Blogger..., si eres olvidadizo como yo, pudieras poner una notita en el monitor escribiendo alt, para que cada vez que lo veas te acuerdes y lo lleves a la práctica ;)
5. Colorear y aumentar el tamaño de los caracteres unicode
Los caracteres unicode son unos símbolitos que seguramente ya has usado, y no sabias que se llaman así, pueden ser visualizados en nuestros blogs, ya que el encabezado de nuestra plantilla, tiene consigo un formato de codificación de caracteres llamado UTF-8, por ello cada vez que escribimos el código respectivo de un símbolo, éste se muestra como tal.
Una muestra de caracteres unicode la puedes ver a continuación:
★ ♪ ♫ ❆ ✉ ❤ ✔
...y estos sus respectivos códigos (coloreados para que coincidan con los simbolitos y se identifiquen fácilmente)...
★ ♪ ♫ ❆ ✉ ❤ ✔
Cuando tu escribes el código para cada uno, estos se ven obscuros, pero ¿cómo colorearlos?
Hace poco, Gema en una entrada titulada La etiqueta span y los caracteres unicode, explicó como darles estilos (colorearlos y cambiarles el tamaño), usando la etiqueta span, me gusto mucho esa idea y puede resultar muy útil si es que los utilizamos en la sección HTML de la plantilla, como por ejemplo en una flecha de "ir arriba".
Sin embargo, si es que los vas a usar en las entradas, podemos ahorrarnos poner la etiqueta span en cada caracter, ya que solo bastará con colorearlos usando la misma técnica que usamos para colorear texto, es decir, seleccionar el símbolo (o código del simbolito), y luego elegir el color con la herramienta;"color del texto", y el tamaño con la herramienta: "Tamaño de fuente" .
Si inspeccionas en Edición de HTML de la entrada, te darás cuenta que también le es agregado la etiqueta span para que se apliquen los estilos, como también ocurre con los textos a los que les damos formato, pero haciéndolo de este modo, no necesitamos hacerlo nosotros.
Espero sea útil :)
Etiquetas:Explorando Blogger,Tips,trucos,Tutoriales