Ventajas y desventajas del nuevo editor html de blogger

En Abril de ese año, Blogger nos dio la sorpresa y ha lanzado un nuevo diseño en el editor HTML que en lo visual me ha agradado mucho ya que cuenta con un estilo más estructurado, limpio y fresco,  luego de meses de uso, les mencionare lo que a mi juicio son las ventajas y desventajas. En este editor se define la estructura de la plantilla y la manera en que se ve nuestro blog con sus respectivas funciones.

Ahora vamos a analizar las nuevas opciones, como podemos ver en la imagen se han integrado y añadido varias cosas:

Lineas de numeración
Ahora el código esa numerado, esto nos sirve ya que si tenemos algún error en la plantilla, blogger nos informa donde se ha producido el error.

Sintaxis de colores
Esto nos permite identificar de manera clara los estilos, elementos, clases, etc.

Botón Vista previa de la plantilla
Con esta opción podemos visualizar nuestra plantilla luego de una modificación dentro del editor.

Botón Revertir los cambios
Como su nombre lo dice, revierte los cambios no guardados.

Botón Planilla de Formato
Este botón lo que hace es organizar los códigos de nuestra plantilla de una manera mas estructurada para así tener una mejor visualización de la información. 

Otra de las características del nuevo editor, es que se pueden expandir y contraer casi todos los elementos, ya no existe la opción de Expandir los artilugios, sin embargo las áreas están mas organizadas y de manera automática estas se agrupan. Las podemos identificar con esta imagen ► y podemos expandir cualquier fragmento de código dando click sobre el triangulo. 

Botón Ir a widget

Esta opción nos permitirá navegar rápidamente a un widget en particular, solo damos click y buscamos el widget y nos llevara al código que le corresponde.

Por ultimo tenemos una opción que en lo particular me ha agradado mucho, es una utilidad de búsqueda dentro del editor, para acceder a el debemos postrarnos dentro del editor y luego usar el atajo Ctrl + F tecleamos la palabra a buscar y damos enter. También Blogger nos da la opción de Reemplazar (Ctrl + Shift + F) y Reemplazar Todos (Ctrl + Shift + R).

En Resumen:

Pros

• Lineas de numeración.
• Sintaxis de colores.
• Botón Ir a widget.
• Herramienta de buscar dentro del editor.
• Si tenemos un error blogger nos informa en que numero de linea se ha producido.

Contras

• No existe la opción de expandir o contraer todos códigos agrupados, para hacerlo se tienen que hacer de uno por uno.
• En la opción buscar, no se informa cuantos resultados se encontraron y tampoco podemos avanzar o regresar entre ellos.
• Creo que tarda un poco mas en cargar la información de vista previa.

Saludos!!

Leer entrada completa

Hacer una copia de seguridad de tu blog

En ocasiones pasamos por alto el hacer un respaldo de nuestra información, creemos que no pasara nada o lo dejamos para después, y como casi siempre pasa, nos lamentamos cuando perdemos nuestra información por no haber hecho una copia de seguridad.

Bueno, comento esto por que a mi también me ha pasado en distintas ocasiones y en distintos escenarios. Hablando de blogger es muy importante saber hacer lo siguiente:

• Hacer una copia de seguridad de nuestra plantilla.
• Cargar una plantilla en Blogger.
• Hacer una copia de todas las entradas con sus comentarios.
• Cargar todas las entradas con sus comentarios.

Hacer una copia de seguridad de nuestra planilla en blogger

Es muy importante realizar una copia de seguridad de nuestra plantilla antes de modificarla ya que en ocaso de que el truco o la modificación no quede bien o como queríamos, podamos cargar la plantilla a como estaba antes.

Para realizar una copia de seguridad de la plantilla debemos realizar lo siguiente:

1. Ir a la opción Plantilla.
2. En la parte superior derecha dar click en Crear/Restablecer copia de seguridad.
3. Luego nos saldrá una pantalla y daremos click en Descargar plantilla completa.
4. Por ultimo seleccionamos la ruta y damos click en aceptar para guardar la plantilla.

Para Cargar una plantilla en blogger debemos hacer lo siguiente:

1. Ir a la opción Plantilla.
2. En la parte superior derecha dar click en Crear/Restablecer copia de seguridad.
3. Dar click en subir.
4. Buscar la copia de seguridad que guardamos o la plantilla que deseamos.
5. Esperar a que se cargue la plantilla.
6. Por ultimo dar click en aceptar.

Hacer una copia de todas las entradas con sus comentarios

Esta opción la podemos realizar frecuentemente para tener guardada la información de nuestro blog por cualquier cosa que pase. También la podemos realizar si cambiamos de blog y queremos cargar todas las entradas con sus respectivos comentarios.

Para guardar una copia las entradas y comentarios de nuestro blog debemos hacer lo siguiente:

1. Ir a la opción Configuración - Otros.
2. Dar click en exportar blog.
3. Luego dar click en Descargar blog.
4. Guardamos el archivo donde queramos.
5. Por ultimo damos click en aceptar.

Para cargar todas las entradas con sus comentarios debemos realizar lo siguiente:

1. Ir a la opción Configuración - Otros.
2. Dar click en Importar blog.
3. Luego dar click en seleccionar archivo.
4. Buscamos el archivo a cargar.
5. Escribimos la palabra que nos aparece.
6. Por ultimo damos click en Importar blog.

Con estos pasos las entradas se publicaran automáticamente en nuestro blog.

Espero les haya servido.

Saludos!!

Leer entrada completa

Insertar código HTML en un post (Blogger)

Para insertar código HTML directamente en una entrada, necesitamos transformar ese código para que blogger no lo tome como una instrucción, sino que lo tome como texto, es decir, si lo pegamos directamente en el post nos daremos cuanta que al publicarse no podremos ver este código.

Para solucionar este detalle debemos hacer lo siguiente:

1. Debemos copiar el código que queremos insertar en nuestra entrada.
2. Entrar a esta pagina Blogcrowds.
3. Pegar el código a transformar.
4. Dar click en el botón Parse.
5. Una vez transformado el código, lo copias y lo pegas en la entrada.

Listo, con estos sencillos se podrán ver los códigos HTML.

Leer entrada completa

Colocar boton "ir arriba" en tu blog

El colocar un botón de volver arriba (Back to Top) en nuestro blog, facilita a tus lectores desplazarse fácilmente a la parte de arriba de tu blog con un solo click. En esta ocasión veremos una manera sencilla de poner este botón en nuestro blog.

El botón que pondremos en nuestro blog tendrá un efecto desvanecedor por decirlo así, es decir, el botón aparecerá solo cuando se baja la pagina.

Como pueden ver en la imagen superior hay mucha variedad en los estilos de los botones, de tal manera que podemos escoger el que nos guste o se adapte mas a los colores de nuestro blog.

Para poner el botón de "ir arriba" tenemos que hacer lo siguiente:

1. Ir a esta pagina scrolltotop.
2. Elegir el botón que queramos.
3. Copiar el código que viene del lado derecho de la imagen seleccionada. 
4. Entrar a nuestra Plantilla ► Editar HTML.
5. Buscar la siguiente etiqueta </body>.
6. Pegar el código justo antes y listo.

Leer entrada completa

Listones de Banderas para tu Blog

En esta ocasión vamos a ver como poner una bandera en tu blog de manera similar a la que aparece en la imagen anterior, en resumen vamos a explicar lo siguiente:

• Como poner una bandera en tu blog.
• Poner la Bandera del lado izquierdo o derecho.
• Poner ambas banderas al mismo tiempo.
• Hacer que la bandera este flotando.
• Poner un enlace en la bandera.

Como poner una bandera en tu blog

El proceso para colocar la bandera es el siguiente, debemos ir a la opción Planilla, Editar HTML, ahí debemos buscar esto  </body> y justo antes pegar el siguiente código:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-DvZ-zLCZ0YHCTf5DduQSLz0Ve-bnjxj_F5hhtQ39FHCZG9Rwm0hERcgfeeYhSklPZILJAokA4PR7An_CQDdU0x4UJjI1sbYHUwaawtTFrDF-W2xGwhH241nJGxHLktgrQCJFQS-Q3Y/s1600/Listones+de+Banderas+Para+tu+Blog+-+11-+Mexico-Derecha.PNG" style='position:absolute; top:0; right:0;'/>

Guardamos los cambios y la bandera quedara de la siguiente manera (fija y a la derecha):

Poner la Bandera del lado izquierdo o derecho

Para poner la imagen del lado derecho es utilizando el código anterior, para alinear la bandera a la izquierda necesitamos que la imagen este adaptada para usarla de ese lado y lo que necesitamos cambiar es right:0 por left:0 y pegar el código justo antes de </body>, por ejemplo:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjapbmzYADrkIm1Lg7He4_hSPzgq2D_W5qfNkc8jwaIiNqPxuRpMdtl-72TLVta_aYN6uXwDA-JWZOvDVeRVHZxypJdhl_ME8W4SPDYppCdmKx-lG0pdjmSXL7ryKd_MAJ7XlhlJ2Y4Rgc/s1600/Listones+de+Banderas+Para+tu+Blog+-+11+-+Mexico-Izquierda.png" style='position:absolute; top:0; left:0;'/>

Guardamos cambios y nos aparecerá de la siguiente manera (fija y a la izquierda):

Poner ambas banderas al mismo tiempo

Para poner ambas banderas al mismo tiempo es necesario seguir el mismo proceso y pegar justo antes de </body> los dos códigos.

Guardamos los cambios y nos quedara de la siguiente manera (imagenes fijas a ambos lados):

Hacer que la bandera este flotando

Para hacer que la bandera flote, es decir, que aunque baje la pagina permanecerá visible, debemos realizar el mismo procedimiento y solo debemos cambiar position:absolute por position:fixed donde querramos que se realice este cambio, por ejemplo:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-DvZ-zLCZ0YHCTf5DduQSLz0Ve-bnjxj_F5hhtQ39FHCZG9Rwm0hERcgfeeYhSklPZILJAokA4PR7An_CQDdU0x4UJjI1sbYHUwaawtTFrDF-W2xGwhH241nJGxHLktgrQCJFQS-Q3Y/s1600/Listones+de+Banderas+Para+tu+Blog+-+11-+Mexico-Derecha.PNG" style='position:fixed; top:0; right:0;'/>

Guardamos los cambios y la bandera quedara de la siguiente manera (flotante y a la derecha):  

Poner un enlace a la bandera

Para poner un enlace a la bandera debemos hacer lo siguiente, antes de cada código debemos anotar esto:

<a href="URL del enlace o link">

Donde dice URL del enlace o link debemos anotar la dirección que queremos que se habra al darle click. Al ultimo del código debemos anotar esto:

<img src="URL de la imagen" /></a>

La URL de la imagen es la dirección donde se alojo la imagen, en este sentido el código quedaría de la siguiente manera:

<a href="http://cosas-para-blogs.blogspot.mx/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-DvZ-zLCZ0YHCTf5DduQSLz0Ve-bnjxj_F5hhtQ39FHCZG9Rwm0hERcgfeeYhSklPZILJAokA4PR7An_CQDdU0x4UJjI1sbYHUwaawtTFrDF-W2xGwhH241nJGxHLktgrQCJFQS-Q3Y/s1600/Listones+de+Banderas+Para+tu+Blog+-+11-+Mexico-Derecha.PNG" style='position:absolute; top:0; right:0;'/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-DvZ-zLCZ0YHCTf5DduQSLz0Ve-bnjxj_F5hhtQ39FHCZG9Rwm0hERcgfeeYhSklPZILJAokA4PR7An_CQDdU0x4UJjI1sbYHUwaawtTFrDF-W2xGwhH241nJGxHLktgrQCJFQS-Q3Y/s1600/Listones+de+Banderas+Para+tu+Blog+-+11-+Mexico-Derecha.PNG" /></a>

La dirección en rojo es el enlace al que nos llevara al darle click en la bandera.
La dirección en azul es en enlace de la imagen.

Guardamos los cambios y la bandera quedara de la siguiente manera (fija, alineada a la izquierda y al darle click nos llevara a la pagina especificada).

Espero les haya servido, acá les dejo unos enlaces de algunas banderas:


A peticion de Tensa Zangetsu va la bandera de Nicaragua:

 Nicaragua Izquierda
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxSQKXY4TEagyt7rSh-MeEU0NcHxDxV7SNH34kX1cfpBoycamaHXG2V7Y43BnMMgyzqJlOl9fVxve6ApBQJI1-NXAmvhXLdBKYQPf0HRLHyvndwdsa-2Zfj-x_bbtO64XommPqpsCo8kU/s1600/Listones+de+Banderas+Para+tu+Blog+-+16+-+Nicaragua-Izquierda.png" style='position:absolute; top:0; left:0;'/>
 

Nicaragua Derecha

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLbm45_FWGEnKcXXyUlohGabBsfyhbhPboMUdhGrxKg2D_IiosIJ61J4eL8YmaQAWD7jOuhmUFaY8IeEWdWea1M0DzVscRgupqpjgnz0ZvIg_SpB8jiFIfFbZ77rtLhjpedLqqv1DcOpY/s1600/Listones+de+Banderas+Para+tu+Blog+-+16+-+Nicaragua-Derecha.png" style='position:absolute; top:0; right:0;'/>

 Argentina Izquierda

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE4VzmXIEuG5By8ye1acFLEjtXklwSiGwTVAigIsZHhgzv7tevt2N7GaK7Qoq8YO2YtT2r5XvmL6wcDHZEixgChs9rUZ9hTKLUodovHxi7D_LCU95U01F1MAvJs60xSUAb_KOWR9ID9y8/s1600/Listones+de+Banderas+Para+tu+Blog+-+03+-+Argentina-Izquierda.png" style='position:absolute; top:0; left:0;'/>

Argentina Derecha

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWoOn3wTzzTregkEEZ7pIeTRLlLTCdK9DpnXJCltqpVB6NCrYBDodvfQxYa8M6SyXPwtHTRcb3HuSEe1d5q7qiGj_npfoT65nrCjQcwEtFxc50tclObbJWIFDuCxU_gCUzy6zFEtMDXjM/s1600/Listones+de+Banderas+Para+tu+Blog+-+03-+Argentina-Derecha.png" style='position:absolute; top:0; right:0;'/>

 Chile Izquierda

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsp4gYXnhjquyBmLKAgrHagAM04eK1RS5vORiSSMuTp53MWekWLEpKqi4g1yzqPiuRB0lHt399jr9BZYIeKH-a0X6fVUhBHrzAwvRez3BX0ksuODrUMYNfjshggAorrCyorcuZs5gFhbg/s1600/Listones+de+Banderas+Para+tu+Blog+-+04+-+Chile-Izquierda.png" style='position:absolute; top:0; left:0;'/>

Chile Derecha

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW4IepIRjdkJXTHnJVfBqy_kUpzOBX2tiEz9AAr6Tlf7Uuj5zZB0D_EnaOb4KE01g0a5kzd1j6kOkXPAZbSLfzRSbMxvCDo1zbdfuCXXIeZ3gWwJYlalfI7mwKWEFlWZFmp-b8q5UnB3Q/s1600/Listones+de+Banderas+Para+tu+Blog+-+04-+Chile-Derecha.png" style='position:absolute; top:0; right:0;'/>

Colombia Izquierda

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrGGUx0lRFeoHmhC6HlJrMNOEHNdxRFEg4A0gSLovZxLBDDtOKO7C1fWIZeUaVNym9mOKBcBTHa1uBSJZAaMvxuz59Fdy8u7aCnnhDej1R-c_ayZzRnIIa0ykVM_InGEFxJzy7ThzxBVc/s1600/Listones+de+Banderas+Para+tu+Blog+-+05+-+Colombia-Izquierda.png" style='position:absolute; top:0; left:0;'/>

Colombia Derecha

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-rF7QInLQaUtol8shAS09DwUGTdc_BcHz1YjhhjHyD2PG69CoFd1dwUm6DDR0bVPU2NeDy82kmy0Nbr8JjWRqlFs2IK_uUABYVO0tDitymaxNTxSYdTc1Mww0F6EQLFWbqZ5oz4UfRwY/s1600/Listones+de+Banderas+Para+tu+Blog+-+05-+Colombia-Derecha.png" style='position:absolute; top:0; right:0;'/>

Costa Rica Izquierda

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkPOXA5XxGy1TD-6IqFPhPGl4f-urfTGdbmDN8r2fcFmMV_CIjiDb-az8m7UIYgnLpHCBlnigGMofpuejFL6tBsSJr-9LeGqCqbQS7dMt6qUv81s4ICzBfEj9it05bA3JR-rnRbG9FNbY/s1600/Listones+de+Banderas+Para+tu+Blog+-+06+-+Costa-Rica-Izquierda.png" style='position:absolute; top:0; left:0;'/>

Costa Rica Derecha

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkrWuHTXXsLEJbzb0oImf_cJrHy9ISTGmy6NSH3fgHrmN8TfKGtjMvOOkx1o6B6uJfaxIAeWvddVa4Iyjn1UkASRgXnzyDbPQGglaXwqoBNLhITC-S8TZfCw_YC4GIwGNw6CYJ6Nm-CAk/s1600/Listones+de+Banderas+Para+tu+Blog+-+06-+Costa-Rica-Derecha.png" style='position:absolute; top:0; right:0;'/>

Ecuador Izquierda

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh55k9IdCBa_fMUOqOlRavxl0aCiyp5Tl8Ic5Rb3aEvgKaKDzW3C_gnciRPnAVFNrG6lOpPlVm-H7HrfQQdE21gTtdhP4_H8nQnIopAI4o62dpy9hV7eYsB1Qs2PajRW-XeVFH240bL6Ww/s1600/Listones+de+Banderas+Para+tu+Blog+-+07+-+Ecuador-Izquierda.png" style='position:absolute; top:0; left:0;'/>

Ecuador Derecha

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5eO0TDcMc7N2KncE7kbmlEu1t_SQjft9zfIX4zBYQ9h5Xcvo8hNS8Y42-DBG7wPS_ygJ12tCCh7D9T9ETbR6XvcsSEVu_Yj_u2vNxEirw6AA50P5AaOuRd06GP1l70PIWK2WCzRXpFXU/s1600/Listones+de+Banderas+Para+tu+Blog+-+07-+Ecuador-Derecha.png" style='position:absolute; top:0; right:0;'/>

El Salvador Izquierda

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFSIKvMi8Taeb4NVGTxHjq6usu59ZJptOjMqURa_yZz6GY-v7i3RcdpYHe_BlAdDscgjTHKEeWjiR4NVJ4GLoosAX_bME-93AnjvxF3R1sKjf2w4n9vvMAHMLODMMa1nhr2mYJvy9HTsQ/s1600/Listones+de+Banderas+Para+tu+Blog+-+08+-+El-Salvador-Izquierda.png" style='position:absolute; top:0; left:0;'/>

El Salvador Derecha

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7DfkFJoFa4c23K1TZiQraHWzgtesYSCPqAkQ2d9gf0lRrWDf_Oi7fpArYCXrwvIdXtjVp-80d2naXUEQMJft5ibZb5CCR8RjCLb5ismGHfReLcJygKEwlxjby40pOeNgVz3sAIQ39_pU/s1600/Listones+de+Banderas+Para+tu+Blog+-+08-+El-Salvador-Derecha.png" style='position:absolute; top:0; right:0;'/>

España Izquierda

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyRD-dITxDZBSd0IUIuSuVW6B0SWhqmXP8qaIKrpVrN4P4Co1omEr-XbXbDCW0urubXpH2-jJydHASW7tLW5sFjKtKOIlfP9ML_zJwuAcFsT2HrZzZjSe0eEnXk9Qivjz1YwBQJ3G9pVs/s1600/Listones+de+Banderas+Para+tu+Blog+-+09+-+Espa%25C3%25B1a-Izquierda.png" style='position:absolute; top:0; left:0;'/>

España Derecha

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPZf1Ww12aZ_PHf7El6e94hse9xgFfCPyUoCcRiFA2lfZc9PkNkb9QGWjEgXC3UD8I3pMRoAD8gECbNTM3D0BuRw7HIwd1Ein22d55E7mgezqWiGk2rZjOxQAsiVCyutehBh6UdF1qma8/s1600/Listones+de+Banderas+Para+tu+Blog+-+09-+Espa%25C3%25B1a-Derecha.png" style='position:absolute; top:0; right:0;'/>

Estados Unidos Izquierda

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmpPtfxdTdlcJ9Ojs0qUdcLn9wDaz8NYyAH03nOiNn67cGEG_3Mo8aD_Ubb26bGwNw4IrjbQBnJEbJ_n4oRZ1J77V2NiXeD5fWAzMO15yJVljkI0T7Y8SWHRfZwumS_VGy40bx0lcKpQ/s1600/Listones+de+Banderas+Para+tu+Blog+-+10+-+Estados-Unidos-Izquierda.png" style='position:absolute; top:0; left:0;'/>

Estados Unidos Derecha

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj44WTYibaypLSbwHryt93kWCX4NVfyiqEHWhgjvzJyq8EVepWJsSEWePA0ys5DSTAkoIkWkiUW9cjCmPiOTbtDoAH-1nu53FB-eCes12Df3YKzZlXP51QT1S7rLq99WtSjsqofJkF21Gg/s1600/Listones+de+Banderas+Para+tu+Blog+-+10-+Estados-Unidos-Derecha.png" style='position:absolute; top:0; right:0;'/>

Mexico Izquierda

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjapbmzYADrkIm1Lg7He4_hSPzgq2D_W5qfNkc8jwaIiNqPxuRpMdtl-72TLVta_aYN6uXwDA-JWZOvDVeRVHZxypJdhl_ME8W4SPDYppCdmKx-lG0pdjmSXL7ryKd_MAJ7XlhlJ2Y4Rgc/s1600/Listones+de+Banderas+Para+tu+Blog+-+11+-+Mexico-Izquierda.png" style='position:absolute; top:0; left:0;'/>

Mexico Derecha

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-DvZ-zLCZ0YHCTf5DduQSLz0Ve-bnjxj_F5hhtQ39FHCZG9Rwm0hERcgfeeYhSklPZILJAokA4PR7An_CQDdU0x4UJjI1sbYHUwaawtTFrDF-W2xGwhH241nJGxHLktgrQCJFQS-Q3Y/s1600/Listones+de+Banderas+Para+tu+Blog+-+11-+Mexico-Derecha.PNG" style='position:absolute; top:0; right:0;'/>

Peru Izquierda

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUY2rP-Thbp6NsmgXxgb5XrtIXyrsvz62slX6OV1z_2CFwnTyyxuA5bHCJ2NCuhwdkeX2gYwrPt-jIlfz9efNxj0m8bz4WcZN6j21TF7lRt_OGXFKQIGOldIgn8UJmAyClvKftjjbCFmU/s1600/Listones+de+Banderas+Para+tu+Blog+-+12+-+Peru-Izquierda.png" style='position:absolute; top:0; left:0;'/>

Peru Derecha

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggvi1VLv95XzmyQT4VBeiL-mraKq7Dh1H6_AzELo7iLIlryqT2svuJOsa1mVVUp46PyXEPdX-jZ4WM_7B_99stFuLusShUmOMoCzCmpYRJzFcgzOh1OXraxXJEU1bH1RZMY8_0U_jtW8U/s1600/Listones+de+Banderas+Para+tu+Blog+-+12-+Peru-Derecha.png" style='position:absolute; top:0; right:0;'/>

República Dominicana Izquierda

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3TFovdAKcc014fcj508c3NTQ7M63J49u5gNsB3jZ4vxrAyYTv9x_6PfY7-OFtPjFnZbOAgUfxp1th-UhZVYVS7zHLSKnKiUl8rTal4RCGarAaoEfXcT37XifGTmF28LlURR8JVmUQxU8/s1600/Listones+de+Banderas+Para+tu+Blog+-+13+-+Republica-Dominicana-Izquierda.png" style='position:absolute; top:0; left:0;'/>

República Dominicana Derecha

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU6gdDj8dVbhyphenhyphenIatm8CNrGssSH85qBlQkSFb9jaVI8KvpOpM5Gg4KmS8fhJ7UNspNZhIrbNnRmS0x2a-_YOba7x_0WXdxRvBO6k9gfzkf_0AVMxXfbW54pzBAKEuLIjuo6ymPXjZ7NE2Q/s1600/Listones+de+Banderas+Para+tu+Blog+-+13-+Republica-Dominicana-Derecha.png" style='position:absolute; top:0; right:0;'/>

Uruguay Izquierda

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpvmZTb1duixxZapYlfWmsBAmSUZtiJX0hjHUv3XLBmfJBPj-2bEgkyNfN0SDVVUZgNwE5JFr_0rBiW06-YKWxY0BZN9jBFMp5NOvlZvSTrBzzyQ88PyR-U7Et0FoZJUvYIHY9I76ltws/s1600/Listones+de+Banderas+Para+tu+Blog+-+14+-+Uruguay-Izquierda.png" style='position:absolute; top:0; left:0;'/>

Uruguay Derecha

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizeBJ_85CDjrKUca4aI3ejUPPwyM6RWXK863_2sx3LiSS6aAFsvvHW3AhL_fNp6JB-Fvc5nMEUPpvH_wppJWl_snWHhfyBAiMrl7Mq8zZvvikMykfaPW16uktwJxKQvPTG1hIihYZXfBo/s1600/Listones+de+Banderas+Para+tu+Blog+-+14-+Uruguay-Derecha.png" style='position:absolute; top:0; right:0;'/>

Venezuela Izquierda

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUtYWufmWUPn-BcYT85E1vpPWILYKmVM-pptgb1163sAQi1SDEkrv-SbQqIRhFvQ0X_-JHhOdiBRLtHa2RTcSH6caFT1RSApIpq5cUi-IT73f9h3PuNuBKuP7KcSBvoQ3X-Kapx61Z5ro/s1600/Listones+de+Banderas+Para+tu+Blog+-+15+-+Venezuela-Izquierda.png" style='position:absolute; top:0; left:0;'/>

Venezuela Derecha

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTAo4ndL64qNP62RzMbPGSM874FvUBl8xX4BkfZLneGF73-AEM0D9o9MiPYuZwmLvNztSsJkI5ptgfDdaRBjaq8U9fnrMnBxfsjV7XFrHfjeUESnElHwEremlNnQPUxRObJe2encQJnOc/s1600/Listones+de+Banderas+Para+tu+Blog+-+15-+Venezuela-Derecha.png" style='position:absolute; top:0; right:0;'/>

Leer entrada completa

Relacionar entradas con Imagen (Blogger)

En esta entrada veremos como Relacionar entradas con imagen de manera sencilla en nuestro blog con la ayuda de un gadget llamado LinkWithin. 

Para instalar este gadget necesitamos entrar a la pagina de LinkWithin, podemos entrar dando click sobre el nombre.

Una vez que hayan entrado a la pagina localizan la parte que esta en la imagen donde deberemos anotar lo siguiente:

• Email: debemos escribir nuestro correo.
• Blog Link: anotamos la dirección de nuestro Blog.
• Plataform: Seleccionamos Other.
• Width: Seleccionamos el numero de entradas que queremos que se muestren, en mi caso seleccione 4.

Una vez anotados los datos necesarios le damos click en Get Widget! Nos aparecerá un código similar a este:

Copiamos el código que nos arrojo la pagina y luego vamos a nuestro blog, ahí debemos ir a la opción Diseño y Añadir un nuevo gadget, de entre las opciones seleccionamos HTML/Javascript:

Al seleccionarlo nos aparecerá lo siguiente donde debemos anotarle un nombre al gadget para identificarlo (en mi caso le anote LinkWithin) y en Contenido pegamos el código antes copiado y seleccionamos Guardar:

Este gadget lo debemos situar debajo de las entradas del blog. Guardamos los cambios y listo, en cada entrada este gadget nos mostrara entradas similares con una imagen.  

Al realizar los pasos anteriores la información se mostrara de la siguiente manera:

Si queremos que el gadget se muestre solo en las entradas individuales, es decir, que no se muestre en la pagina principal, necesitamos hacer lo siguiente:

• Entrar a la opción Planilla:

Localizamos la opción Editar HTML y damos click:

Nos aparecerá el editor HTML, lo que necesitamos hacer es buscar el gadget que insertamos hace un momento, para eso debemos dar click a la tecla Ctrl y al mismo tiempo presionar la letra f, de esta manera podremos buscar el gadget, necesitamos anotar el nombre que le pusieron al gadget, en mi caso LinkWithin:

Debemos darle enter para que nos situé donde se encuentra el gadget, si se dan cuenta en la imagen aparece seleccionado con amarillo la palabra que buscamos, estando ahi debemos agregar lo siguiente justo donde se encuentran las flechas:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
</b:if>

Con la modificación te debe quedar de la siguiente manera:

Guardas los cambios realizados y listo, ahora el gadget solo se mostrara en las entradas individuales y no en la pagina principal.

Espero les haya servido. Saludos!!

Leer entrada completa