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:

15 diciembre 2011

Personalizando los Comentarios en tu Blog



En esta entrada veremos como personalizar los comentarios, daremos una breve explicación de que podemos hacer desde la configuración del blog. Algunas de estas opciones vienen por default en la configuración de tu plantilla, aquí veremos como modificar algunas cosas que tal vez no sabias que se mostraban o funcionaban de cierta manera.

Para esto tenemos que entrar a la configuración del blog y dar click en comentarios:


La primera opción que nos aparece es si queremos mostrar o no los comentarios que se realicen en el blog:

 

Nota: Si seleccionamos la opción de ocultar, no se podrán realizar comentarios


La siguiente opción que nos aparece es quien puede realizar comentarios en el blog:


Seleccionando opciones:
Cualquiera: como su descripción lo dice cualquier persona puede realizar comentarios.
Usuarios  registrados: no pueden realizar comentarios de manera anónima.
Usuarios con cuentas de Google: solo pueden comentar usuarios con una cuenta de google.
Solo los miembros de este blog: solo los miembros que pertenecen al blog.



Ubicación del formulario de comentarios:
 

Seleccionando opciones:
Pagina completa: seleccionando esta opción no se mostrara la caja de comentarios como la imagen de arriba, sino que solo mostrara un link que al darle click nos abrirá el formulario en la misma pagina del blog.
Ventana Emergente: mostrara el mismo link solo que al darle click nos abrirá una ventana emergente.
Debajo de la entrada: seleccionando esta opción se va Incrustar caja de comentarios debajo de las entradas tal como la imagen de arriba.

Mensaje del formulario de comentarios
 

El mensaje que se escriba aparecerá arriba de la caja de comentarios, podemos complementarlo escribiendo con algunos códigos HTML, en la imagen de ejemplo se utilizaron los códigos para mostrar el texto en negritas, imagen de ejemplo:


Moderación de comentarios
 
Puedes utilizar esta opción si quieres revisar los comentarios antes de que sean publicados en tu blog.

Verificación de la palabra para comentarios

 

Si seleccionamos la opción Si, hará que los usuarios al momento de comentar tengan que ingresar una palabra de verificacion.
 
Imágenes de perfil en los comentarios
 
Seleccionando opciones:
  • Si: mostrara la imagen de perfil que tengan los usuarios dependiendo con la cuenta que entren, si entran de manera anónima o por url mostrara como imagen el icono de blogger.
  • No: Todos los comentarios tendrán de imagen el icono de blogger.


Correo electrónico de notificación:


Si escribes tu direccion de correo electronico Blogger te avisara por medio del correo cuando se haya realizado un comentario en tu blog.

Espero les haya servido.

Saludos!!


01 diciembre 2011

Poner La Hora En Tu Blog (Truco)


Hola a todos, si lo que quieren es un reloj como este:


Get your own Digital Clock

Lo primero que tenemos que hacer es dar click aqui.

Nos apareceran opciones para configurar el reloj en cuanto a tamaño y color, una vez elegidos los parametros necesarios damos click en Get the Code:


Nos pasara a esta pantalla donde damos click en el codigo y lo copiamos:


Ahora vamos a la plantilla del blog y damos click en Diseño y Elementos de la Pagina:


Damos click en Añadir un Gadget:


Y seleccionamos HTML/Javascript:

Podemos titulo si asi lo deseamos, ahi pegamos todo el codigo:


Si queremos quitar Get you own Digital Clock quitamos el codigo seleccionado:


Y el resultado sera este:




Espero les haya sido util.

Saludos!!