- ▲▼ Mi blog no tiene comentarios
No es la primera vez que alguien me escribe diciendo algo así.
Cuando ésto sucede, suelo entrar a ver el blog en cuestión y veo que, efectivamente, no hay comentarios.
Pero no por que nadie ha dejado ninguno, sinó que no se puede.
No se ve por ningún sitio, ni al pie de la entrada, ni al principio de la misma, la opción de hacerlo.
¿Que sucede?
Muy sencillo: No está marcada la opción en el gadget de las entradas.
Para que la gente pueda dejar comentarios en un blog hay dos cosas muy importantes que teneis que mirar: Configuración/Comentarios y Editar del gadget de entradas.
La primera opción la veis en la pestaña Configuración.
Una de las opciones es Comentarios. Si pinchas en ella, verás que tienes la opción de escoger quien podrá dejar comentarios en tu blog, si quieres que tengan que verificar una palabra, o si vas a querer moderarlos, o sea, que tengas que aprobarlos para que salgan publicados, entre otras cosas.
Por defecto viene ya configurado de forma que no se puedan dejar comentarios anónimos.
La segunda opción la encuentras en Diseño.
Cuando entras a personalizar el blog añadiéndole elementos, puedes ver que en cada uno de los gadgets, o elementos que componen el blog, hay un Editar abajo a la derecha.
Incluso en las entradas.
Pinchando ahí, en ese Editar, se abre el gadget de las entradas así:
Fíjate que una de las opciones que están marcadas en esta imagen es la que pone 5 comentarios.
El 5 está fijo, ya que es solo un número que está ahí como ejemplo. Si una entrada no tiene ningún comentario se vería un 0, si tiene uno un 1, si tiene dos un 2, etc.
La palabra comentarios está en un recuadro para que puedas poner qué palabra quieres que se vea ahí.
Puedes poner lo que quieras. Por ejemplo, opiniones, reacciones, besitos, abrazos, lo que quieras.
Cuestión aparte es que la frase o palabra cambie dependiendo del número de comentarios. Para eso has de modificar el código de la plantilla como está explicado aquí.
Pero, tiene que estar marcado para que se vea, ya que es el enlace para que quien entre en tu blog pueda dejar su opinión, comentario o reacción a lo que hayas escrito.
También es posible que esto esté marcado, que se vea el enlace, pero que al pinchar no se abra nada. Ni una ventana flotante, ni otra página, ni un recuadro al final.
Esto sucede en los blogs abiertos recientemente a los que se ha colocado una plantilla modificada.
Hace poco, blogger implantó una opción a la que en principio solo se podía acceder a través de blogger in draft: Los comentarios en una ventanita incrustada al pie de la entrada.
Pero pasado el periodo de prueba, esta opción está ya al alcance de todos y es la que viene seleccionada por defecto en los blogs que se abren ahora.
El problema es que es incompatible con algunas modificaciones de las que hacemos.
En los blogs abiertos antes de la creación de esta forma de comentar, si las plantillas han sido modificadas añadiéndoles otra columna o personalizando la frase de enlace de los comentarios a través del código, y se selecciona la opción de comentarios en ventana incrustada al pie de las entradas, tampoco funciona.
- ▲▼ Nuevo gadget: Seguidores
Este gadget tiene dos modalidades. La primera la que vemos en el Escritorio (Panel), al entrar a editar nuestro blog.
Si bajamos un poco en la página, veremos que ha cambiado el aspecto de lo que había debajo de nuestras cosas, ahora hay un espacio con tres pestañas, que se ve así:
Si pinchamos en Añadir nos sale esta ventana.
El primer paso es añadir la dirección del blog que nos interesa.
Escribimos en la casilla la dirección del blog que queremos seguir y le damos a siguiente.
Nos sale esto.
Aquí tenemos dos opciones, seguir el blog públicamente, con lo que su autor verá nuestra imagen y sabrá que le seguimos, o hacerlo de forma anónima.
De todas formas, en nuestro Escritorio (Panel) se verá esto:
Y si no hemos marcado que queremos seguirle de forma anónima, y el autor del blog tiene el gadget añadido, en su blog nos veremos así.
Eso de Para siguiente es una cagada de los traductores. En realidad significa Dejar de seguir ese blog.
En Tuneando ya explicaré como cambiarlo.
También podemos seguir un blog, si su autor tiene el gadget añadido, pinchando en Seguir este blog, del elemento que se ve en él.
Al hacerlo se abrirá esta ventana.
En la que, aunque salga en inglés, debemos darle a Follow para seguirlo.
La segunda parte de este invento es colocar el elemento (gadget) en nuestro propio blog, para que puedan pinchar ahí para seguirlo.
Diseño/ Elementos de la página/ Añadir un gadget.
En la lista de gadgets que aparece, pinchamos en Seguidores.
Podemos configurar el gadget, cambiándole el nombre. Por aquí no se puede hacer nada más.
Si quieres modificarle algo tendrás que hacerlo a través del código de la plantilla.
Le damos a Guardar, lo colocamos donde queramos y esto será lo que se verá en la sidebar del blog.
Y ya está. Nuestros lectores ya podrán seguir nuestro blog.
Es conveniente colocarlo en nuestro blog, ya que a veces nuestros lectores habituales entran a través de favoritos y quizá no recuerden la dirección exacta de nuestro blog cuando estén en su panel. De esta forma les facilitamos la tarea.
- ▲▼ Configuración del blog con la nueva interfaz del escritorio
Hoy me ha llegado una consulta que me ha hecho pensar que muchas personas que hayan empezado en la aventura del blog después de la implantación de la nueva interfaz, es más que posible que solo hayan conocido ésa y que sea la que están usando y por tanto las explicaciones que di en su momento, basadas en la antigua, no les sirvan de mucho, así que he entrado en una de mis cuentas, en la que no me importa que haya esa nueva interfaz, o escritorio, para poder hacer capturas de como se hacen ahora algunas cosas en cuanto a Configuración del blog.
Al igual que expliqué en la entrada de usar las páginas para enlazar etiquetas, hay dos caminos para acceder a Configuración:
1.- La flechita que hay junto al lapiz en el escritorio.
2.- Pinchando en diseño, una vez estés en el blog.
Pinchando en Configuración se desplegarán las opciones y se mostrará la primera: Básico
Donde podrás editar el título del blog, la descripción, añadir un dominio propio si dispones de alguno, añadir autores a tu blog y decidir si todo el mundo puede leerlo o solo aquellas personas a las que le envies invitación.
Son las mismas cosas que ya había, pero colocadas en distinto lugar.
Entradas y comentarios te permite decidir cuantas entradas quieres que se vean en la página principal del blog, y quien puede comentar, como y donde quieres que se vean los comentarios, amén de alguna cosita más que detallaré luego.
Así es como se ve la página:
Lo que ves de la plantilla de entrada: Si pinchas en añadir se despliega una zona para escribir.
Eso sirve para, por ejemplo, poner una firma personalizada en las entradas, o algunas otras cosas. Lo que pongas ahí se verá cada vez que escribas una entrada. Según qué cosas se verán en modo Redactar, según que cosas solo si miras el HTML de la entrada.
Como ésta no está destinada a explicaros qué podeis poner ahí, y dado que algunas de esas cosas ya las he explicado en Tuneando el blog, (como lo de la firma personalizada), no me extenderé más en este punto.
Lo de mostrar imágenes en el lightbox no tengo muy claro de qué se trata, pero si pinchas en el interrogante tienen la amabilidad de explicárnoslo.
Como ves es un sistema que a mi no me interesa en absoluto, pues si lo aplicara verías todas esas imágenes en pequeñito al final de la entrada.
Lo probaré en algún blog de pruebas y ya lo explicaré más ampliamente.
Móviles y correo electrónico sirve para configurar el sistema de enviar entradas con el móvil y para poner una dirección de correo para que nos avisen si hay algún comentario en el blog, cosa muy útil si tienes bastantes, pues no has de ir entrando a mirar si alguien ha comentado o no y en que entrada lo ha hecho, aunque en esa interfaz hay una opción, debajo de Páginas, que pone Comentarios. Ahí se puede ver si hay alguno o no.
Idioma y formato es para definir en que idioma se va a ver tu blog, en cuanto a las cosas que salen por defecto. Me explico.
Puedes escribir las entradas en el idioma que quieras, pero la fecha del blog, los títulos de los gadgets si no se los cambias, como el archivo o las etiquetas y alguna que otra cosita, se verá en el idioma que elijas ahí.
Y a diferencia de la antigua interfaz, ésto solo sucederá en el blog al que le apliques el cambio, si tuvieras más de uno.
También podrás ajustar la hora en ese apartado. Recuerda que por defecto sale con la hora del pacífico, ya que allí es donde está la central de blogger.
En preferencias de búsqueda hay una serie de parámetros que, conociendo como conozco a los encargados de modificar algunas cosas de los blogs, y no me refiero a usuarios, sinó a los cerebritos de google/blogger, más vale no tocar a menos que tengas muy pero muy claro lo que estás haciendo.
En Otros puedes añadir un lector de feeds, como feed burner, para que envie tus entradas a tus seguidores, decidir si el contenido de tu blog es apto para menores y añadir google analytics.
En casi todo hay un interrogante que trata de explicar para qué sirve. De todas formas de casi todo eso he dejado entradas, hace ya tiempo, pues solo han cambiado la forma de acceder a la configuración, no como hacerlo.
Para saber más de Google analytics y de Feed Burner, pincha en la pestañita que pone Utilidades, bajo la cabecera, y verás un blog que engloba muchos blogs, como si fuera un web, donde cada uno trata un tema concreto de alguna de las herramientas que google pone a nuestro alcance.
- ▲▼ El Disenador de Plantillas
En principio, para poder usar todas las opciones del diseñador, se ha de usar una de las plantillas nuevas, ya que algunas de sus funciones no son aplicables a las antiguas.
Así que, dado que esta entrada va dedicada a quien empieza y por tanto tendrá una plantilla de las nuevas, para modificarla, sin meterse en las entrañas del código, solo se ha de pinchar en ese Diseño, que se ve en la barra que hay arriba de todo.
Al pinchar ahí, es muy posible que se vaya a parar a la página donde añadimos gadgets al blog. No importa, ahí encontraremos esta opción.
Pinchando en ese Diseñador de plantillas que se puede ver en la imagen anterior, iremos a parar a la página que puedes ver a continuación.
(NOTA aclaratoria: Todas las explicaciones que vayas viendo, si no digo lo contrario, pertenecen a la imagen que haya debajo del grupo de instrucciones.)
(NOTA 2: Si quieres ver alguna de estas imágenes a tamaño natural, puedes pincharlas sin miedo, se abrirán en otra pestaña, de manera que no saldrás del blog)
Vereis a la izquierda varias opciones.
La primera, Plantillas, es para cambiar el modelo.
Hay una opción llamada Vistas dinámicas. No la he probado todavía. Cuando lo haga os explicaré de qué va la cosa. De momento vamos a ver lo más básico.
Así que, como digo, puedes ver ahí las distintas opciones que puedes escoger. Si tienes una y quieres otra, solo has de pincharla para que se coloque en el blog de forma provisional.
En la parte de abajo de estos recuadros que os muestro en las imágenes, podreis ir viendo como queda lo que seleccioneis, en vuestro propio blog.
Cuando encuentres algo que sea de tu agrado, basta con pinchar en ese botón naranja que dice Aplicar al blog y listo.
Una vez elegida la plantilla, puedes cambiarle el fondo.
Si has elegido una simple, solo podrás modificarle los colores básicos.
Aquí le cambias todo el conjunto.
Para modificar solo el de una parte, has de ir a avanzado. Ya llegaremos a eso.
Si has elegido una plantilla de las que tienen imagen, puedes cambiársela.
También podrás cambiarle aquí el conjunto de colores del blog, si los que hubiera no combinaran con la nueva imagen.
Pinchando en la flechita que hay junto a esa imagen, se despliegan varias opciones.
Fíjate que una de ellas es Subir imagen. Sirve para que puedas poner tu propia imagen de fondo.
Pero ten cuidado con la imagen que pones. Si es demasiado pequeña se repetirá y a menos que sea una imagen pensada para repetirse a lo largo y ancho del blog, dará un aspecto de embaldosado al fondo, pues se verán las uniones de las repeticiones.
Pinchando en la flechita que hay junto al cuadrito de colores, se desplegará una gama más amplia.
La siguiente herramienta es ajustar el ancho. Con ella puedes, moviendo los cursores que ves aquí, en la siguiente imagen, ensanchar el blog y las columnas.
(NOTA 3: He colocado las imágenes y explicaciones en el orden en que se encuentran en la lista, pero antes de usar ésta te recomendaría que primero decidieras el Diseño, o sea, como, donde y cuantas columnas quieres que tenga tu blog y después usaras esta herramienta para ajustar el ancho de todas, ya que si lo haces al revés, es muy posible que debas volver a esta sección después de haber modificado el diseño, a fin de reajustarlas.)
Como puedes ver, no hay una opción para la zona de las entradas, solo para la o las columnas laterales, (sidebar), pero, como es lógico, la zona de las entradas se ensanchará o encogerá conforme encojas o ensanches la /las sidebar.
Digo la /las, porqué si elijes un diseño con la zona de las entradas en el centro de dos columnas, tendrás dos barras ahí, de esta forma puedes hacer una sidebar más ancha que la otra si, por ejemplo, necesitas más espacio para poner imágenes.
Pero recuerda que si ensanchas una o las dos sidebar, le quitas espacio a la zona de las entradas, así que ten cuidado.
Un detalle a tener en cuenta: Si tu diseño tiene dos columnas laterales juntas en uno de los dos lados, solo verás una barra para ensanchar la sidebar, ya que esas dos columnas se consideran una sola.
Fíjate, en la imagen del diseño, que estos modelos tienen un recuadro ancho encima de los dos estrechitos, (precisamente la que está remarcada). Esto hace que se considere una sola columna, ya que este sistema no prevé ensanchar solo una de las dos que hay debajo de la más ancha.
Si necesitases mucho espacio te recomendaría que primero ensancharas el blog, así dispondrás de suficiente espacio para poner las cosas, tanto en las entradas, como en la sidebar.
La siguiente opción sirve precisamente para escoger el diseño de tu blog, en cuanto a columnas,
Puedes ver las distintas opciones que hay e ir probándolas, ya que, hasta que no le digas Aplicar al blog, no cambiará nada de lo que hubiera.
Aquí quiero darte un consejo: Ten cuidado si tienes muchos gadgets, sobre todo si los tienes en 2 columnas y quieres pasar a solo una, ya que al modificar ésto, estás modificando el código HTML del blog, y al pasar de 2 columnas a 1, todos los gadgets has de recolocarse, con lo que no te extrañe si cuando veas tu blog, después de aplicarlo, te lo encuentras todo revuelto.
De todas formas recuerda que se puede reordenar todo en la página de añadir gadgets, Elementos de la página o Layout.
Y finalmente Avanzado. Aquí puedes modificar los colores y las fuentes, (letras) de forma independiente.
Como ves, hay una lista de las distintas zonas a modificar. Algunas sirven para fuente y color del texto, como ésta que se ve en la foto.
Y otras solo para el color, como ésta, ya que en este caso se trata solo del color de fondo del blog.
La ventaja de este sistema es que no necesitas saber lenguaje HTML para hacer los cambios.
La desventaja es que estás limitado/a a modificar solo las partes que hay disponibles y si quisieras, por ejemplo, que cada columna lateral tuviera unos colores o fuentes distintos, deberías retocar el código del blog.
- ▲▼Flechas y caracteres Unicode en la plantilla
Aunque los caracteres en formato Unicode parezcan algo estrafalario, en cualquier plantilla de Blogger los vemos por varios lados. El más común es la comilla simple que en HTML se escribe 'pero hay otros, por ejemplo   para espacios forzosos, ¡ y ¿ para los signos de abren admiraciones o interrogaciones, etc.
En realidad, cualquier texto puede ser escrito de ese modo, hasta un simple HOLA:HOLA
Siempre tienen el mismo formato, el caracter & seguido del caracter # y un número decimal que es el código Ascii pero que no está limitado a los 256 tradicionales sino que se extiende abarcando cientos de otros números aunque algunos de ellos no serán visibles o se verán mal.
Blogger también usa unas "flechas especiales", caracteres que, por ejemplo, se ven en el gadget de Archivos: ► y ▼:
◄▲►▼
Esta es una lista parcial de distintos caracteres de flechas que también pueden ser utilizados. Poniendo el cursor encima, se verá el formato requerido:
⇐⇑⇒⇓⇠⇡⇢⇣
⇚⤊⇛⤋⤌⤍⤎⤏
⇇⇈⇉⇊↢↤↥↦
↞↟↠↡⇦⇧⇨⇩
☜☝☞☟←↑→↓
Algunas no tienen las cuatro direcciones:
⇽⇾≪≫⇜⇝☚☛⧼⧽
Y otras sólo tienen una:
➩➪➫➬➭➮➯➱
➡⟿➔➜➝➞➟➠➡➢➣➤➧➨➲➵➺➻➼➽➾
Que alguna de las direcciones no exista como carácter individual no es problema ya que usando CSS podemos rotarlo en cualquier dirección; por ejemplo, si tomamos esta flecha hacia la derecha:➜, lo transformamos en una flecha a la izquierda con:transform:rotateY(180deg);Y flechas hacia arriba y hacia abajo con:transform:rotate(-90deg); transform:rotate(90deg);Sin olvidarnos que algunos navegadores requieren los prefijos específicos para estas transformaciones.
➜➜➜➜
- ▲▼Menús -3- Configurar tu propio menú. (Un menú simple)
Puedes montar tu propio menú y darle el aspecto que desees simplemente con un poco de CSS y un gadget HTML.
Para empezar has de construir la lista basándote en estos parámetros:
<ul class="menu"> (indica que aquí empieza una lista de enlaces. Con class="menu" le podremos añadir estilos)
<li> (indica que empieza un enlace)
<a href="dirección del enlace"> (sitio o página enlazada)
Palabra que describe lo enlazado (será la que se verá y se podrá pinchar)
</a> (cierre del enlace)
</li> (indica que termina el enlace)
Repetir desde <li> hasta </li> cambiando la url y la palabra, por cada enlace que se quiera añadir.
</ul> (indica que aquí termina la lista)
Opciones avanzadas.
Si quieres que los enlaces se abran en otra ventana:
<a href="dirección" target="_blank">
Si quieres que se vea algo al poner el ratón encima del enlace:
<a href="dirección" title="palabra o frase">
Si quieres que se vea algo al poner el ratón encima del enlace y se abra en otra ventana:
<a href="dirección" title="palabra o frase" target="_blank">
Una vez preparada la lista, iremos a Diseño/Edición de HTML para configurar el estilo del menú.
El lugar donde coloques lo que voy a decirte a continuación no es demasiado importante, aunque si vas a colocarlo bajo la cabecera te recomendaría que lo pusieras justo debajo de las definiciones del header. Más que nada por si quieres modificarle algo, para que esté ordenado.
En la plantilla mínima sería encima de ésto:
/* Outer-Wrapper
Y si tienes alguna duda, puedes ponerlo encima de ]]></b:skin> así seguro que no te equivocas.
¡Bien! Decidido donde vas a colocar las definiciones añades ésto:
/* El menu */
ul.menu {
background-color: #A9A9A9;
float: left;
list-style-type: none;
margin: 0;
padding: 0 20px;
}
/* cada item de la lista */
ul.menu li {
border: 2px solid #A9A9A9;
display: block;
float: left;
height: 30px;
margin: 0;
padding: 0;
position: relative;
}
/* cada item de la lista es un enlace */
ul.menu li a {
color: #FFF;
display: block;
float: left;
font-weight: bold;
line-height: 18px;
padding: 6px 15px 5px;
text-decoration: none;
}
/* efecto hover sobre los enlaces */
ul.menu li:hover {
background-color: #000;
border:2px solid #A9A9A9;
}
Puedes modificar los colores y los bordes a tu gusto, incluso crear variables para cada color, de esta forma lo podrías modificar desde fuentes y colores.
Una vez añadido este código Vista previa para asegurarte de que el blog carga bien, y ya puedes, si aún no lo había hecho, añadir el gadget con los enlaces.
Si vas a ponerlo bajo la cabecera, quizá debas modificar el código del header en el HTML para que admita más de un gadget, tal como explico en esta entrada.
P.S. Editado: Mi agradecimiento a Vagabundia, que con una de sus entradas, donde explica como hacer un menú, me ha ayudado a comprender mejor el tema, (este código pertenece a su entrada), y mis disculpas por habérseme olvidado mencionarlo cuando hice la entrada.
- ▲▼Crear Spoilers en cualquier parte del foro
A continuación les pondré un codigo con el cual podrán poner un spoiler en cualquier parte de su foro (que acepte html).
Para ponerlo en un modulo se van a:
Panel de Administración - módulos - portal y widgets - gestión del portal - estructura - crear un modulo personalizado.
Para el mensaje del índice:
Panel - Visualización - Índice - General - Mensaje del Índice.
Este es el codigo:
<dl class="codebox" style="cursor: pointer;" onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none');">
<dt>Spoiler:</dt><dd><div style="display:none;"><br />lo que va entre el spoiler</div></dd></dl>
Donde dice spoiler (verde) pueden ponerle el nombre que quieran (por ej: ocultado, click para ver, etc.) Y lo que esta en naranja es lo que va a ir entre el spoiler, lo que ustedes van a poner.
:alert:Atención: Esto solo funciona bien para la versión PhpBB3, para la versión PhpBB2 se debe colocar este codigo entre su hoja de estilos para que funcione bien:
Panel - Visualización - los estilos - imágenes y colores - colores - CSS stylesheet.
dl.codebox {
padding: 3px;
background-color: #FFFFFF;
border: 1px solid #C9D2D8;
font-size: 1em;
color: #000000;
}
dl.codebox dt {
text-transform: uppercase;
border-bottom: 1px solid #CCCCCC;
margin-bottom: 3px;
font-size: 0.8em;
font-weight: bold;
display: block;
color: #000000;
}
Si no se quieren complicar tanto, este spoiler quedara normal:
Spoiler:
Pero si lo quieren personalizar más para las dos versiones, deben colocar el codigo anteriormente dado, en su CSS, en el cual podrán modificar lo siguiente (lo definiré por colores):
Negro: Esto cambiara el color de fondo del cuadro del spoiler, pueden utilizar cualquier color en hexadecimal o en ingles.
Violeta: Esto es para la propiedad del borde, el ancho (1px), el tipo de borde (solid) y el color del borde (#C9D2D8). En el ancho pueden poner el numero que ustedes quieran pero se recomienda dejarlo así, el borde lo pueden cambiar por cualquier otro (por ejemplo dashed, que es punteado), y por ultimo el color del borde.
Rojo: Esto será el color del texto, procuren hacer una buena combinación con el de fondo.
- ▲▼ Mi blog no tiene comentarios
No es la primera vez que alguien me escribe diciendo algo así.
Cuando ésto sucede, suelo entrar a ver el blog en cuestión y veo que, efectivamente, no hay comentarios.
Pero no por que nadie ha dejado ninguno, sinó que no se puede.
No se ve por ningún sitio, ni al pie de la entrada, ni al principio de la misma, la opción de hacerlo.
¿Que sucede?
Muy sencillo: No está marcada la opción en el gadget de las entradas.
Para que la gente pueda dejar comentarios en un blog hay dos cosas muy importantes que teneis que mirar: Configuración/Comentarios y Editar del gadget de entradas.
La primera opción la veis en la pestaña Configuración.
Una de las opciones es Comentarios. Si pinchas en ella, verás que tienes la opción de escoger quien podrá dejar comentarios en tu blog, si quieres que tengan que verificar una palabra, o si vas a querer moderarlos, o sea, que tengas que aprobarlos para que salgan publicados, entre otras cosas.
Por defecto viene ya configurado de forma que no se puedan dejar comentarios anónimos.
La segunda opción la encuentras en Diseño.
Cuando entras a personalizar el blog añadiéndole elementos, puedes ver que en cada uno de los gadgets, o elementos que componen el blog, hay un Editar abajo a la derecha.
Incluso en las entradas.
Pinchando ahí, en ese Editar, se abre el gadget de las entradas así:
Fíjate que una de las opciones que están marcadas en esta imagen es la que pone 5 comentarios.
El 5 está fijo, ya que es solo un número que está ahí como ejemplo. Si una entrada no tiene ningún comentario se vería un 0, si tiene uno un 1, si tiene dos un 2, etc.
La palabra comentarios está en un recuadro para que puedas poner qué palabra quieres que se vea ahí.
Puedes poner lo que quieras. Por ejemplo, opiniones, reacciones, besitos, abrazos, lo que quieras.
Cuestión aparte es que la frase o palabra cambie dependiendo del número de comentarios. Para eso has de modificar el código de la plantilla como está explicado aquí.
Pero, tiene que estar marcado para que se vea, ya que es el enlace para que quien entre en tu blog pueda dejar su opinión, comentario o reacción a lo que hayas escrito.
También es posible que esto esté marcado, que se vea el enlace, pero que al pinchar no se abra nada. Ni una ventana flotante, ni otra página, ni un recuadro al final.
Esto sucede en los blogs abiertos recientemente a los que se ha colocado una plantilla modificada.
Hace poco, blogger implantó una opción a la que en principio solo se podía acceder a través de blogger in draft: Los comentarios en una ventanita incrustada al pie de la entrada.
Pero pasado el periodo de prueba, esta opción está ya al alcance de todos y es la que viene seleccionada por defecto en los blogs que se abren ahora.
El problema es que es incompatible con algunas modificaciones de las que hacemos.
En los blogs abiertos antes de la creación de esta forma de comentar, si las plantillas han sido modificadas añadiéndoles otra columna o personalizando la frase de enlace de los comentarios a través del código, y se selecciona la opción de comentarios en ventana incrustada al pie de las entradas, tampoco funciona.
- ▲▼ Meny, un menú deslizante que voltea al blog en 3D
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;
}
Luego busca la etiqueta <body> o esta línea:
<body expr:class='"loading" + data:blog.mobileClass'>
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();};}
var meny = Meny.create({
menuElement: document.querySelector( '.meny' ),
contentsElement: document.querySelector( '.contents' ),
position: Meny.getQuery().p || 'left',
height: 200,
width: 260,
threshold: 40
});
if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
var contents = document.querySelector( '.contents' );
contents.style.padding = '0px';
contents.innerHTML = '<div class="cover"></div><iframe src="'+ Meny.getQuery().u +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
}
//]]>
</script>
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ú.
- ▲▼ Cómo dividir el widget de etiquetas en dos columnas
Cuando tienes muchas etiquetas y una barra lateral lo suficientemente ancha, siempre tienes la opción de dividir el widget de etiquetas en dos o más, por una cosa de orden y estética.
Hace un tiempo, Cebong mostraba una forma de crear un widget de etiquetas multicolumnas añadiendo una nueva sección en el footer o la sidebar.
En realidad, es mucho más simple de lo que parece: no es otra cosa que determinar anchos (%) para las listas de esa sección. En otras palabras, puedes hacer lo mismo si ya añadiste un widget de etiquetas a tu sidebar, pero con un código CSS simplificado a ser añadido antes de ]]></b:skin>:
#Label1 ul li{
float: left;
width: 45%;
}
A considerar:
El ancho (width) va a depender de cuántas columnas quiera incluir, y no siempre es exacto, porque el widget de etiquetas va a heredar el padding de las listas de la sidebar (.sidebar ul li o similar). En este caso, 45% está bien para dos columnas; para 3 columnas, quizá ande bien con 30 ó 33%.
El selector #Label1, puede variar. Por defecto, el widget de etiquetas (si tienes sólo uno), debiera ser Label1; pero, si tienes dos, tendrías un widget de ID Label1, y otro Label2.
Puedes dividir cualquier widget de lista (ejemplo, lista de enlaces) de la misma forma, averiguando su ID.
sidebar-blogger
&  |
&  |
0 comentarios:
Publicar un comentario