Listones para el blog de los Juegos Olímpicos (Londres 2012)

29 de abril de 2012 95 comentarios ,
Ya vimos cómo poner un gadget de cuenta regresiva para las olimpiadas, ahora vamos a poner unas decoraciones sencillas pero bonitas (según yo), alusivos a los juegos de Londres 2012.

Son siete listones que he diseñado para que puedas poner uno de ellos en la parte superior derecha del blog. Sólo entra en la Edición HTML de tu plantilla y pega antes de </body> el código del listón que más te guste.


<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYc1G5BYg3sDriM0js9nTDBQc-TTNHBAhZgzHXhKZAhFW1qedrFQQqj3499dcPlb4nh_gfJP6N_rgb3OILPz2JmkXxRnDMV7vlMteooE1ysEiqeXZAPa0T28_P2V4IaW3qFjSWI1pRYUg/s151/olimpiadas.png" style='position:absolute; top:0; right:0;'/>



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6T3SkQoQrGSCMXJKOkpkQiGfvKjLHTJqkq_vOZclH4mL5MJ4FkBPicIlCTvajZPF-zvYgVbuPVI00-yk09D02lERjUmfeMJWitMf-xGvufIZh2GVIy9DxKVL-5inXXh_-w_iLlU9O1F8/s151/londres2012_rosa.png" style='position:absolute; top:0; right:0;'/>



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnk6KRSiqUXdtCgePnt0d6R2EUeNcxngSjuO8vuju8tt4ikvERB-r5Qa4rfGKVYojScgYsEmYcvq9-qoTI46glziqViy9TtBVIhFxVN_Yveq1frqUA6K7aIPH4l_l6YZwdGUaI2jH_jPE/s151/londres2012_azul.png" style='position:absolute; top:0; right:0;'/>



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvBnLHHTp-s96v7p1eAydTz1tgaBaq6YCtmAI7ug9l6cJpOq5GzEbAnz5R5gln-pTAsOXq-gRvcRh0TIVBy2uI3f00bA6n-2p3vkmQ8XMsXhQM8uDu0n2TreqEY2Oajgk9TrVOsor5GfY/s151/londres2012_rojo.png" style='position:absolute; top:0; right:0;'/>



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioIt6LZJUx_MltM_orU9V5Od268LzDHNaCYyCdEZNp4cDcYubT5uOtGMMvf-XGr7UCOrsnrVox4vPmDuA3sTsRRwbIpOYZcREwNQyRoXVmKxZVtsPcDOXg3X-I8UZSRNL2w9V-p8gmNxI/s151/londres2012-insignia-blan.png" style='position:absolute; top:0; right:0;'/>



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgabAPQJRZDBBhgAXpUWnkSTzFtVDPMJBYuyY5ew8pG7wFu1uxOBiTu7hT0LZdBV28WR0R8jl1_WkROLtzLyPGo7EGyvN6ScaHH75bwcO8CgQVy_9ZNjK_Iemu5gmjTd9fb9pN6pdl7MEA/s151/londres2012-insignia-nar.png" style='position:absolute; top:0; right:0;'/>



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEUc-shfmyLWMa64ZaRrHDQNe1C81fupj81gHw5hxAIbarIDGuOcW1nWqSfWeoYjaN7ZGp8d-Vwhp9oDgRPPfi-dP1w1kh1BLGCAxGslw8X9pzJO5QGgG1cMpf9KAL_9dXZOqp0Mfx72w/s151/londres2012-insignia-azul.png" style='position:absolute; top:0; right:0;'/>



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLzMnc4luCYt0tj_2hbvb6UZxV836FtluVp28hYNo2bERfYi-1EIJi5wCi_pXU9h3YHG_nT830qHkbrBTgXatbmGRnlcapk7JgZPrB7TXdYaud5U2NXebpnsAdYSwWaUE1ZQUxCCpxuSQ/s151/londres2012-insignia-rosa.png" style='position:absolute; top:0; right:0;'/>


Como mencioné antes. Los listones estarán en la parte superior derecha, pero estarán fijos, si quieres que sean flotantes, es decir, que se puedan ver aun cuando bajas el scroll de la página, entonces cambia el position:absolute; que está dentro del código, por position:fixed;

Espero que sean de su agrado.


95 comentarios en:

" Listones para el blog de los Juegos Olímpicos (Londres 2012) "

  1. ¡Wow! Me pregunto si seré la primera en comentar... XD Ya lo puse en mi blog y quedó muy bien ^_^ Personalmente me gusta ver en los Juegos Olímpicos las competencias de Patinaje Sobre Hielo y Yudo, o si no, algún deporte en donde participe la Argentina ^.^ ¡Inolvidable la intro de los Juegos Olímpicos Beijing!

    ResponderEliminar
    Respuestas
    1. Pues sí, fuiste la primera :)

      Eliminar
    2. potro es buscado y busco y al fin lo que quería aprender hacer el menú estilo youtube como la paginacion ya la había visto ahora aprendí el menú que se explica aquí, http://css-tricks.com/youtube-popup-buttons/ en ese link pero ya es implantados el css a mi blog : y tengo el menu funcionando con el html que ello explican pero no se como hacerlo funcionar con link me ayudas! http://djmanny22dice.blogspot.com/

      y estoy solo perdido con esta parte con el menu en el html:
      ahora hermano como yo puedo hacer link con ese codigo como puedo hacerlo funcionar, podria explicarme o haria un tuto para ver como se hace me urge potro

      Eliminar
    3. Hola Emanuel, abre un nuevo comentario, para que no se piense que el tuyo está relacionado con el del usuario que inició la conversación ;)
      Respondiendo a tu pregunta, a un BUTTON le puedes poner una función javascript para que abra un enlace, por ejemplo:

      <button class="button" role="button" onClick="parent.location='http://google.com'">

      Eliminar
    4. ah disculpa potro perfecto gracias hermano! eres un duro

      Eliminar
  2. Hola, podrías decir en que parte debo pegar el codigo de Adsense para que aparezca la publicidad arriba de cada entrada como en tu blog, también como hacer para que aparesca abajo de cada entrada :)

    Por cierto buen post, mañana más tranquilo lo veo denuevo.

    ResponderEliminar
    Respuestas
    1. Mira esta entrada, ahí enlaza a un sitio donde podrás ver distintos lugares dónde poner los anuncios:
      http://ciudadblogger.com/2010/01/10-lugares-para-poner-adsense-en.html

      Cualquier otra duda respecto a ello lo vemos allá.
      Saludos.

      Eliminar
  3. Gracias por el aporte Potro,Hoy si yo te agarre con las manos en la masa...Saludos Secretosdelaweb.com

    ResponderEliminar
    Respuestas
    1. Creo que ya me conocen la hora a la que publico las entradas :P

      Eliminar
  4. No esta mal, Potro!! Aver si me da tiempo de ponerlo en el blog! (hace mucho que no puedo ni comentar)

    ResponderEliminar
  5. Buenos días.
    Antes que nada agradecerte tu ayuda. No comprendo por qué me llegó este mensaje y qué tengo que hacer. ¿Pudieras ayudarme? Lo agradezco de antemano. Dice el mensaje:

    Hello,

    You are receiving this message because your email address is associated with an unmigrated legacy Blogger account. As we announced in April of last year, legacy accounts will no longer be accessible after May 30th, 2012 unless they are updated to the Google Account system. Any blog content associated with this account will also be unmodifiable after that date.

    To transfer your blog to the Google Account system you need to visit the Legacy Migration page at http://www.google.com/appserve/mkt/fQ2gfM2n171Zi7 right now to make sure that your account and associated blogs are claimed. If you’ve forgotten the Blogger password that is associated with this email address, you can use our Account Recovery page at http://www.google.com/appserve/mkt/loqzBBJWfa57XQ to request password information to be sent via email.

    For more information, please see our initial announcement we posted to our blog at http://www.google.com/appserve/mkt/YHihlMogAyM99c . If you have questions, please visit our Help Forum at http://www.google.com/appserve/mkt/K2zZkRezC2QQLN and create a message with [Legacy Account] in the subject line.

    Regards,

    The Blogger Team
    Google
    1600 Amphitheatre Parkway
    Mountain View, CA 94043
    ----
    This e-mail is being sent to notify you of important changes to your Blogger account.

    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Magda, ese mensaje te llegó porque tienes una cuenta de Blogger en la cual no has iniciado sesión desde 2007. Si aun seguirás usando esa cuenta y esos blogs, sólo debes hacer click en el primer enlace que te dan en ese mismo correo.
      Saludos.

      Eliminar
  6. Waooooo Potro que diseño, seguro pondre algunos en Mis blogs.....Un muy buen diseño GRACIAS....

    ResponderEliminar
  7. Hola, sé que este no es el sitio, peor lo prometido es dueda y no encuentro el post orifinal. Cuando explicaste cómo invertir el orden ti´tulodelblog-títulodelaentrada quedé enc omentarte el resultado. Pues sí, como bien predijiste, FUNCIONA. Primero lo noté en las visitas que vienen de google images ( me tomo la molestia de añadir alt a las imágenes, pero me han aumentado las visitas aún así ) y desde hará un par de semanas, también de las que vienen del buscador normal. Mil gracias ^_^

    ResponderEliminar
    Respuestas
    1. Esas son buenas noticias Mapachito, me da gusto que te haya funcionado el truquillo de esa entrada.

      Eliminar
  8. Muchas gracias por publicarlos, ahoramismo voy a agregar uno en mi blog: http://www.vvalcoi.com

    ResponderEliminar
  9. WooooW!! Me encanta potrooo!! Las voy a poner... Pero no me decido cual usar!!

    ResponderEliminar
    Respuestas
    1. Pues aun faltan varias semanas para los juegos, así que puedes usar uno cada semana :D

      Eliminar
    2. ¡Que bien quedaría eso!

      Eliminar
  10. Buena idea Potro, cada vez menos para los JO de Londres! :D

    Una duda, como podría ponerlo en la parte superior derecha.. pero de la entrada más reciente (yo solo en la portada del blog).

    Ojala me ayudes, gracias viejo

    ResponderEliminar
    Respuestas
    1. En las entradas será un problema porque la imagen tapará parte de las entradas.

      Eliminar
  11. Hoola Potro solo dejo este mensaje para agradecerle enormemente la ayuda a los que recién comenzamos a ser blogger. Gracias por ser tan claro en sus post. Abrazos desde el alma. http://unchatparaelalma.blogspot.com fue armado con su ayuda.♥

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario julieta, que tengas buen inicio de semana.

      Eliminar
  12. yo logre hacerlo de otra forma (no se si mas facil), entre a diseño|gayet html y pegue un codigo que cree y se puede modificar:
    _fcksavedurl="" style="right: 0px; position: fixed; top: 0px;"><*/> url de la imagen" _fcksavedurl="url de la imagen" alt="" />
    importante!: donde puse *
    pongan img

    espero que a alguno le alla servido y que el potro lo publique en una de sus entradas. Y ya que estoy escribiendo este es el nombre de mi blog :) : viva mundo gaturro apps

    ResponderEliminar
    Respuestas
    1. Ammm, pues es el mismo código que se habla en esta entrada, sólo que tú lo has puesto en un gadget en lugar de ponerlo directo en la plantilla.

      Eliminar
  13. Excelente tu ayuda, yo personalice mi propio liston

    https://lh5.googleusercontent.com/-SaP5bFIYv28/T56u1gOgW3I/AAAAAAAABDQ/V96TBcRjSIc/s151/londres2012-colombia.png

    Gracias

    ResponderEliminar
  14. yo tengo el antifaz nuevo como hago

    ResponderEliminar
    Respuestas
    1. En la nueva interfaz entra en Plantilla, ahí verás el botón de Edición de HTML.

      Eliminar
  15. Duda: ¿cómo se puede poner el listón al otro costado del blog?
    ¡Saludos!

    ResponderEliminar
    Respuestas
    1. Cambia right:0; por left:0; pero tendrías que tener una imagen que esté inclinada hacia ese lado.

      Eliminar
    2. Invertimos el listón. ¡gracias! :)

      Eliminar
  16. Saludos Potro: Tiempo que no edito mi blog y ahora veo que hay una nueva imagen en el editor. Donde ubico ahora el Boton: "Edicion HTML" .. Antes solo entraba a Diseño y ahi estaba. Ahora me volvi loco buscandolo y no se como hallarlo. O acaso cambio de nombre. Disculpa si no es la entrada correcta para preguntar esto; espero me puedan ayudar. Gracias

    ResponderEliminar
  17. Para cualquier formulario necesitarás usar otro servicio ya que Blogger no ofrece un formulario distinto al de los comentarios.

    ResponderEliminar
  18. Muchas gracias, te agradezco mucho.

    Me parece rarísimo porque la he usado desde 2007 y hasta la fecha y no solo para mi blog (constantemente), también como cuenta para recibir correos-e.

    Le daré click como me dices.

    Nuevamente gracias.

    ResponderEliminar
  19. Muy bonitos. Veo de poner uno en mi web despues
    Saludos master!

    ResponderEliminar
  20. Buenas noches.

    Recibe un cordial saludo.

    Están preciosos estos listones ;) Ya he preparado a mi blog para los Olímpicos con uno de ellos, ¡Si vieras lo bonito que luce! ¡Muchas Gracias!

    Que una lluvia de éxito te inunde,
    Lluvia

    ResponderEliminar
    Respuestas
    1. Estoy seguro que sí debe lucir tan bien como dices :)

      Eliminar
  21. Están geniales! Me encantan! Además, a este código se le puede sacar mucho partido, ya que podemos cambiar la imagen y ponerla de lo que sea, y ya tenemos algo en la esquina, jaja.

    ¡Feliz martes! (Aunque sea difícil disfrutarlo jaja)

    ResponderEliminar
    Respuestas
    1. De hecho, sí, puede servir como base para cualquier otra imagen :)

      Eliminar
  22. del potro, a mi me aparece cuando se esta cargando pero luego desaparese ¿que puede ser? mi blog el vivamundogaturroapps.blogspot.com

    ResponderEliminar
    Respuestas
    1. Podría ser porque en el código repetiste el punto y coma:
      position:absolute;;

      Eliminar
  23. Hola Potro Quisiera Saber, como se puede alojar mis imágenes del blog, en mi hosting, ya lo adquiri trabaja con cpanel, gracias

    ResponderEliminar
    Respuestas
    1. Tendrías que subir tus imágenes a tu hosting, obtener el link y usarlo en tus entradas. No es automático ya que en Blogger las imágenes se alojan en Picasa, de hecho por esa misma razón es innecesario contratar un hosting.

      Eliminar
    2. Es una plantilla sencilla de blogger:

      http://androidaccion.blogspot.com

      Eliminar
  24. Hola potro, me podrías ayduar con una cosa aunque este fuera de tema?

    Quería saber como puede acortar la hoja de blogger, para que el footer me quede "fuera" de la página, como aquí:

    http://4ndroid.com/

    o aquí:

    http://www.rinconandroid.com/


    Existe alguna manera?

    Muchas gracias Potro.

    ResponderEliminar
    Respuestas
    1. ¿Cuál es la plantilla donde quieres hacer eso Pena?

      Eliminar
    2. Es una plantilla sencilla de blogger:

      http://androidaccion.blogspot.com

      Eliminar
    3. Haz un respaldo de la plantilla, luego busca esta línea:
      <!-- content -->

      Debajo encontrarás un </div>, elimínalo.

      Ahora busca un poquito más arriba esto:
      <footer>
      <div class='footer-outer'>


      Bórralo con cuidado y cámbialo por esto:
      </div>
      <footer>
      <div class='footer-outer' style="background:#FFF; margin-top:20px;">

      Eliminar
    4. Perfecto Potro, eres un genio.

      Gracias por tu tiempo.

      Eliminar
    5. Para que el footer ocupe todo el ancho de la página, por lo menos el fondo de color, que debo añadir?

      La verdad es que siento molestarte tanto, te lo compenso con el "a,ds.e_n`s-e", espero que me entiendas ;P

      Eliminar
    6. Ahí es más complicado. Puedes poner por ejemplo un DIV que ocupe todo el ancho, pero ese DIV ya no incluiría gadgets :/

      Eliminar
  25. Vaya trabajazo te pegaste Potro. Están muy bien todos, el primero es el que más me gusta. ¡Saludos! :)

    ResponderEliminar
  26. Jejeje muy curioso igual no queda mal decorar alguno de mis blogs con este detallito probare a ver

    Un saludo

    ResponderEliminar
    Respuestas
    1. A algunos les quedará mejor que a otros, pero igual es cuestión de gustos ;)

      Eliminar
  27. Una genialidad Potro, como de costumbre. Está muy bien diseñados, me agrada como se ven, me llevaré unos ;)

    ResponderEliminar
  28. Hola potro:
    Bueno en mi página tengo un visor y tengo una imagen puesta y tengo otra añadida pero no reproduce... que hago? te dejo el blog: www.pequemundossims.blogspot.com

    ResponderEliminar
    Respuestas
    1. Tendrías que preguntar en el sitio donde tomaste el slider, pero a simple vista parece que es porque tienes varias versiones de jQuery:
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

      Eliminar
    2. Ok, Pero eso ya venia en la plantilla...

      Eliminar
    3. Aun así revisa las versiones de jQuery que te mencioné, si ya venía en la plantilla entonces significa que dejó de funcionar a raíz de un cambio que hiciste, y en las versiones de jQuery podría estar el problema.

      Eliminar
    4. Y Como quito lo de jQerry porque lo busco en edicion html y no pone nada.

      Eliminar
    5. Usa las teclas CTRL + F para localizarlo.

      Eliminar
  29. una duda con que los diseñaste ?

    ResponderEliminar
  30. una duda con que los diseñaste ¿?

    ResponderEliminar
  31. Hola Potro de nuevo!!!!

    Puedo enlazar el logo a una web determinada???

    Cómo??

    Gracias majo

    ResponderEliminar
    Respuestas
    1. Hola Gorka, sólo encierra el código del listón entre <a href="URL del enlace"> y </a>

      Eliminar
  32. Potro,Super...Listo,coloque el liston de Londres 2012..Dank.

    ResponderEliminar
  33. Está genial, una bonita manera de apoyar los JJOO y de que nuestros blogs estén al día. Gracias Potro.

    ResponderEliminar
  34. Hola de nuevo Potro, ¿se puede centrar? Lo he intentado poniendo "center" en el código y no funciona. Es que quiero poner el logotipo del colegio con acceso a su web en la mitad de mi cabecero sin que oculte nada de mi plantilla. (que igual se puede hacer de otra forma, pero ésta me parece tan fácil...)

    Gracias como siempre

    ResponderEliminar
    Respuestas
    1. Hola Gorka, sí puedes centrarlo, sólo cambia esto:
      style='position:absolute; top:0; right:0;'

      Por esto:
      style='position:absolute; top:0; left:50%;'

      Saludos.

      Eliminar
  35. Perfecto!!! le he puesto 40 % porque me aparece más centrado (?).

    Gracias majo!!!

    ResponderEliminar
    Respuestas
    1. Porque olvidé considerar el ancho del elemento. Lo que pasa es que con 50% lo centra pero desde el lado izquierdo de donde empieza la imagen y yo omití eso, por eso si pones un valor más bajo lo ves más centrado :)

      Eliminar
    2. Ahora lo entiendo... GRACIAS ;)

      Eliminar
  36. Yo hice uno verde:
    https://dl.dropbox.com/u/77150153/Listones/londres2012_verde.png

    ResponderEliminar
  37. Sr. el potro ud es un genio justo con la tematica de actualidad

    ResponderEliminar
  38. Me llevo uno para colocarlo en Bloguístico. Gracias Potro :)

    ResponderEliminar
  39. Potro! soy tu fan, haces que me sienta experta ja!

    ResponderEliminar
    Respuestas
    1. Jaja, gracias, esa es la idea, que todos podamos hacerlo :)

      Eliminar
  40. Me encantó y fue muy sencillo de poner.

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger