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

04 abril 2014

Cambiar el color de fondo de tu blog | Blogger


Si quieres cambiar el color de fondo de tu blog es necesario hacer lo siguiente:

Primero Paso: Entrar a la Plantilla - Edicion de HTML

Segundo Paso: Buscar el siguiente codigo:
body{background:url();
color:#555555;
font-family: Arial, Helvetica, Sans-serif;font-size: 13px;
margin:0px;padding:0px;}
Tercer Paso: En donde dice background:url(); se debe cambiar por el codigo del color que deseen, por ejemplo: background:#fd6406; guardamos y listo.

Puntos a considerar:
  • Para buscar un codigo en tu planilla, debes dar click dentro de la edicion de HTML y la combinacion de teclas Ctrl + F.
  • El codigo a buscar puede variar de acuerdo a la plantilla que tengan instalada, en algunas puede aparecer background:$bgcolor; o background:#fd6406; este codigo debe estar dentro de la etiqueta body{...............;}
  • Para generar el codigo del color que gustes puedes vitirar esta entrada Como saber el codigo de los colores.
Espero les haya servido.

Saludos!!

28 marzo 2014

Como redireccionar un blog a otro | Blogger



Hoy les mostrare como redireccionar de un blog a otro. Si han creado un nuevo blog y ya no quieren utilizar su blog antiguo pero no quieren perder sus lectores lo que necesitan hacer es lo siguiente:
  1. Entrar al blog antiguo que ya no van a utilizar.
  2. Entrar a nuestra Plantilla  Editar HTML.
  3. Copiar el siguiente codigo:  
  4. <script>
    location.href='aquí va la URL del blog nuevo';
    </script>
  5. Cambiar lo rojo por la direccion del blog nuevo.
  6. Pegar el codigo antes de la etiqueta .

Tips:
  • Para buscar cualquier fragmento de codigo debemos dar click dentro del cuadro de la edicion de HTML, utilizar la combinacion de teclas Ctrl + F, escribir el codigo o palabra a buscar y dale enter.
Espero les haya servido.

Saludos!!

08 septiembre 2013

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.

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.

27 agosto 2013

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;'/>

21 agosto 2013

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!!