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.
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.
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.
Ciudad Blogger
¡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!
ResponderEliminarPues sí, fuiste la primera :)
Eliminarpotro 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/
Eliminary 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
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 ;)
EliminarRespondiendo 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'">
ah disculpa potro perfecto gracias hermano! eres un duro
EliminarHola, 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 :)
ResponderEliminarPor cierto buen post, mañana más tranquilo lo veo denuevo.
Mira esta entrada, ahí enlaza a un sitio donde podrás ver distintos lugares dónde poner los anuncios:
Eliminarhttp://ciudadblogger.com/2010/01/10-lugares-para-poner-adsense-en.html
Cualquier otra duda respecto a ello lo vemos allá.
Saludos.
Gracias por el aporte Potro,Hoy si yo te agarre con las manos en la masa...Saludos Secretosdelaweb.com
ResponderEliminarCreo que ya me conocen la hora a la que publico las entradas :P
EliminarNo esta mal, Potro!! Aver si me da tiempo de ponerlo en el blog! (hace mucho que no puedo ni comentar)
ResponderEliminarBuenos días.
ResponderEliminarAntes 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.
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.
EliminarSaludos.
Waooooo Potro que diseño, seguro pondre algunos en Mis blogs.....Un muy buen diseño GRACIAS....
ResponderEliminarQué bueno que te han gustado Mauricio, saludos!
EliminarHola, 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 ^_^
ResponderEliminarEsas son buenas noticias Mapachito, me da gusto que te haya funcionado el truquillo de esa entrada.
EliminarMuchas gracias por publicarlos, ahoramismo voy a agregar uno en mi blog: http://www.vvalcoi.com
ResponderEliminarAhora sí, tarde pero seguro ;)
EliminarWooooW!! Me encanta potrooo!! Las voy a poner... Pero no me decido cual usar!!
ResponderEliminarPues aun faltan varias semanas para los juegos, así que puedes usar uno cada semana :D
Eliminar¡Que bien quedaría eso!
EliminarBuena idea Potro, cada vez menos para los JO de Londres! :D
ResponderEliminarUna 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
En las entradas será un problema porque la imagen tapará parte de las entradas.
EliminarHoola 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.♥
ResponderEliminarGracias por tu comentario julieta, que tengas buen inicio de semana.
Eliminaryo 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:
ResponderEliminar_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
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.
EliminarExcelente tu ayuda, yo personalice mi propio liston
ResponderEliminarhttps://lh5.googleusercontent.com/-SaP5bFIYv28/T56u1gOgW3I/AAAAAAAABDQ/V96TBcRjSIc/s151/londres2012-colombia.png
Gracias
Te ha quedado muy bien :)
EliminarGracias a ti por tu visita!
ResponderEliminaryo tengo el antifaz nuevo como hago
ResponderEliminarEn la nueva interfaz entra en Plantilla, ahí verás el botón de Edición de HTML.
EliminarDuda: ¿cómo se puede poner el listón al otro costado del blog?
ResponderEliminar¡Saludos!
Cambia right:0; por left:0; pero tendrías que tener una imagen que esté inclinada hacia ese lado.
EliminarInvertimos el listón. ¡gracias! :)
EliminarSaludos 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
ResponderEliminarSaludos, mira el comentario #16.1
EliminarGRACIAS POTRO!!!
ResponderEliminarSaludos
Para cualquier formulario necesitarás usar otro servicio ya que Blogger no ofrece un formulario distinto al de los comentarios.
ResponderEliminarMuchas gracias, te agradezco mucho.
ResponderEliminarMe 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.
Muy bonitos. Veo de poner uno en mi web despues
ResponderEliminarSaludos master!
Saludos Alejo!
EliminarBuenas noches.
ResponderEliminarRecibe 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
Estoy seguro que sí debe lucir tan bien como dices :)
EliminarEstá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.
ResponderEliminar¡Feliz martes! (Aunque sea difícil disfrutarlo jaja)
De hecho, sí, puede servir como base para cualquier otra imagen :)
Eliminarlindo potro... gracias sos un groso
ResponderEliminarGracias a ti ;)
Eliminardel potro, a mi me aparece cuando se esta cargando pero luego desaparese ¿que puede ser? mi blog el vivamundogaturroapps.blogspot.com
ResponderEliminarPodría ser porque en el código repetiste el punto y coma:
Eliminarposition:absolute;;
Hola Potro Quisiera Saber, como se puede alojar mis imágenes del blog, en mi hosting, ya lo adquiri trabaja con cpanel, gracias
ResponderEliminarTendrí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.
EliminarEs una plantilla sencilla de blogger:
Eliminarhttp://androidaccion.blogspot.com
Hola potro, me podrías ayduar con una cosa aunque este fuera de tema?
ResponderEliminarQuerí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.
¿Cuál es la plantilla donde quieres hacer eso Pena?
EliminarEs una plantilla sencilla de blogger:
Eliminarhttp://androidaccion.blogspot.com
Haz un respaldo de la plantilla, luego busca esta línea:
Eliminar<!-- 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;">
Perfecto Potro, eres un genio.
EliminarGracias por tu tiempo.
Para que el footer ocupe todo el ancho de la página, por lo menos el fondo de color, que debo añadir?
EliminarLa verdad es que siento molestarte tanto, te lo compenso con el "a,ds.e_n`s-e", espero que me entiendas ;P
Ahí es más complicado. Puedes poner por ejemplo un DIV que ocupe todo el ancho, pero ese DIV ya no incluiría gadgets :/
EliminarVaya trabajazo te pegaste Potro. Están muy bien todos, el primero es el que más me gusta. ¡Saludos! :)
ResponderEliminarMuchas gracias Fito.
EliminarJejeje muy curioso igual no queda mal decorar alguno de mis blogs con este detallito probare a ver
ResponderEliminarUn saludo
A algunos les quedará mejor que a otros, pero igual es cuestión de gustos ;)
EliminarUna genialidad Potro, como de costumbre. Está muy bien diseñados, me agrada como se ven, me llevaré unos ;)
ResponderEliminarPuedes tomar todos los que quieras ;)
EliminarHola potro:
ResponderEliminarBueno 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
Tendrías que preguntar en el sitio donde tomaste el slider, pero a simple vista parece que es porque tienes varias versiones de jQuery:
Eliminarhttp://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html
Ok, Pero eso ya venia en la plantilla...
EliminarAun 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.
EliminarY Como quito lo de jQerry porque lo busco en edicion html y no pone nada.
EliminarUsa las teclas CTRL + F para localizarlo.
Eliminaruna duda con que los diseñaste ?
ResponderEliminaruna duda con que los diseñaste ¿?
ResponderEliminarCon Photoshop.
EliminarHola Potro de nuevo!!!!
ResponderEliminarPuedo enlazar el logo a una web determinada???
Cómo??
Gracias majo
Hola Gorka, sólo encierra el código del listón entre <a href="URL del enlace"> y </a>
EliminarOK MIL GRACIAS!!!
ResponderEliminarSaludos!!!
OK MIL GRACIAS!!
ResponderEliminarSaludos
Potro,Super...Listo,coloque el liston de Londres 2012..Dank.
ResponderEliminarEstá genial, una bonita manera de apoyar los JJOO y de que nuestros blogs estén al día. Gracias Potro.
ResponderEliminarHola 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...)
ResponderEliminarGracias como siempre
Hola Gorka, sí puedes centrarlo, sólo cambia esto:
Eliminarstyle='position:absolute; top:0; right:0;'
Por esto:
style='position:absolute; top:0; left:50%;'
Saludos.
Perfecto!!! le he puesto 40 % porque me aparece más centrado (?).
ResponderEliminarGracias majo!!!
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 :)
EliminarAhora lo entiendo... GRACIAS ;)
EliminarYo hice uno verde:
ResponderEliminarhttps://dl.dropbox.com/u/77150153/Listones/londres2012_verde.png
Sr. el potro ud es un genio justo con la tematica de actualidad
ResponderEliminarGracias Juan Carlos!
EliminarMe llevo uno para colocarlo en Bloguístico. Gracias Potro :)
ResponderEliminarPor nada Fito :)
EliminarPotro! soy tu fan, haces que me sienta experta ja!
ResponderEliminarJaja, gracias, esa es la idea, que todos podamos hacerlo :)
EliminarMe encantó y fue muy sencillo de poner.
ResponderEliminarQué bueno que te han gustado :)
Eliminar