Ciudad Blogger inici? hace poco m?s de cuatro a?os y la raz?n era simple, querer compartir con los dem?s lo poco que hab?a aprendido en mis intentos de tener un blog. La noche que este blog naci? no imagin� que tanta gente me leer?a, ni que con coincidir?a con gente sumamente valiosa que ha marcado mi vida para bien, y a la que le tengo mucho aprecio y respeto.
En estos cuatro a?os nunca tuve tanta falta de tiempo como ahora, el d?a simplemente no me rinde para hacer todas las cosas que necesito y quisiera hacer. Desde noviembre pasado una serie de circusntancias por las que he atravesado han hecho que mi disponibilidad para el blog sea casi nula, raz?n por la cual hay tantos comentarios sin responder en el blog y en las redes sociales, y es ese mismo motivo el que me ha llevado a considerar la idea de concluir este ciclo de mi vida llamado Ciudad Blogger.
A?n no s� qu� es lo que de forma definitiva suceder?, pero s? me es importante hacerles saber la causa por la cual estoy tan ausente y por qu� hay tantos comentarios pendientes para ser respondidos.
Yo por mi parte, continuar� esforz?ndome para ir respondiendo poco a poco todos los comentarios y de vez en cuando publicar alguna entrada, pero les suplico mucha paciencia y que no desesperen, ya que como les dije antes, el tiempo del que dispongo es muy limitado.
De momento, Ciudad Blogger hace una pausa deseando que no sea muy larga, ni definitiva. Espero que pronto podamos leernos tan seguido como antes.
Blogger nos ha sorprendido desde ayer con un nuevo cambio, una Edici?n de HTML m?s moderna y profesional. Esta nueva interfaz en la Edici?n de HTML incluye una Vista Previa sin abrir una nueva pesta?a; numeraci?n y colores en los c?digos para que nos permita identificar cada una de las partes de la plantilla; men? de gadgets para acceder a ellos r?pidamente; expandimiento de artilugios de forma individual; organizar apropiadamente los c?digos a?adidos; y su propio buscador.
S?, todo esto han modificado en el nuevo dise?o que nos ha sorprendido a todos. ?Y para qu� sirve cada cosa?
Los colores de los c?digos es algo que ha confundido a muchos pues algunos crees que tienen una funci?n espec?fica pero no es as?, es s?lo para ayudarnos a diferenciar cada sector de la plantilla y no ver s?lo un mundo de letras negras como lo hab?amos visto siempre hasta ayer. De hecho, la mayor?a de los editores profesionales suelen ser as?.
?D?nde se expande los artilugios en la nueva Edici?n de HTML?
Cada ?rea est? m?s organizada de forma individual, para expandir los artilugios de alg?n ?rea que necesites s?lo dale click a la flecha correspondiente y se expandir? esa ?rea, por ejemplo, los estilos CSS ahora los ver?s agrupados entre <b:skin>...</b:skin>
El men? Ir al widget nos permite desplazarnos directamente hasta el gadget que hemos seleccionado ahorr?ndonos un poco de tiempo.
Este nuevo dise?o incluye su propio buscador que aparece con CTRL+F, y este quiz?s es el cambio que a muchos no les ha gustado pues algunos dicen que a veces puede ser tardado y lento para encontrar los c?digos a buscar.
El bot?n Editar Plantilla nos permite regresar al editor cuando hemos estado en la Vista Previa misma que ahora se muestra dentro del mismo editor. Yo en lo personal prefiero que se abra en una pesta?a aparte para tener mayor espacio de visibilidad de la plantilla y los cambios que se est?n aplicando.
El bot?n Plantilla de formato nos organiza el c?digo que hemos a?adido o modificado, de manera que el cambio que hayamos hecho quede de una forma limpia y organizada.
Sin duda en su mayor?a son cambios bastante buenos con la esperanza de que nos ayuden a trabajar mejor a la hora de modificar la plantilla del blog. ?A ustedes qu� les ha parecido?
jScrollPane es un script de jQuery que permite cambiar la barra de desplazamiento del blog, es decir, el scrollbar del navegador. Si bien podemos usar CSS para modificarlo, el problema es que no est? estandarizado, por lo que con CSS s?lo podemos hacerlo funcionar en Chrome y Safari; y en el caso de Internet Explorer tambi�n tiene su propio c?digo pero obviamente s?lo funciona en ese navegador (no s� en cu?les versiones). As? que lo que haremos a continuaci?n es darle un nuevo aspecto al scrollbar pero usando jQuery, de esta manera el cambio ser? visible en todos los navegadores.
Puedes ver un ejemplo en este blog de pruebas, ver?s que la barra de desplazamiento tiene otra forma y color.
Para cambiar el scrollbar de tu blog primero entra en Plantilla | Edici?n de HTML y antes de </head> pega este c?digo:
Por ?ltimo busca la etiqueta </body> y arriba de ella pega esto:
</div>
Guarda los cambios y listo. En color verde ver?s d?nde se cambian los colores de la barra de desplazamiento y sus diferentes ?reas, como es CSS puedes a?adirle otros estilos si lo deseas, somo sombras, bordes redondeados, etc. Si quisieras que no aparezcan los l?mites superior e inferior (como en el ejemplo) entonces elimina lo que est? en color rojo.
Recuerda que el script usa jQuery, as? que si ya lo tuvieras no pongas de nuevo el script (la primera l?nea del c?digo). Si usas Scriptaculous o Mootools deber?s hacerle unos ligeros cambios para que funcione.
Parece largo el c?digo pero siempre es mejor alojar los scripts directo en la plantilla que subirlo a un hosting, de estar forma los scripts siempre estar?n disponibles y cargar?n m?s r?pido. Independientemente de todo eso el resultado final es bastante est�tico, ?no lo creen?
La mayor?a de los sistemas de valoraci?n que conocemos son para que los usuarios califiquen una entrada, pero qu� pasa si no queremos la calificaci?n de los usuarios sino la propia. Por ejemplo, algunos blogs hacen rese?as de pel?culas, de libros, aplicaciones, etc. y quieren calificar el "producto" del que hablan, pues es ah? cuando podemos usar un sistema de valoraci?n de estrellas como el siguiente, para que el autor le ponga una calificaci?n a su entrada, rese?a, pel?cula, o lo que quiera calificar.
El resultado ser? algo como esto:
Este sistema de valoraci?n lo haremos s?lo con CSS apoy?ndonos de sprites, y tiene la caracter?stica de mostrar calificaciones fraccionadas, es decir, que podemos darle una o cinco estrellas, o una estrella y media, dos estrellas y media, etc.
Lo primero que haremos es entrar en Plantilla | Edici?n de HTML y pegar antes de ]]></b:skin> el CSS:
Lo que est? en rojo es la calificaci?n que le dar?s, en este caso son 4 estrellas. Los valores son en m?ltiples de 5 donde 0 es ninguna estrella, 5 media estrella, 10 una estrella, 15 una estrella y media, 20 dos estrellas, etc. hasta el 50, que son cinco estrellas.
Es un m�todo bastante sencillo que le permitir? al autor calificar cualquier cosa. Hemos usado la etiqueta FIELDSET para acomodar el texto "Calificaci?n" y las estrellas, por lo que puedes personalizar esas etiquetas si lo deseas.
Si lo que buscas es un sistema de valoraci?n de estrellas donde sea el p?blico quien califique, entonces tal vez quieras usar las propias estrellas de valoraci?n que provee Blogger.
Hace alg?n tiempo vimos el men? horizontal con subpesta?as y buscador integrado y desde eso me han preguntado c?mo hacer ese mismo men? pero de varios niveles, es decir, que las subpesta?as del men? tambi�n tengan subpesta?as. El men? a continuaci?n tiene esa caracter?stica, adem?s de conservar el buscador dentro del men?.
Los estilos redondeados en los submen?s se han quitado por cuestiones est�ticas, pero ya saben que cualquiera de estas moner?as pueden personalizarse a consideraci?n y gusto propio.
ATENCI?N: Si usas una plantilla hecha a trav�s del Dise?ador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.
Para poner este men? horizontal con submen?s en tu blog entra en la Edici?n HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos:
/* Menu horizontal con buscador ----------------------------------------------- */ #menuWrapper { width:100%; /* Ancho del men? */ height:35px; padding-left:14px; background:#333; /* Color de fondo */ border-radius:20px; /* Bordes redondeados de la barra principal */ } .menu { padding:0; margin:0; list-style:none; height:35px; position:relative; z-index:5; font-family:arial, verdana, sans-serif; } .menu li:hover li a { background:none; } .menu li.top {display:block; float:left;} .menu li a.top_link { display:block; float:left; height:35px; line-height:34px; color:#ccc; text-decoration:none; font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif; font-size:13px; /* Tama?o de la fuente */ font-weight:bold; padding:0 0 0 12px; cursor:pointer; } .menu li a.top_link span { float:left; display:block; padding:0 24px 0 12px; height:35px; } .menu li a.top_link span.down { float:left; display:block; padding:0 24px 0 12px; height:35px; } .menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; } .menu li:hover {position:relative; z-index:2;} .menu ul, .menu li:hover ul ul, .menu li:hover ul li:hover ul ul, .menu li:hover ul li:hover ul li:hover ul ul, .menu li:hover ul li:hover ul li:hover ul li:hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu li:hover ul.sub { left:0; top:35px; background:#333; /* Color de fondo del submen? */ padding:3px; white-space:nowrap; width:200px; height:auto; z-index:3; } .menu li:hover ul.sub li { display:block; height:30px; position:relative; float:left; width:200px; font-weight:normal; } .menu li:hover ul.sub li a{ display:block; height:30px; width:200px; line-height:30px; text-indent:5px; color:#ccc; text-decoration:none; } .menu li ul.sub li a.fly { /* Color de fondo del submen? */ background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMm7zw3hlo7y1sEwwLMtLoEL2he_0GreEeUCP7VneK8uDymrHleg_dE8_CHvuZC7YwYiLP4no2dKXiTKNiiObED27xe0pY1rGUGHzgNjwDSyRqWnpTYUuGlh5BluHw8wHsie6D0yPwifN/) 185px 10px no-repeat;} .menu li:hover ul.sub li a:hover { background:#2580a2; /* Color de fondo al pasar el cursor */ color:#fff; } .menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly { /* Color de fondo al pasar el cursor */ background:#2580a2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMm7zw3hlo7y1sEwwLMtLoEL2he_0GreEeUCP7VneK8uDymrHleg_dE8_CHvuZC7YwYiLP4no2dKXiTKNiiObED27xe0pY1rGUGHzgNjwDSyRqWnpTYUuGlh5BluHw8wHsie6D0yPwifN/) 185px 10px no-repeat; color:#fff;}
.menu li:hover ul li:hover ul, .menu li:hover ul li:hover ul li:hover ul, .menu li:hover ul li:hover ul li:hover ul li:hover ul, .menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul { left:200px; top:-4px; background: #333; /* Color de fondo del submen? */ padding:3px; white-space:nowrap; width:200px; z-index:4; height:auto; } #search { width: 228px; /* Ancho del buscador */ height: 22px; float: right; text-align: center; margin-top: 6px; margin-right: 6px; /* Imagen de fondo del buscador */ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHziyOXb2qNmFiwj1z3CaPq15Zy4OcXEXDFQS9FKC3s9XWoY8Kl-0wOY7vLBwu0kghBcWhIcPteokfdCOxoHeJzJpO1SaNW4EUpFnTOqZS3lqUhYPp2sdIeWQ3tE-T6q5giNA4yP3DByY/s1600/search-bar.png) no-repeat; } #search-box { margin-top: 3px; border:0px; background: transparent; text-align:center; }
Luego entra en Dise?o y en un gadget HTML/Javascript pega lo siguiente:
Guarda los cambios y listo. En color verde puedes ver las ?reas para cambiar los colores.
Antes de <!-- Buscador --> puedes agregar m?s pesta?as si lo deseas. Si quisieras a?adir otra pesta?a simple, agrega una l?nea como esta:
<li class="top"><a href="URL del enlace" class="top_link"><span>Pesta?a</span></a></li>
Si quisieras agregar una pesta?a con subpesta?as entonces agrega este c?digo:
<li class="top"><a href="#" class="top_link"><span class="down">Pesta?a</span></a> <ul class="sub"> <li><a href="URL del enlace">Sub pesta?a</a></li> <li><a href="URL del enlace">Sub pesta?a</a></li> <li><a href="URL del enlace">Sub pesta?a</a></li> </ul> </li>
Y si quisieras que una de las subpesta?as tuviera otras subpesta?as entonces elimina una l?nea como la que est? en color naranja y c?mbiala por un c?digo como este:
<li><a href="#" class="fly">Sub pesta?a</a> <ul> <li><a href="URL del enlace">Otra Sub pesta?a</a></li> <li><a href="URL del enlace">Otra Sub pesta?a</a></li> <li><a href="URL del enlace">Otra Sub pesta?a</a></li> </ul> </li>
Con esta variaci?n del men? podemos agrupar m?s enlaces y categor?as en poco espacio, y que adem?s, al conservar el buscador dentro del men? hace que sea un men? pr?ctico, compacto y ?til.
Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer
Caracter?sticas:
Plantilla para Blogger, 2 columnas, 980px de ancho, Entradas estilo Pinterest, Cabecera flotante, Colores minimalistas, Comentarios del autor destacados, Botones para compartir.
Incluye:
Plantilla XML, Instrucciones de instalaci?n, Licencia
Hace ya mucho tiempo que no creaba una plantilla gratuita para Blogger, as? que esta vez quise darme un tiempo para poder dise?ar una plantilla que pudieran descargar y usar libremente.
Bloggerest es una plantilla gratuita inspirada en Pinterest, aunque no es una r�plica (ni pretende serla), ideal para blogs de fotografia, o blogs donde las im?genes juegan un rol importante.
El dise?o de la plantilla es un tanto minimalista, predominan los colores rojo y blanco con un toque de gris. El t?tulo del blog as? como los t?tulos de los gadgets usan una fuente tipo caligraf?a para darle un aire elegante. La cabecera ocupa el 100% del ancho de la p?gina al mismo tiempo de ser flotante. Las im?genes en la portada tienen opacidad al pasar el cursor y �stas conducen a la entrada al dar click sobre ellas, tambi�n muestra la miniatura del video cuando est?n alojados en YouTube y cuando no hay una imagen que lo antecede. Este es un ejemplo de una entrada donde se puede apreciar c?mo se visualizan los bloques entrecomillados, las listas numeradas, las listas con vi?etas, los botones para compartir, los gadgets de la sidebar y los comentarios donde se destacan los realizados por el autor.
Personalizaci?n:
La cabecera tiene un alto de 124px por lo que se recomienda usar un logotipo que no exceda esa medida.
El men? de la plantilla es el men? horizontal con subpesta?as y buscador integrado, por lo que en esa entrada podr?s ver un poco m?s sobre su personalizaci?n. En la plantilla puedes identificar el men? por la etiqueta <div id='menuWrapper'>
La forma de redactar las entradas es igual que como lo har?as siempre, sin embargo, en caso de que tu entrada s?lo contenga una imagen, o un video, sin nada de texto, tendr?s que dar uno o m?s saltos de l?nea (ENTER) al final del c?digo de tu imagen o de tu video, ya que si no lo haces la imagen no se formar? en miniatura y se distorcionar?.
Es compatible con todos los navegadores m?s conocidos (arriba se especifica cu?les) seg?n la ?ltima versi?n actual de cada uno de ellos.
El sistema magazine que utiliza permite mostrar muchas entradas en la portada ya que en la portada las entradas no cargan de forma completa, permitiendo agilizar la carga del blog. Las pocas im?genes que usa la plantilla est?n alojadas directamente en base 64 por lo que no depender?s de ning?n servicio externo para cargarlas.
Espero que sea de su entero agrado, que la disfruten, y que no retiren los cr�ditos :P
ACTUALIZACI?N 4/abr/2013 Si en la pesta?a Dise?o no ves la sidebar, entra en Plantilla | Edici?n de HTML y elimina estas partes en color rojo:
Eso har? que la sidebar aparezca en la secci?n Dise?o. Si notaras que con ese cambio tarda un poco m?s en cargar la portada del blog, o si aparecen menos entradas, pon de nuevo ese c?digo despu�s de haber hecho todas las modificaciones deseadas en la sidebar.
ACTUALIZACI?N 12/abr/2013 Se ha modificado la plantilla para resolver el problema de las entradas que ten?an a?adido el salto de l?nea (Leer m?s) manualmente. Tambi�n se ha agregado un enlace a la imagen predeterminada para las entradas que no tienen una imagen.
Twitcker es un servicio gratuito que nos permite mostrar en el blog los ?ltimos tuits en forma de marquesina, como si de un anuncio de noticias se tratara. Lo que hace es mostrar en una barra todos los ?ltimos tuits que hemos publicado, pudiendo configurar la velocidad con la que pasan, la forma como se muestran, los colores, enlaces, etc. Puedes verlo funcionando aqu? mismo, arriba de esta p?gina.
Para conseguir este gadget de ?ltimos tuits entra a Twitcker y da click en el bot?n Sign in with Twitter.
Autoriza a la aplicaci?n para que se cree un script ?nico para ti.
Una vez que lo hagas ver?s el nombre de tu usuario, y debajo un link para configurar las opciones de la barra de tuits.
Ah? ver?s una serie de opciones para tu barra de tuits, como por ejemplo controlar la velocidad con la que pasan los tuits, el color de la barra, si se muestran como marquesina o m?quina de escribir, etc.
Una vez que termines de personalizarla da click en Create y tendr?s el c?digo, c?pialo y luego entra en Dise?o | A?adir un gadget | HTML/Javascript y ah? pega el c?digo que has copiado.
La posici?n puedes elegirla para que se muestre arriba de la p?gina, al final, o en un lugar concreto; si deseas esta ?ltima opci?n (por ejemplo para ponerlo en la sidebar) elige Own container dentro de Twitcker position. Ah? escribe TwitterTicker. Despu�s en un gadget HTML/Javascript agrega esto:
<div id="TwitterTicker"> ...Aqu? el script... </div>
Ah? deber?s colocar donde se indica el script que te da Twitcker. De esta forma podr?s mostrar tu barra de tuits en cualquier parte del blog.
Como puedes ver es un gadget bastante simp?tico que puede ayudarnos a conseguir m?s seguidores ya que nuestros lectores podr?n leer en el blog un poco de lo que tuiteamos. Adem?s que, el gadget est? lindo ?no creen?
Los enlaces de navegaci?n son esos que aparecen al final de la p?gina que dicen "Entradas antiguas", "Entradas recientes" y "P?gina principal" y nos sirven para desplazarnos por las entradas del blog. Lo que haremos con esta entrada son dos cosas:
Cambiar los textos "Entradas antiguas" y "Entradas recientes" por los t?tulos de las entradas.
Hacer que �stos datos aparezcan en un recuadro "desvaneciente" cuando se baje el scroll de la p?gina.
Puedes verlo en funcionamiento en este blog de pruebas, al bajar el scroll aparecer?n los enlaces de navegaci?n mostrando los t?tulos de las entradas que anteceden y preceden al post.
Esta forma de mostrar los enlaces de navegaci?n s?lo se ver? en las entradas individuales, ya que en la portada y dem?s partes del blog se seguir?n mostrando como siempre.
La instalaci?n es muy sencilla en realidad. Primero entra en Plantilla | Edici?n de HTML, marca la casilla Expandir plantillas de artilugios y busca esta l?nea:
<style type='text/css'> <!-- #blog-pager-newer-link {float:left;clear:both;line-height:30px;} #blog-pager-older-link {float:left;clear:both;line-height:30px;} .home-link {display:none;} .blog-pager-older-link, .blog-pager-newer-link { background-color: transparent !important; background-image: none !important; border:0 !important; color:#0577AB !important; /* Color de los t?tulos de las entradas */ float: left; width: 500px; clear:both; } a.blog-pager-older-link:hover, a.blog-pager-newer-link:hover { text-decoration:none !important; } a.blog-pager-newer-link:before { content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMFmQ7TEq44h8fInVRct8LbI1hkqzx7hB_3K8O9GsEl_zUxhsrkmcu-P7O4tEYGIZSo5QocWkCdjUSA9rIPcZ4hKROv7OLLsEw885CT0VhQBNLUac1KIUHAtHhQHVn7WelpkXOHKj27a8/s32/flecha2.png); float:left; } a.blog-pager-older-link:before { content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdIr_bSEUL62YsHbF-XwD7Euu65pHXXd22RYgvfs1GiSp-5YJS6UsI124jZZRT2j0Z4BiDNNfVBnJjEptEyTqt4y8NvAJK_Ex5cYQOOJ0oMFPPFLAfKNpX_22Sbl2ryH1Ny3z0mAuo9lE/s32/flecha1.png); float:left; } #blog-pager { width:500px; background-color: transparent !important; background-image: none !important; border:0 !important; text-align:left; } #blog-pager div { color:#fff; /* Color de los textos "Entrada anterior" y "Entrada siguiente" */ font-weight:bold; margin-bottom: -5px; } a#blog-pager div:hover { text-decoration:none !important; color:#fff; /* Color de los textos "Entrada anterior" y "Entrada siguiente" */ } #blog-pager-note { z-index:9; } #blog-pager-note h4 { margin:0; padding:0; color:#4898B9; /* Color del t?tulo del recuadro */ font-size:16px; /* Tama?o del t?tulo del recuadro */ } --> </style> </b:if>
Hay tres URLs en color azul, la primera es la imagen de fondo semitransparente del recuadro, las otras dos corresponden a los ?conos de las flechas.
En color verde puedes ver d?nde cambiar los colores de los textos. El n?mero en color rojo es la distancia en pixeles que activa el gadget, es decir, que como est? ahora, el recuadro aparecer? cuando se haya bajado el scroll 150px. Puedes usar un valor m?s alto en caso de que tus entradas suelan ser largas y por lo tanto la "altura" del scroll sea mayor.
Cabe mencionar que este gadget usa jQuery, as? que procura tener s?lo una versi?n, y si usas Scriptaculous deber?s aplicar un hack, de lo contrario podr?a no funcionar.
Termin? la semana y con ello termin? La Semana de los Dominios, el concurso que regala un dominio todos los d?as durante 7 d?as.
Fue grato ver concursando a lectores que nos siguen casi desde nuestros inicios, as? como nuevos lectores que reci�n se integran a la comunidad de Ciudad Blogger, porque as? lo he sentido siempre, como una comunidad donde todos y cada uno de ustedes son los causantes de que este rinc?n de la red tenga vida y sentido.
Pues a lo que vamos, estos son los 7 afortunados ganadores del concurso, cada uno de ellos se ha llevado 1 dominio personalizado por 1 a?o. Los ganadores son:
SpnFanBloggan? en Twitter mencionando el color de la cabecera de nuestra primera plantilla.
Carlos Pachargan? en Facebook respondiendo el nombre que originalmente iba a tener Ciudad Blogger.
Llu?s Urquhartgan? en el blog acertando en una pregunta de historia.
GrupoNinegan? en el blog encontrando la frase escondida en un video.
cartasfuturoyogan? en Twitter adivinando el animal de la imagen.
Jos� Mar?a C?novasgan? en Facebook respondiendo una pregunta de cultura general.
Israel Palaciosgan? en Facebook dici�ndonos en cu?l revista sali? publicado Ciudad Blogger.
Gracias a todos por acompa?arnos siempre con tanto entusiasmo y por hacer posible la realizaci?n de esta segunda edici?n del concurso. Gracias, gracias, gracias.
Es el cuarto d?a de La Semana de los Dominios y hoy un dominio tendr? due?o, ?ser?s t??
Esta es la din?mica, mira el siguiente video y responde: Respetando may?sculas, min?sculas, signos ortogr?ficos y acentos, ?cu?l es la frase escondida en el video?
?Esta pregunta ya tiene ganador! La frase escondida en el video es: ?Ya gan� con Ciudad Blogger!
Recuerda las reglas:
Quien participe deber? tener habilitado su perfil (ya sea el de Blogger o el de Google+ vinculado al de Blogger) y en �l deber? mostrar al menos un blog.
Si tienes varias cuentas de Blogger s?lo podr?s participar con una.
En caso de que respondas varias veces, s?lo se tomar? como v?lida la primera respuesta.
Es el tercer d?a de La Semana de los Dominios y hoy un dominio tendr? due?o, ?ser?s t??
Esta es la pregunta ganadora: La ciudad donde naci? el personaje de la foto fue bombardeada durante la Segunda Guerra Mundial, ?en qu� fecha ocurri? este bombardeo? (d?a, mes y a?o)
?Esta pregunta ya tiene ganador!
Albert Einstein naci? en la ciudad de Ulm, Alemania, �sta ciudad fue bombardeada el 17 de diciembre de 1944 por La Real Fuerza A�rea durante la Segunda Guerra Mundial.
Recuerda las reglas:
Quien participe deber? tener habilitado su perfil (ya sea el de Blogger o el de Google+ vinculado al de Blogger) y en �l deber? mostrar al menos un blog.
Si tienes varias cuentas de Blogger s?lo podr?s participar con una.
En caso de que respondas varias veces, s?lo se tomar? como v?lida la primera respuesta.
Cupido ya est? a la vuelta de la esquina y ahora no es el amor el que est? en el aire sino los corazones, muchos corazones.
Giffy.me nos ofrece estos dos scripts que har?n que tu blog se inhunde de romanticismo al mostrar muchos corazones subiendo como globos por el blog. Son dos dise?os, el primero son corazones color rosa de un tama?o mediano, el segundo son corazones peque?os en color rojo; en ambos casos los corazones subir?n por la p?gina movi�ndose de un lado al otro.
Para poner estos corazones en tu blog s?lo entra en Plantilla | Edici?n de HTML y antes de </body> agrega el c?digo de los corazones que m?s te gusten.
<!-- Corazones en el blog --> <div style="display:none;"> <script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/0/7/29/parts.js"></script><p style="text-align: center;margin:0;padding:0;"><a href="http://giffy.me/baby/"><img style="border:0;" src="http://blogparts.giffy.me/0133/parts.gif" /></a></p><p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;">[PR] <a href="http://typing.twi1.me/">???????????</a></p> </div> <!-- Fin de Corazones en el blog -->
<!-- Corazones en el blog --> <div style="display:none;"> <script type="text/javascript" src="http://blogparts.giffy.me/0082/parts.js"></script><p style="text-align: center;margin:0;padding:0;"><a href="http://giffy.me/baby/"><img style="border:0;" src="http://blogparts.giffy.me/0082/parts.gif"/></a></p><p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;">[PR] <a href="http://typing.twi1.me/">??!????????</a></p> </div> <!-- Fin de Corazones en el blog -->
El ?nico punto en contra que suelen tener estas decoraciones es que no tienen opciones de configuraci?n, pero tomando en cuenta que regularmente los usamos s?lo en d?as festivos (como ahora que se acerca el d?a de San Valent?n) pues no hay mucho inconveniente.
Y qu� pensaron, ?que no celebrar?amos el 4 aniversario de Ciudad Blogger? Pues se equivocaron, porque nuevamente llega La Semana de los Dominios donde durante siete d?as nos ponemos de fiesta y ?festejamos regalando un dominio todos los d?as!
Que esta vez no se te escape uno de los premios ya que durante la semana del 18 al 24 de febrero estaremos haciendo una pregunta todos los d?as ya sea por ciudadblogger.com, por nuestra p?gina de Facebook, o por Twitter, y la primera persona en responder correctamente se ganar? uno de los dominios que regalaremos.
Rescuerda que regalaremos 1 dominio todos los d?as por cualqueiera de estos medios, as? que s?guenos en Facebook, en Twitter y suscr?bete a nuestro feed para estar al tanto del concurso y que nadie te gane uno de los premios.
Cada ganador se llevar? 1 dominio por 1 a?o con manejo absoluto de DNS, y podr?n elegir alguna de estas extensiones:
.com, .net, .org, .info, .me, .us, .im, .ws
Las reglas
En cada pregunta s?lo se permite una respuesta por participante.
Quien resulte ganador de uno de los dominios ya no podr? participar en las dem?s preguntas.
S?lo se permite una cuenta por participante, as? que si tienes varias cuentas de Facebook s?lo puedes participar con una, lo mismo si tienes varias cuentas de Twitter o Blogger.
Todas las cuentas de Blogger (o Google+ vinculadas a la de Blogger) deber?n mostrar al menos 1 blog en el perfil.
Las bases completas del concurso se encuentran en la p?gina de los T�rminos y Condiciones, ah? podr?s conocer todos los detalles.
Recuerda, durante La Semana de los Dominios debes estar al pendiente, porque no avisaremos qu� d?a se regalar? en determinado sitio ni en qu� horario. Las preguntas ser?n variadas, y la mec?nica de cada una tambi�n podr? ser distinta.
Vista todos los sitios oficiales de Ciudad Blogger porque este a?o ?puedes estrenar dominio propio!
Meny es un men? tridimencional bastante peculiar y llamativo, no s?lo por la forma como muestra los enlaces, sino por la forma como "pone" al blog. Lo que hace este men? es que al pasar el cursor para mostrarlo, se desliza el contenido del men? mientras voltea al blog con un efecto 3D.
La mejor forma de entenderlo es viendo el demo en este blog de pruebas, s?lo pasa el cursor por la flecha para ver este men? en funcionamiento.
El script es de Hakim El Hattab y para suerte de muchos no usa ni jQuery ni Scriptaculous, as? que en la mayor?a de los casos no deber?a haber problemas de compatibilidad.
Implementar este men? que voltea la p?gina en 3D es bastante sencillo, s?lo entra en Plantilla | Edici?n de HTML y antes de ]]></b:skin> pega los estilos:
/* Meny Menu ----------------------------------------------- */ .meny { display: none; padding: 20px; overflow: auto; background: #333; color: #eee; /* Color de fondo del men? */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .meny h4 { font-size: 24px; /* Tama?o del t?tulo del men? */ color:#fff; /* Color del t?tulo del men? */ text-align:center; } .meny ul { margin-top: 10px; } .meny ul li { display: inline-block; width: 200px; list-style: none; font-size: 20px; padding: 3px 10px; } .meny-arrow { position: absolute; z-index: 10; border: 10px solid transparent; -webkit-transition: opacity 0.4s ease 0.4s; -moz-transition: opacity 0.4s ease 0.4s; -ms-transition: opacity 0.4s ease 0.4s; -o-transition: opacity 0.4s ease 0.4s; transition: opacity 0.4s ease 0.4s; } .meny-left .meny-arrow { left: 5px; top: 350px; margin-top: -16px; border-left: 16px solid #333; /* Color de la flecha */ } .meny-right .meny-arrow { right: 14px; top: 150px; margin-top: -16px; border-right: 16px solid #333; /* Color de la flecha */ } .meny-top .meny-arrow { left: 150px; top: 14px; margin-left: -16px; border-top: 16px solid #333; /* Color de la flecha */ } .meny-bottom .meny-arrow { left: 150px; bottom: 14px; margin-left: -16px; border-bottom: 16px solid #333; /* Color de la flecha */ } .meny-active .meny-arrow { opacity: 0; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -ms-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .contents { width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Debajo de cualquiera de las dos agrega lo siguiente:
<div class='meny'> <h4>Men?</h4> <ul> <li><a href='URL del enlace'>Texto del enlace</a></li> <li><a href='URL del enlace'>Texto del enlace</a></li> <li><a href='URL del enlace'>Texto del enlace</a></li> <li><a href='URL del enlace'>Texto del enlace</a></li> <li><a href='URL del enlace'>Texto del enlace</a></li> <li><a href='URL del enlace'>Texto del enlace</a></li> <li><a href='URL del enlace'>Texto del enlace</a></li> <li><a href='URL del enlace'>Texto del enlace</a></li> <li><a href='URL del enlace'>Texto del enlace</a></li> <li><a href='URL del enlace'>Texto del enlace</a></li> </ul> </div>
<div class='meny-arrow'/> <div class='contents'>
Por ?ltimo a?ade antes de </body> este c?digo:
</div> <script> //<![CDATA[ /*! * meny 1.2 * http://lab.hakim.se/meny * MIT licensed * Created by Hakim El Hattab (http://hakim.se, @hakimel) */ var Meny={create:function(a){return(function(){if(!a||!a.menuElement||!a.contentsElement){throw"You need to specify which menu and contents elements to use."; }if(a.menuElement.parentNode!==a.contentsElement.parentNode){throw"The menu and contents elements must have the same parent.";}var J="top",K="right",c="bottom",N="left"; var F="WebkitPerspective" in document.body.style||"MozPerspective" in document.body.style||"msPerspective" in document.body.style||"OPerspective" in document.body.style||"perspective" in document.body.style; var D={width:300,height:300,position:N,threshold:40,overlap:6,transitionDuration:"0.5s",transitionEasing:"ease"};var e={menu:a.menuElement,contents:a.contentsElement,wrapper:a.menuElement.parentNode,cover:null}; var A=e.wrapper.offsetLeft,z=e.wrapper.offsetTop,t=null,r=null,q=null,o=null,f=false,m=false;var l,j,G,n,O,V,S,x,d,B;var w,y,E;Meny.extend(D,a);i();g(); v();C();Q();R();function i(){G="";S="";switch(D.position){case J:l="50% 0%";j="rotateX( 30deg ) translateY( -100% ) translateY( "+D.overlap+"px )";V="50% 0"; x="translateY( "+D.height+"px ) rotateX( -15deg )";n={top:"-"+(D.height-D.overlap)+"px"};O={top:"0px"};d={top:"0px"};B={top:D.height+"px"};break;case K:l="100% 50%"; j="rotateY( 30deg ) translateX( 100% ) translateX( -2px ) scale( 1.01 )";V="100% 50%";x="translateX( -"+D.width+"px ) rotateY( -15deg )";n={right:"-"+(D.width-D.overlap)+"px"}; O={right:"0px"};d={left:"0px"};B={left:"-"+D.width+"px"};break;case c:l="50% 100%";j="rotateX( -30deg ) translateY( 100% ) translateY( -"+D.overlap+"px )"; V="50% 100%";x="translateY( -"+D.height+"px ) rotateX( 15deg )";n={bottom:"-"+(D.height-D.overlap)+"px"};O={bottom:"0px"};d={top:"0px"};B={top:"-"+D.height+"px"}; break;default:l="100% 50%";j="translateX( -100% ) translateX( "+D.overlap+"px ) scale( 1.01 ) rotateY( -30deg )";V="0 50%";x="translateX( "+D.width+"px ) rotateY( 15deg )"; n={left:"-"+(D.width-D.overlap)+"px"};O={left:"0px"};d={left:"0px"};B={left:D.width+"px"};break;}}function g(){Meny.addClass(e.wrapper,"meny-"+D.position); e.wrapper.style[Meny.prefix("perspective")]="800px";e.wrapper.style[Meny.prefix("perspectiveOrigin")]=V;}function v(){e.cover=document.createElement("div"); e.cover.style.position="absolute";e.cover.style.display="block";e.cover.style.width="100%";e.cover.style.height="100%";e.cover.style.left=0;e.cover.style.top=0; e.cover.style.zIndex=1000;e.cover.style.visibility="hidden";e.cover.style.opacity=0;try{e.cover.style.background="rgba( 0, 0, 0, 0.4 )";e.cover.style.background="-ms-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)"; e.cover.style.background="-moz-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";e.cover.style.background="-webkit-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)"; }catch(W){}if(F){e.cover.style[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing;}e.contents.appendChild(e.cover);}function C(){var W=e.menu.style; switch(D.position){case J:W.width="100%";W.height=D.height+"px";break;case K:W.right="0";W.width=D.width+"px";W.height="100%";break;case c:W.bottom="0"; W.width="100%";W.height=D.height+"px";break;case N:W.width=D.width+"px";W.height="100%";break;}W.position="fixed";W.display="block";W.zIndex=1;if(F){W[Meny.prefix("transform")]=j; W[Meny.prefix("transformOrigin")]=l;W[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing;}else{Meny.extend(W,n);}}function Q(){var W=e.contents.style; if(F){W[Meny.prefix("transform")]=S;W[Meny.prefix("transformOrigin")]=V;W[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing; }else{W.position=W.position.match(/relative|absolute|fixed/gi)?W.position:"relative";Meny.extend(W,d);}}function R(){if("ontouchstart" in window){Meny.bindEvent(document,"touchstart",L); Meny.bindEvent(document,"touchend",H);}else{Meny.bindEvent(document,"mousedown",M);Meny.bindEvent(document,"mouseup",U);Meny.bindEvent(document,"mousemove",b); }}function u(){if(!f){f=true;Meny.addClass(e.wrapper,"meny-active");e.cover.style.height=e.contents.scrollHeight+"px";e.cover.style.visibility="visible"; if(F){e.cover.style.opacity=1;e.contents.style[Meny.prefix("transform")]=x;e.menu.style[Meny.prefix("transform")]=G;}else{w&&w.stop();w=Meny.animate(e.menu,O,500); y&&y.stop();y=Meny.animate(e.contents,B,500);E&&E.stop();E=Meny.animate(e.cover,{opacity:1},500);}Meny.dispatchEvent(e.menu,"open");}}function I(){if(f){f=false; Meny.removeClass(e.wrapper,"meny-active");if(F){e.cover.style.visibility="hidden";e.cover.style.opacity=0;e.contents.style[Meny.prefix("transform")]=S; e.menu.style[Meny.prefix("transform")]=j;}else{w&&w.stop();w=Meny.animate(e.menu,n,500);y&&y.stop();y=Meny.animate(e.contents,d,500);E&&E.stop();E=Meny.animate(e.cover,{opacity:0},500,function(){e.cover.style.visibility="hidden"; });}Meny.dispatchEvent(e.menu,"close");}}function M(W){m=true;}function b(Z){if(!m){var W=Z.clientX-A,aa=Z.clientY-z;switch(D.position){case J:if(aa>D.height){I(); }else{if(aa<D.threshold){u();}}break;case K:var X=e.wrapper.offsetWidth;if(W<X-D.width){I();}else{if(W>X-D.threshold){u();}}break;case c:var Y=e.wrapper.offsetHeight; if(aa<Y-D.height){I();}else{if(aa>Y-D.threshold){u();}}break;case N:if(W>D.width){I();}else{if(W<D.threshold){u();}}break;}}}function U(W){m=false;}function L(W){t=W.touches[0].clientX-A; r=W.touches[0].clientY-z;q=null;o=null;Meny.bindEvent(document,"touchmove",P);}function P(X){q=X.touches[0].clientX-A;o=X.touches[0].clientY-z;var W=null; if(Math.abs(q-t)>Math.abs(o-r)){if(q<t-D.threshold){W=T;}else{if(q>t+D.threshold){W=p;}}}else{if(o<r-D.threshold){W=s;}else{if(o>r+D.threshold){W=h;}}}if(W&&W()){X.preventDefault(); }}function H(W){Meny.unbindEvent(document,"touchmove",P);if(q===null&&o===null){k();}}function k(){var W=(D.position===J&&r>D.height)||(D.position===K&&t<e.wrapper.offsetWidth-D.width)||(D.position===c&&r<e.wrapper.offsetHeight-D.height)||(D.position===N&&t<D.width); if(W){I();}}function p(){if(D.position===K&&f){I();return true;}else{if(D.position===N&&!f){u();return true;}}}function T(){if(D.position===K&&!f){u(); return true;}else{if(D.position===N&&f){I();return true;}}}function h(){if(D.position===c&&f){I();return true;}else{if(D.position===J&&!f){u();return true; }}}function s(){if(D.position===c&&!f){u();return true;}else{if(D.position===J&&f){I();return true;}}}return{open:u,close:I,isOpen:function(){return f; },addEventListener:function(W,X){e.menu&&Meny.bindEvent(e.menu,W,X);},removeEventListener:function(W,X){e.menu&&Meny.unbindEvent(e.menu,W,X);}};})();},animate:function(b,a,c,d){return(function(){var g={}; for(var j in a){g[j]={start:parseFloat(b.style[j])||0,end:parseFloat(a[j]),unit:(typeof a[j]==="string"&&a[j].match(/px|em|%/gi))?a[j].match(/px|em|%/gi)[0]:""}; }var i=Date.now(),e;function h(){var k=1-Math.pow(1-((Date.now()-i)/c),5);for(var m in g){var l=g[m];b.style[m]=l.start+((l.end-l.start)*k)+l.unit;}if(k<1){e=setTimeout(h,1000/60); }else{d&&d();f();}}function f(){clearTimeout(e);}h();return{stop:f};})();},extend:function(d,c){for(var e in c){d[e]=c[e];}},prefix:function(e,d){var b=e.slice(0,1).toUpperCase()+e.slice(1),g=["Webkit","Moz","O","ms"]; for(var c=0,a=g.length;c<a;c++){var f=g[c];if(typeof(d||document.body).style[f+b]!=="undefined"){return f+b;}}return e;},addClass:function(b,a){b.className=b.className.replace(/\s+$/gi,"")+" "+a; },removeClass:function(b,a){b.className=b.className.replace(a,"");},bindEvent:function(a,c,b){if(a.addEventListener){a.addEventListener(c,b,false);}else{a.attachEvent("on"+c,b); }},unbindEvent:function(a,c,b){if(a.removeEventListener){a.removeEventListener(c,b,false);}else{a.detachEvent("on"+c,b);}},dispatchEvent:function(b,c,a){if(b){var d=document.createEvent("HTMLEvents",1,2); d.initEvent(c,true,true);Meny.extend(d,a);b.dispatchEvent(d);}},getQuery:function(){var a={};location.search.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi,function(b){a[b.split("=").shift()]=b.split("=").pop(); });return a;}};if(typeof Date.now!=="function"){Date.now=function(){return new Date().getTime();};}
Cambia las URLs de los enlaces y los nombres de los mismos donde se indica en color rojo. Luego guarda los cambios y listo.
Si quisieras agregar m?s enlaces s?lo pon antes de </ul> una l?nea como esta por cada enlace extra que desees:
<li><a href='URL del enlace'>Texto del enlace</a></li>
Adicionalmente puedes cambiar la orientaci?n de la p?gina cuando se voltea, puede ser a la izquierda como est? por defecto, a la derecha, arriba o abajo. Eso se modifica donde dice left en el ?ltimo c?digo y podr?s cambiarlo por right, top, o bottom
Si tuvieras mucho contenido a lo largo entonces se ver? mejor si lo cambias por top o bottom, aunque tambi�n cambiar? la orientaci?n del men?.
