Mostrando entradas con la etiqueta entrada. Mostrar todas las entradas
Mostrando entradas con la etiqueta entrada. Mostrar todas las entradas

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
  1. Definición
  2. Etimología
  3. Orígenes
  4. Funciones

 

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í:

<a href="#Definición" title="Definición">Definición</a>
<a href="#Etimología" title="Etimología">Etimología</a>
<a href="#Orígenes" title="Orígenes">Orígenes</a>
<a href="#Funciones" title="Funciones">Funciones</a>

  • El signo numeral (#) hace que el enlace apunte a un elemento dentro de la misma entrada. Sin este signo el enlace no encontrará el elemento ya que lo buscará por fuera de la entrada, y aparecerá un mensaje indicando que esa página no existe.
  • El atributo title hace que aparezca un texto con el título correspondiente al poner el cursor sobre cada uno de ellos (es opcional).
  • Cada uno de los títulos con este color es el texto que aparece en el índice.

 

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í:

<a name="Definición"> <h3>Definición</h3></a>
<a name="Etimología"> <h3>Etimología</h3></a>
<a name="Orígenes"> <h3>Orígenes</h3></a>
<a name="Funciones"> <h3>Funciones</h3></a>

  • El atributo name asigna un nombre al destino del enlace para que éste lo pueda identificar.
  • Las etiquetas <h3>...</h3> dan a los títulos el formato de tales (según el formato por defecto de los títulos en cada blog, pueden ser <h1>...</h1> , <h2>...</h2> o <h3>...</h3>).
  • Cada uno de los Textos con este color es el título de cada una de las partes en que hemos dividido el contenido de la entrada.

 

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:

<a href="#"title="Ir al principio" >Ir al principio</a>

  • El texto Ir al principio podemos cambiarlo por "Ir al inicio" "Regresar" "Ir arriba" etc.
  • El atributo title hace que aparezca el texto Ir al principio al poner el cursor sobre el enlace.

 

Veamos los enlaces en funcionamiento:

Enlaces dentro de una entrada

26.1.13

Esquina doblada para entradas de Blogger



Con un sencillo código CSS podemos poner un fondo a las entradas del blog, con el efecto de esquina doblada.

Vamos a Editar HTML:

Diseño Editar HTML Click dentro del editor Ctrl+f

Localizamos la siguiente etiqueta poniéndola dentro del cuadro de búsqueda (Search):

]]></b:skin>

...y antes de la misma pegamos el siguiente código:

.post {
   background: #f6d8ce;
   margin: 2em auto;
   overflow: hidden;
   padding: 1em 1.5em;
   position: relative;
   width: 560px;
}
.post:before {
   content:"";
   position: absolute;
   top: 0;
   right: 0;
   border-width: 0 50px 50px 0;
   border-style: solid;
   border-color: #ffffff #ffffff #ff4000;
   -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
   -moz-box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
   box-shadow:0 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.2);
}

Efecto esquina doblada
Tal y como está el código las entradas se verán como la entrada de la Demo. Las propiedades resaltadas en rojo las debemos modificar para adaptarlas al diseño de nuestro blog:
  • background: #f6d8ce;: Es el color del fondo de las entradas. Cambiamos el código hexadecimal del color por el nuestro.
  • width: 560px;: Es el ancho del fondo de la entrada. Debemos poner un ancho que no exceda al ancho del cuerpo de las entradas.
  • border-width: 0 50px 50px 0;: Corresponde al ancho y al alto de la pestaña o esquina doblada. Podemos modificar las dimensiones (50px 50px), pero conservando la igualdad.
  • border-color: #ffffff #ffffff #ff4000;: Corresponde a:
    • #ffffff #ffffff: Es el color del borde o espacio que deja libre la esquina doblada. Se pone dos veces para lograr el efecto de la "doblez". Este color debe ser igual al del fondo del blog, ya que si se pone otro se verá el espacio que deja la esquina doblada.
    • #ff4000: Es el color de la pestaña o cara visible de la esquina doblada. Se recomienda poner un color del mismo tono de el del fondo de las entradas, pero más oscuro.
Nota: Este efecto no funciona con Internet Explorer


24.1.13

Cambiar el orden de las entradas de Blogger


Como sabemos, Blogger pone por defecto, de primera, la entrada más recientemente publicada y, en orden cronológiamente descendente, las demás entradas. Pero al mismo tiempo nos da la posibilidad de cambiar esa fecha.

Así, si queremos, por ejemplo, que una entrada publicada en una fecha anterior a la fecha de la entrada más reciente, aparezca en el primer lugar de la página principal, pues sencillamente le cambiamos la fecha en que la publicamos por una fecha posterior a la fecha de la entrada más recientemente publicada, así:

Vamos a:

Página principal ► Diseño ► Ver publicaciones

Ver publicaciones Blogger

Localizamos la entrada a la que le vamos a cambiar la fecha, y vamos a Editar entrada:

Editar entrada Blogger

En el menú Configuración de la entada encontramos la fecha y la hora en que fue publicada la entrada. Hacemos clik sobre esa opción:

Cambiar fecha entrada Blogger

Se desplegará el calendario en donde, activando la opción Establecer fecha y hora, cambiamos la fecha en la que fue publicada la entrada:

Cambiar fecha entrada Blogger

...y click en Listo.

Esta opción puede ser útil, por ejemplo, en el caso en que queramos que una entrada en particular sea la portada del blog. Le cambiamos la fecha por una muy posterior (ejemplo 1 de enero de 2020), y después eliminamos esa fecha (ver: Quitar la fecha de una entrada).

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:

Página principal ► Diseño ► Personalizar ► Avanzado ► Título de la entrada

Diseñador de plantillas, títulos entradas

Otras plantillas, como la Travel Awesome, sí tienen esa opción:

Diseñador de plantillas, color títulos entadas
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:

Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f

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:

/* Variable definitions
====================

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:

/* Posts
----------------------------------------------- */

Los códigos correspondientes son:

  • En la plantilla Simple

      1.- Definición de la variable de los títulos de las entradas:
<Group description="Post Title" selector="h3.post-title, .comments h4">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
   </Group>

      2.- Utilización de la variable de los títulos de las entradas:
h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}

 

  • En la plantilla Travel Awesome

      1.- Definición de las variables de los títulos de las entadas:
<Group description="Post Title" selector="h3.post-title, h4, h3.post-title a">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="post.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#ffffff"/>
   </Group>

      2.- Utilización de las variables de los títulos de las entradas:
h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h3.post-title a:hover {
  color: $(link.hover.color);
  text-decoration: underline;
}

Para habilitar la opción que permite modificar los colores de los títulos de las entradas, en el blog de la plantilla Simple:
  1. Eliminamos en la plantilla Simple el código 1.
  2. Copiamos el código 1 de la plantilla Travel Awesome y lo pegamos en el sitio que ocupaba el código 1, que eliminamos en la plantilla Simple.
  3. Eliminamos en la plantilla Simple el código 2.
  4. Copiamos el código 2 de la plantilla Travel Awesome y lo pegamos en el sitio que ocupaba el código 2, que eliminamos en la plantilla Simple.
Si al hacer Vista previa en el blog de la plantila simple no vemos los títulos de las entradas es porque el color de los mismos es igual el del fondo del blog. Guardamos plantilla, vamos al Diseñador y podremos observar que ya está habilitada la opción para cambiar el color de los títulos de las entradas.

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:

Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f

2.- Localizamos, poniéndola dentro del rectángulo de búsqueda (search), la siguiente línea:

<h2 class='date-header'>

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:

<h2 class='date-header' expr:id='"fecha-" + data:post.id'>

...y guardamos plantilla. Cerramos Edición de HTML y vamos a la entrada.

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:

ID de un post o entrada

Antes del texto de la entrada, en la Edición de HTML de la misma, pegamos esta línea CSS:

<style>h2#fecha-XXXXXXXXXXXXXXXXXXX {display:none;} </style>

...reemplazando las X por la segunda serie de números de la barra de direcciones.

5.- ActualizarVer blog y tendremos la entrada sin fecha.


26.6.12

Reducir espacio entre entradas y sidebar


El espacio entre las entradas y la sidebar de Blogger puede parecernos, en algunas plantillas, exagerado. Podemos reducir ese espacio, en las plantillas nuevas (Diseñador de plantillas), utilizando uno de estos procedimientos:

1.- Ensanchando el cuerpo de las entradas, o
2.- Ensanchando la sidebar.

En todos los casos vamos a Editar HTML:

Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f

...y hacemos la modificaciones indicadas en cada caso localizando los códigos correspondientes poniendo, dentro del rectángulo de búsqueda (search), una línea de los mismos.

Los márgenes entre entradas y sidebars son, por defecto, iguales a cero. Entonces para reducir esos espacios debemos poner márgenes con cifras negativas al cuerpo de las entradas o a la sidebar (una sola de estas dos alternativas). A medida que aumentemos el valor absoluto de esas cifras negativas, el margen se reducirá más, y viceversa.


Plantilla Simple

Ensanchando el cuerpo de las entradas:

Eliminamos el siguiente código:

.main-inner .column-center-inner {
  padding: 0 $(main.padding);
}

...y lo reemplazamos con éste:

.main-inner .column-center-inner {
  padding: 0 $(main.padding);
  margin-right: -30px; /* Margen derecho dado al cuerpo de las entradas */
}


Ensanchando la sidebar:

Inmediatamente antes de:

/* Posts
----------------------------------------------- */

...pegamos este código:

/* Sidebar
----------------------------------------------- */
.main-inner .column-right-inner {
  padding: 0 $(main.padding);
  margin-left: -30px; /* Margen izquierdo dado a la sidebar */
}


Plantilla Picture Window

Ensanchando el cuerpo de las entradas:

Eliminamos el siguiente código:

.main-inner .column-center-inner {
  padding: 0 0;
}

...y lo reeemplazamos con éste:

.main-inner .column-center-inner {
  padding: 0 0;
  margin-right: -20px;  /* Margen derecho dado al cuerpo de las entradas */
}


Ensanchando la sidebar:

Eliminamos el siguiente código:

.main-inner .column-right-inner {
  padding-right: 0;
}

...y lo reemplazamos con éste:

.main-inner .column-right-inner {
  padding-right: 0;
  margin-left: -20px; /* Margen izquierdo dado a la sidebar */
}


Plantillas Fantástico S.A. (Awesome inc.) y Filigrana (Watermark)

Ensanchando el cuerpo de las entradas:

Eliminamos el siguiente código:

.main-inner .column-center-inner,
.main-inner .column-left-inner,
.main-inner .column-right-inner {
  padding: 0 5px;
}

...y lo reemplazamos con éste:

.main-inner .column-center-inner {
margin-right: -30px; /* Margen derecho dado al cuerpo de las entradas */
}
.main-inner .column-left-inner,
.main-inner .column-right-inner {
  padding: 0 5px;
}


Ensanchando la sidebar:

Eliminamos el siguiente código:

.main-inner .column-center-inner,
.main-inner .column-left-inner,
.main-inner .column-right-inner {
  padding: 0 5px;
}

...y lo reemplazamos con éste:

.main-inner .column-center-inner,
.main-inner .column-left-inner,
.main-inner .column-right-inner {
  padding: 0 5px;
  margin-left: -30px; /* Margen izquierdo dado a la sidebar */
}


Plantilla Etéreo

Ensanchando el cuerpo de las entradas:

Después de:

.content-inner {
  padding: 0;
}

...pegamos el siguiente código:

.main-inner .column-center-inner {
  padding: 0;
  margin-right: -10px; /* Margen derecho dado al cuerpo de las entradas */
}


Ensanchando la sidebar:

Después de:

.content-inner {
  padding: 0;
}

...pegamos el siguiente código:

.main-inner .column-right-inner {
  padding: 0;
  margin-left: -20px; /* Margen izquierdo dado a la sidebar */
}


Plantilla Travel

Ensanchando cuerpo de las entradas:

Eliminamos el siguiente código:

.main-inner .column-center-inner {
  padding: $(content.posts.padding) 0;
}

...y lo reemplazamos con éste:

.main-inner .column-center-inner {
  padding: $(content.posts.padding) 0;
  margin-right: -25px; /* Margen derecho dado al cuerpo de las entradas */
}


Ensanchando la sidebar:

Para reducir el espacio entre las entradas y la sidebar, en la plantilla Travel, empleando el método de ensanchar la sidebar, debemos tener en cuenta que tanto la entrada como la sidebar tienen un mismo fondo y, además la sidebar, dentro de éste, tiene otro fondo. Tendremos, entonces, que ensanchar el fondo de la sidebar y, en esa misma proporción, darle un margen negativo al cuerpo de las entradas, para que conserve su ancho original, ya que será desplazada por la sidebar en una dimensión igual al ancho que se le dé a ésta. Esto lo lograremos así:

En el siguiente código:

<b:template-skin>
      <b:variable default='960px' name='content.width' type='length' value='960px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
      <b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>

...modificamos la cifra resaltada, pasándola de 310px a 335px, ensanchando así el fondo de la sidebar en 25px.

Y para darle al cuerpo de las entradas su ancho original eliminamos el siguiente código:

.main-inner .column-center-inner {
  padding: $(content.posts.padding) 0;
}

...y lo reemplazamos con éste:

.main-inner .column-center-inner {
  padding: $(content.posts.padding) 0;
  margin-right: -25px; /* Margen derecho dado al cuerpo de las entradas */
}


Abramos las ventanas y comparemos:

Blog-plantilla Travel con el espacio entre entradas y sidebar original: aquí

Blog-plantilla Travel con el espacio entre entradas y sidebar reducido ensanchando cuerpo de las entradas: aquí

Blog-plantilla Travel con el espacio entre entradas y sidebar reducido ensanchando la sidebar: aquí