- Las imágenes de las flechitas (preferentemente en png, que admite transparencia) pueden tener diversas medidas: el código se encarga de adaptarlas proporcionalmente a 55 px o 50 px de ancho, según se trate de la versión para web o de la versión para móvil, respectivamente. Opcional: cambiar dichos parámetros a gusto del consumidor.
- Para reemplazar las imágenes por omisión, simplemente habrá que cambiar las URL.
- Su posición depende, en porcentaje, del ancho en píxeles del blog (se redimensiona proporcionalmente en la práctica, conforme el dispositivo). Están situadas abajo; a la izquierda la flecha que baja (a 560 px o 150 px —según sea versión web o móvil, respectivamente— a la izquierda desde el centro de la pantalla, indicado por «margin-left:50%») y a la derecha, la que sube (a 560 px o 150 px —según sea versión web o móvil, respectivamente— a la derecha desde el centro de la pantalla, indicado por «margin-right:50%»). En todos los casos, a 5 px del borde inferior.
- En la versión web, este blog tiene una columna central y dos laterales, con un ancho total de 1000 px; entonces, independientemente del ancho de la pantalla, cada flechita se sitúa a 60 px [es decir: $(1000\;px/2)-560\;px=-60\;px$, incluida cada flechita] hacia izquierda o derecha de los bordes del blog: de ahí la importancia de trabajar con porcentajes. Modificar lo que sea necesario.
- En la versión móvil, se toma como parámetro la columna central (que en este blog tiene 548 px); siguiendo el mismo derrotero que para la versión web, las flechitas fueron diseñadas para situarse a 150 px desde el centro de la pantalla, incluida cada flechita [nos quedan, libres, $(548\;px/2)-150\;px=124\;px$ a cada lado de las flechitas]. Modificar lo que sea necesario.
- En la versión web se emplearon cuatro imágenes: dos para la flecha que baja y otras dos para la que sube. Ello se debe a que están presentes los efectos onmouseover y onmouseout, que permiten que se vea otra imagen (en este caso, cambian de color las huellitas) cuando el cursor del ratón pasa encima de la flecha («onmouseover»), se haga o no clic sobre ella; y vuelve a la primera imagen al salir de allí dicho cursor (onmouseout). Quitar las dos líneas de código, incluyendo las URL, si no se desea ese efecto. (Para la versión móvil no se ha puesto, dado que el efecto solo ocurre si se apoya el dedo sobre el táctil —debido a lo cual, no se aprecia—).
- Los datos de las medidas del blog, en píxeles, pueden verse en la interfaz de Blogger accediendo a Tema > Personalizar > Ajustar ancho.
Una vez que tengamos los códigos adaptados según nuestras preferencias (podremos modificarlos luego, de ser necesario), procederemos a generar los artilugios.
Para ello nos vamos a Diseño > (footer-1) Añadir un gadget > HTML/JavaScript.
Nos aparecerá una ventana emergente: Configurar HTML/JavaScript.
Si empezamos por la versión web, en Título le colocaremos un nombre (huellitas, en este blog) y copiaremos y pegaremos en Contenido el código para la web. Guardar.
Agregamos otro gadget (artilugio) más, esta vez para la versión móvil. En Título le colocaremos otro nombre (flechitas, en este blog) y copiaremos y pegaremos en Contenido el código para el móvil. Guardar.
(Opcional: mover ambos artilugios al final de la plantilla, al último footer —por una cuestión de practicidad—).
Si no lo especificamos, en la versión web se ve TODO el contenido; en la móvil, solo el contenido que está en la columna principal (la central, en este blog).
Habiendo llegado a este punto, en la versión web deberían aparecer las flechitas de ambas versiones: la web y la móvil; en la móvil, solo las que le corresponden (porque las flechitas de la versión web están por fuera de la columna principal).
Para corregir esto, vamos a Tema > (desplegar menú haciendo clic en la flechita que está a la derecha de Personalizar) > Editar HTML.
Una vez allí, hacemos clic en cualquier lugar de la plantilla y presionamos Control + F. En la casilla de búsqueda escribimos el nombre que le pusimos al artilugio para móvil (flechitas, en este blog). Presionamos Intro.
El buscador nos llevará a una línea (donde quedará resaltado el nombre que hemos buscado) similar a esta:
Para que las flechitas del móvil no se vean en la versión web, agregamos el atributo mobile con el valor only (entrecomillado). La línea nos quedaría así:
Guardar (clic en el iconito del disquete —dispositivo en desuso que décadas atrás cumplía las funciones de memoria USB— que está arriba a la derecha).
(Por practicidad, dejamos abierta la plantilla: todavía nos falta modificar un par de detalles).
Si nos fijamos ahora, cada versión tiene solo sus respectivas flechitas.
Y el par de detalles que falta modificar es que… ¡aparecen los títulos de los artilugios, tanto en la versión web como en la móvil!
Para solucionar este inconveniente, vamos nuevamente a la plantilla, donde la habíamos dejado en el punto anterior.
Luego de la línea del artilugio para móvil (flechitas), ya modificada, está el código del artilugio. Seguimos bajando y, luego de que dicho código termina, encontramos estas líneas:
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
Lo resaltado en negritas y que termina con una «flecha» (que en realidad está compuesta por dos guiones seguidos del carácter mayor que) roja es un comentario, avisando que el código siguiente (un condicional) se ejecutará solo si el título no está vacío. Como el artilugio tiene título, se verá.
Y acá tenemos dos opciones. O borramos el condicional (las tres líneas que siguen después de la «flecha» roja) o lo ocultamos. (También hay una tercera opción: no colocarle título al artilugio; pero ello dificulta su ubicación en la plantilla).
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if> -->
Vamos a ocultar el condicional… Para ello, lo integramos al comentario inicial, moviendo la «flecha» en rojo al final. El comentario, resaltado en negritas, incluyendo la «flecha» roja, comprende ahora el comentario inicial y el condicional. Guardamos.
Repetimos lo mismo para el otro artilugio, el de la web… Lo buscamos por su nombre (huellitas, para este blog), seguimos hasta abajo, donde ubicamos las líneas con el comentario y el condicional, y modificamos de la misma manera. Guardamos.
Y hemos terminado. Resta hacer las verificaciones de que todo funciona bien y, en caso contrario, realizar los ajustes pertinentes.
Esta bloguera aún recuerda cuando hubo terminado el código completito. Se pasó un rato largo probando las flechitas de arriba hacia abajo, de abajo hacia arriba… en distintos dispositivos… Hasta que quedó plenamente convencida de que era así como anhelaba que quedara. Fue una satisfacción enorme.
Y de eso se trata la programación… Aunque sólo sean unas pocas líneas, las mismas cumplen un propósito: llevar a buen puerto nuestros sueños…
- Martes Neológico, gadget m., 9/4/2019.
- Compartidísimo, Personalizar la Plantilla Móvil de Blogger. Lo que Necesitas Saber, 3/6/2015.
- Ciudad Blogger, Cambiar imagen al pasar el mouse, 24/9/2009.
- Ciudad Blogger, Ocultar el nombre de los gadgets, 15/8/2009.
Deja tu opinión o consulta:
Puedes utilizar código $\mathrm{\LaTeX}$ para insertar fórmulas en los comentarios. Simplemente tendrás que encerrar el código entre signos $\boldsymbol{\$}$.