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

07 junio 2013

Poner un Favicon en tu Blog


¿Qué es un favicon?

Se puede decir que un favicon es una imagen (o marca) que identifica a tu blog (web), es decir, esta imagen aparece al lado de la barra de direcciones. Por ejemplo:

Los blogs tienen esta imagen por default:


Después de crear nuestro favicon y hacer los cambios necesarios en nuestro blog se vera de esta manera:



¿Cómo crear un favicon?


Para generar un favicon es necesario tener a la mano la imagen que queremos que nos identifique. Esta puede ser creada con cualquier editor de imágenes como Photoshop, Corel Draw o alguna imagen que ya tengamos. Yo usare esta la imagen que se encuentra al inicio del post.

Lo siguiente que debemos hacer es ingresar a esta pagina http://favicononline.es donde nos aparecera lo siguiente:


Le damos click en Examinar y seleccionamos la imagen (lo recomendable es seleccionar una imagen no mayor a 150 KB) despues seleccionamos el tamaño del favicon, las medidas permitidas son 16x16 y 32x32:


Por ultimo le damos click en crear favicon y nos arrojara el siguiente resultado:


Le damos click derecho sobre la imagen, la guardamos en el PC y con esto estaremos creando un favicon para nuestra web.



¿Cómo poner un favicon en tu blog?


Una vez que hayamos creado el favicon, lo siguiente es entrar al escritorio del blog y dar click en el apartado de Diseño:


Damos click en el apartado editar que esta debajo del nombre Favicon, nos aparecera lo siguiente:




Seleccionamos nuestro favicon que creamos y le damos click en guardar, al hacer eso automaticamente se cambiara la imagen del favicon:


Guardamos los cambios realizados y en cuestion de minutos se visualizara el cambio, es necesario tener en cuenta que en ocasiones tarda de dos a cinco minutos en reflejarse el cambio: