| Para poner borde a imágenes de una entrada utilizamos, dependiendo de la ubicación, los siguientes códigos:
Códigos de colores HTML aquí. |
| Twittear |
Mostrando entradas con la etiqueta blogger. Mostrar todas las entradas
Mostrando entradas con la etiqueta blogger. Mostrar todas las entradas
28.11.20
Poner borde a imágenes de una entrada en Blogger
9.4.15
Poner borde a imágenes de una entrada en Blogger
| Para poner borde a imágenes de una entrada utilizamos, dependiendo de la ubicación, los siguientes códigos:
Códigos de colores HTML aquí. |
| Twittear |
26.2.14
Numerar los comentarios en blogger
| Para numerar los comentarios: 1. vamos a:
2. Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:
3. Dentro del anterior código agregamos la línea resaltada. 4. Un poco más abajo del anterior código localizamos el siguiente:
5. A continuación pegamos éste:
6. Guardar plantilla.
|
21.11.13
Menús para Blogger
Presentamos algunos menús para poner en blogs de Blogger. Debajo de cada imagen está el enlace para ir al tutorial correspondiente. Este menú se presenta a la vista como si estuviera envolviendo el blog. Queda bien en blogs que tienen bien definido el borde del Outer Wrapper (envoltura principal del blog).  Menú horizontal con efecto card-shuffle, el cual hace que cuando se ingresa a la página que lo contiene los iconos se deslicen hacia adentro; luego, cuando se pasa el cursor por cada uno de los elementos, los íconos se deslizan desde la parte superior hacia afuera.  En este menú horizontal cada elemento contiene un submenú vertical que se despliega, con un efecto relieve, proporcionado por la imagen gradiente utilizada como fondo.  Cada elemento del menú despliega submenús con un efecto acordeón.  Éste es un menú de múltiples niveles.  Este menú es una barra navegable cuyos elementos cambian de color al poner el cursor sobre los mismos.  Este menú desplegable tiene la ventaja que, conteniendo un buen número de enlaces, ocupa poco espacio.   Este menú en diapositiva tiene un interesante efecto slide: sus elementos se ocultan al ingresar en la página, permaneciendo semiescondidos, mostrándose en su totalidad cuando se pasa el cursor por las partes visibles de los mismos. Ir al tutorial
|
2.11.13
Poner borde a las imágenes de las entradas en Blogger
Con un sencillo código podemos implementar bordes uniformes para todas las imágenes puestas en las entradas de un blog. Vamos a Editar HTML:
Localizamos, poniéndola dentro del rectángulo de búsqueda (search), la siguiente etiqueta:
...e, inmediatamente antes, pegamos el siguiete código:
Con el anterior código lograremos que todas las imágenes que pongamos en las entradas del blog adquieran un borde con las características indicadas en el mismo código. Veamos:
Veamos bordes con cada uno de los estilos arriba indicados, y sus respectivos códigos, puestos a la siguiente imagen (en cada uno se le ha dado un ancho apropiado para poder apreciar claramente cada estilo):
| ||||||||||||||||||||||||||||||||||||||
5.10.13
Error 404 en Blogger, identificar, personalizar, solucionar
| El error 404 se produce cuando los robots de los buscadores no pueden rastrear una URL ya que conduce a una entrada que no existe porque:
Google dice: "Por lo general, los errores 404 no afectan a la posición que ocupa un sitio en los resultados de búsqueda, pero se pueden utilizar para mejorar la experiencia del usuario". No afectan la posición de un blog, en el caso de Blogger, pero sí el número de sus visitantes. ¿Por qué los errores 404 pueden disminuír el número de visitantes de un blog? Porque si un usuario accede a un blog en busca de una entrada que no existe se va a encontar con este mensaje:
Esta visita resulta fugaz e inútil, y muy posiblemente el visitante abandone el blog y no vuelva. Si hubiera encontrado lo que buscaba sería un muy probable visitante para otras oportunidades. Personalizar el mensaje de error El mensaje antes indicado no da ninguna alternativa al visitante. Podemos personalizarlo cambiándolo por otro más amable, y dándole, al usuario, la opción de ir a la página principal del blog. Para personalizar el mensaje de error vamos a:
En el área de texto escribimos el siguiente mensaje seguido del código que redirecciona a la página principal del blog:
El mensaje lo podemos cambiar. En el código 5000 corresponde a milécimas de segundo (cinco segundos); podemos modificar el tiempo de espera. Veamos en funcionamiento la anterior personalización haciendo click sobre la siguiente URL correspondiente a una entrada inexistente en un blog y que redirecciona a la página principal del mismo: Prevenir errores 404 Los errores 404 prevenibles son los producidos por entradas eliminadas, y la forma obvia de prevenirlos es no eliminando entradas; es más conveniente redireccionarlas, para que las URLs de las mismas no lleven a ellas sino, por ejemplo, a la página principal del blog o a otra entrada. Entonces, si queremos "desaparecer" una entrada de nuestro blog no la eliminamos sino que ponemos en el editor HTML de la misma el siguiente código:
De esta manera si alguien, desde un buscador, hace click en el enlace a la entrada que no queremos mostrar, será llevado, no a esa entrada, sino a la que la hemos redireccionado con el código anterior. Identificar errores 404 Nuestro blog puede tener errores 404 sin que nosotros lo sepamos. Para saber si existen esos errores y poder identificarlos accedemos, con nuestra cuenta de Google a Herramientas para webmasters de Google, añadimos nuestro blog haciendo click en la pestaña "Añadir un sitio" de la parte superior derecha y seguimos las instrucciones allí indicadas. Añadido el blog: 1. hacemos click sobre la imagen del mismo o sobre el enlace:  2. En el menú que aparece a la izquierda desplegamos el submenú "Rastreo" con un click sobre el mismo, a continuación click sobre "Errores de rastreo" y, por último, click sobre el cuadro que muestra el número de errores "No se encuentra", que son los errores 404.
3. En la parte inferior aparecerán, en un cuadro estadístico y en una lista, los errores 404 detectados en los últimos 90 días. 4. Un click sobre cada URL de la lista nos mostrará un cuadro con la URL de la entrada que no pudo ser rastreada puesto que no existe, y los detalles del error. Solucionar errores 404 Los errores 404, producidos por entradas que han sido eliminadas, se pueden solucionar así: Identificadas las URLs causantes de los errores, como ya se explicó, las reconstruímos creando entradas con URLs idénticas. Pongamos como ejemplo una URL como la siguiente:
Esta URL correspondería a una entrada creada en el segundo mes (02) de 2013. Para reconstruír esa URL creamos una entrada con el título idéntico al que aparece en la misma reemplazando, obviamente, cada guión por un espacio. En cuanto a la fecha Blogger pone, por defecto, la del día en que se crea la entrada, entonces para que quede con la fecha que necesitamos la programamos en el menú "Configuración de la entrada" que está en el lado derecho del editor de la entrada, en Programar ► Establecer hora y fecha; allí modificamos el mes y el año, si es necesario; la hora y el día no afectan la URL. En el editor HTML de la entrada ponemos, únicamente, el siguiente código:
Con lo anterior lograremos que cuando un usuario acceda a nuestro blog desde un buscador, a través de la URL de esa entrada que había sido eliminada, pero que reconstruímos, sea redireccionado a la página principal del blog, o a la entrada que hayamos escogido. |
| Twittear |
26.9.13
"Position: absolute" y "Position: relative" en Blogger
| Veamos la diferencia que hay entre los valores "relative" y "absolute" aplicados a la propiedad "position", para posicionar elementos dentro de un blog: Position: relative Como su nombre los indica (relativo) posiciona un elemento, dentro del blog, en relación con los demás elementos del mismo, respetando los parámetros indicados en la plantilla. Position: absolute Como su nombre lo indica (absoluto) posiciona un elemento, dentro del blog, de manera absoluta es decir, sin tener en cuenta relación alguna con los demás elementos del blog, fuera del contexto del mismo. Ejemplo Vamos a mover la cabecera (header) del blog, poniéndole márgenes superior e izquierdo de 50 pixeles cada uno. La posición original de la cabecera es ésta: |
| Para darle una posición relativa pegamos en la plantilla, dentro de la sección CSS correspondiente a la cabecera, el siguiente código:
La cabecera quedará así: |
Para darle una posición absoluta utilizamos el mismo código anterior, pero cambiando el valor |
Si le ponemos a la cabecera un margen que supere al ancho del blog, con la posicion absoluta se saldrá del mismo. En el ejemplo le vamos a poner un margen izquierdo de 960 px utilizando este código:
Así se verá la cabecera: |
Y si le ponemos ese mismo margen, pero con la posición relativa, la cabecera no se verá, y desplazará el contenido del blog hacia abajo ya que las letras del título del blog formarán, una debajo de otra, una línea vertical.
|
13.6.13
Enlaces dentro de una entrada
| Cuando el contenido de una entrada hace necesario, por su extensión, dividirlo en varias partes, es conveniente crear enlaces que lleven, desde un índice, a cada una de las partes en particular. Estos enlaces se denominan marcadores, y no solamente se utilizan en índices, aquí lo hacemos a manera de ejemplo; también se pueden utilizar, en entradas de contenido muy extenso, para facilitar al usuario ir a cualquier parte de la misma de forma rápida. Veamos la explicación con un ejemplo: En una entrada se va a tratar un artículo sobre informática, considerando los siguientes aspectos: definición, etimología, orígenes y funciones. En el índice ponemos los títulos de cada una de las partes en las que hemos dividido el contenido de la entrada: Índice
Enlace origen Cada título del índice lo ponemos, en el editor HTML de la entrada, al crear la misma, dentro de un enlace que apunte a la parte de la entrada correspondiente (destino del enlace), así:
Destino del enlace Cada uno de los títulos de cada una de las partes en que hemos dividido el contenido de la entrada, en el editor HTML de la misma, lo ponemos dentro de un código destino, así:
Enlace "Ir al principio" Por último podemos utilizar, al final de cada parte en que dividimos la entrada, o al final de la misma, el siguiente código, que nos genera un enlace para volver al principio de la entrada:
Veamos los enlaces en funcionamiento: 
|
4.4.13
Añadir gadgets en cabecera de Blogger
| La cabecera de Blogger es una sección que está limitada a un solo gadget. Esto impide que podamos agregar un gadget dentro de ella, encima del título del blog, para poner, por ejemplo, un menú. En este tutorial veremos cómo habilitar la opción Añadir un gadget dentro de la cabecera. Si vamos a:
...veremos la sección correspondiente a la cabecera, sin la opción Añadir un gadget, así:  Para habilitar la opción Añadir un gadget: 1.- Vamos a:
2.- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:
El anterior código pone a esta sección las siguientes limitaciones:
4.- Guardar plantilla. Eliminadas las limitaciones habremos habilitado la opción Añadir un gadget. 5.- Vamos a:
...y veremos la sección de la cabecera, así:  Podremos agregar, ahora sí, un gadget dentro de la cabecera y encima del título. Esa zona es muy apropiada para poner un menú. Así se verá un gadget agregado encima del título del blog, dentro de la cabecera, habilitando para ésta la opción Añadir un gadget:
Añadir un gadget debajo del título Para añadir un gadget dentro de la cabecera, debajo del título, lo añadimos como ya se explicó, luego vamos a Diseño ► Diseño:  ...y lo "arrastramos" debajo del título:  De esta manera el gadget quedará debajo del título y al lado izquierdo. Para darle otra posición, por ejemplo en el centro o al lado derecho, vamos a Editar HTML, localizamos esta etiqueta
|
28.3.13
Ocultar o eliminar sidebar de Blogger
| Ocultar sidebar en plantillas antiguas Para ocultar la sidebar de nuestro blog de blogger: 1.- Vamos a Editar HTML:
2.- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:
3.- Agregamos las líneas resaltadas:
4.- Guardamos los cambios. Eliminar sidebar en plantillas antiguas Si lo que queremos es eliminar la sidebar: 1.- Eliminamos el código indicado en el punto 2, del párrafo anterior. 2.- Localizamos y eliminamos el siguiente código:
Eliminando la sidebar obviamente quedará vacío el espacio que ocupaba. Para llenarlo tendremos que aumentar el ancho del cuerpo de las entradas. Para eso localizamos el siguiente código:
...y en width: 630px aumentamos el número de pixeles hasta lograr el ancho del blog.3.- Guardamos la plantilla. Eliminar sidebar en plantillas nuevas Para eliminar la sidebar en plantillas nuevas: 1.- Eliminamos los gadgets que tengamos en la sidebar. 2.- Vamos a Editar HTML:
3.- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:
4.- en la última línea cambiamos 310px por 0px5.- Guardamos plantilla. Tema relacionado:Ocultar, mostrar sidebar
|
21.12.12
Cambiar color de los títulos de los posts de Blogger
| Algunas plantillas de Blogger, como la Simple y la Picture Window, no habilitan, en el Diseñador de plantillas, la opción para cambiar el color de los títulos de los posts o entradas:
|
Otras plantillas, como la Travel Awesome, sí tienen esa opción: |
| Podemos, en las plantillas que no la tienen, habilitar esa opción. Habilitar la opción para cambiar el color de los títulos de las entradas Aplicando el sentido común podemos deducir que si adaptamos, en la plantilla de un blog que no tiene la opción para cambiar el color de los títulos de las entradas, los códigos que en otro blog sí habilitan esa opción, lograremos que, en el primero, también la habiliten. Es lo que haremos. Vamos a utilizar la plantilla Simple (que no tiene la opción), y la plantilla Travel Awesome (que sí tiene la opción). Para ambos casos vamos a Editar HTML:
Localizamos, en las dos plantillas, las definiciones de las variables correspondientes a los títulos de las entradas, en la sección de las variables, poniendo dentro del rectángulo de búsqueda (search) la primera línea del siguiente código:
y las utilizaciones de las mismas, en la sección de los posts, poniendo dentro del rectángulo de búsqueda (search) la primera línea del siguiente código:
Los códigos correspondientes son:
Para habilitar la opción que permite modificar los colores de los títulos de las entradas, en el blog de la plantilla Simple:
|
| Twittear |
23.7.12
Nueva Interfaz de Blogger
| Escritorio o Pánel de control En la Nueva Interfaz de Blogger el escritorio o pánel de control, que es en donde empezamos acciones al ingresar en nuestra cuenta, es así:  En el escritorio encontramos la lista de todos nuestros blogs y las opciones para crear uno nuevo, y ejercer acciones sobre los ya creados. Estas opciones son: En la parte izquierda están las opciones para:
Debajo de la lista de nuestros blogs encontramos la Lista de lectura, con los blogs que seguimos y una relación de sus entradas más recientes. Crear un blog Para crear un blog con la Nueva Interfaz: 1.- Click en la pestaña Nuevo blog del escritorio, y tendremos:  2.- Ponemos el título y la dirección del blog. 3.- Seleccionamos una de las plantillas presentadas (posteriormente podremos cambiarla). 4.- Click en Crear blog y tendremos:  5.- Click en Empezar a crear una entrada y accederemos al Editor de entradas Creación de entradas Para crear una entrada, estando en un blog específico, se procede, como con la interfaz anterior, estando en la página principal, con un click sobre Nueva entrada, de la barra superior. Y desde el escritorio, con un click sobre el ícono de lápiz, a la derecha del blog en el cual vamos a crear la entrada. De esta forma accederemos al editor de entradas:  En la parte superior del editor están las opciones para Publicar, Guardar, Vista previa y Cerrar, y, a la derecha el menú para configurar la entrada: 
|
21.7.12
Personalizar sidebar Blogger
| Una manera de personalizar la sidebar es poniéndole un color de fondo, y asignando algunas propiedades a ésta y los gadgets contenidos en la misma. Plantillas antiguas 1.- Utilizando como referencia la plantilla Mínima, vamos a Editar HTML:
2.- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search, una línea del mismo:
3.- Le agregamos las siguientes líneas:
0px cambiamos el 0 por 1, por ejemplo. Las X las cambiamos por los números de los códigos de los colores correspondientes. Si queremos la sidebar sin borde agregamos únicamente la última línea (color del fondo). 4.- Identificamos los gadgets que tenemos en la sidebar (ver: Personalización individual) y pegamos, antes de la etiqueta ]]></b:skin> , los códigos con las propiedades que asignaremos a cada uno de ellos y que, en el caso del ejemplo utilizado para la demo, son los siguientes:
Nota: Es posible que los caracteres de los textos de la sidebar no sean bien notorios porque el color, por defecto de los mismos, sea similar al que le dimos al fondo de la sidebar. En ese caso, como ocurrió con el ejemplo utilizado para la demo, tendremos que cambiar, con el Diseñador de plantillas, el color del texto, el de los enlaces y el de los títulos de la sidebar, por uno que contraste con el que le dimos al fondo. 5.- Vista previa ► Guardar plantilla. En este tutorial se tratan diferentes formas de personalizar los gadgets de la sidebar: Personalizar gadgets. Plantillas nuevas 1.- Utilizando como referencia la plantilla Simple, vamos a Editar HTML:
2.- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:
]]></b:skin> , los códigos con las propiedades que asignaremos a cada uno de ellos y que, en el caso del ejemplo que veremos más adelante, son los siguientes:
dashed por solid
|
12.7.12
Quitar la fecha de una entrada de Blogger
| Quitar la fecha de una entrada del blog y cambiar la fecha, también de una entrada, son dos opciones que, combinadas, nos pueden permitir hacer, de una entrada, la portada o página de inicio de nuestro blog. En Blogger contamos con la segunda opción (ver: Cambiar el orden de las entradas), mas no con la primera. Quitar la fecha de una entrada Cambiar la fecha de una entrada y después quitarla, nos sirve para hacer de una entrada la portada o página de inicio de nuestro blog. Cambiamos la fecha por una muy posterior (ejemplo: enero 1 de 2020). Esa entrada seguirá apareciendo en primer lugar hasta que llegue esa fecha. Pero en una página de inicio o de presentación no se verá muy bien una post-fecha. Entonces lo mejor es eliminarla sin afectar las fechas de las otras entradas. Blogger nos da la opción, en la configuración de las entradas, de eliminar todas las fechas, no la de una sola entrada. Entonces veamos: Para poder quitar u ocultar la fecha de una sola entrada tendremos que individualizar las fechas de las entradas del blog, así: 1.- Vamos a Editar HTML:
3.- Esta línea es la que generaliza las características de las fechas de todas las entradas (si la encontramos dos veces tenemos en cuenta la segunda). Para que esas características sean individuales cambiamos esa línea, por ésta:
4.- teniendo individualizadas las características de las fechas, identificamos la correspondiente a la entrada en la que la vamos a ocultar ¿Cómo la identificamos? asignándole el número de identificación de la entrada (cada una de las entradas tiene un número de identificación). Ese número de identificación lo encontramos asÍ: Nos ubicamos en Edición de la entrada correspondiente y observamos la barra de direcciones, veremos ahí dos series de números; la identificación de la entrada es la segunda serie:  Antes del texto de la entrada, en la Edición de HTML de la misma, pegamos esta línea CSS:
|
| Twittear |
Suscribirse a:
Entradas
(
Atom
)
