Agregar una ID única a cada post o entrada en páginas index

Al agregarle una ID a los post tendremos la posibilidad de darle un diseño personalizado distinto uno de otro.

Veamos algunos ejemplos: (clic sobre las imágenes)





Es recomendado para las plantillas con entradas reducidas.

Yo le voy a decir el código para colocar las ID´S a los post, el diseño se los dejo a ustedes.

Pueden cambiar el ancho, colores, texto, o lo que se les ocurra, mostrando los post con un diseño distinto cada uno.

Los códigos van a ir dentro de condicionales, ya que la idea es personalizar los post en las páginas index.

¿Cómo se hace...?

Ir a Diseño, Edición de HTML, Expandir plantillas de artilugios, y justo arriba de </head>

Poner el siguiente código:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>var contadorE=0</script>
<style type='text/css'>
/* TODOS LOS POST */
.contaentrada{propiedad: valor}
/* ESTILO DEL POST 1 */
#contaentrada1 {propiedad: valor}
/* ESTILO DEL POST 2 */
#contaentrada2{propiedad: valor}
/* ESTILO DEL POST 3 */
#contaentrada3 {propiedad: valor}
/* AGREGAMOS LOS ESTILOS SEGÚN LOS POST QUE MOSTREMOS */
</style>
</b:if></b:if>

Como vemos en el código hay una clase (.contaentrada) para todos los post.

Después las ID´S para cada uno de los post que vayan a personalizar.

Ir agregando las ID´S con el nombre #contaentrada1, #contaentrada2, #contaentrada3, etc...

Según el post va cambiando el nombre: #contaentrada con el numero correspondiente al post.

A continuación buscamos en la plantilla la siguiente línea:

<div class='post hentry'>

Según la plantilla puede variar:

<div class='post hentry uncustomized-post-template'>

Si no lo encuentran pueden solo buscar:

post hentry

Tener en cuenta que tiene que estar marcado "Expandir plantillas de artilugios".

Ahora justo arriba de esa línea pegamos el siguiente código:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!-- Contador Entradas Vku -->
<script type='text/javascript'>
contadorE=contadorE+1;
document.write(&quot;&lt;div class=&#39;contaentrada&#39; id=&#39;contaentrada&quot;+contadorE+&quot;&#39;&gt;&quot;)
</script>
<!-- Fin Contador Entradas Vku -->
</b:if></b:if>

Mas abajo buscamos:

<b:includable id='status-message'>

Van a ver que arriba tiene </b:includable>

Así:

</b:includable>
<b:includable id='status-message'>

Justo arriba de </b:includable> pegamos el siguiente código:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!-- Contador Entradas Vku2 -->
<script type='text/javascript'>
document.write(&quot;&lt;/div&gt;&quot;)
</script>
<!-- Fin Contador Entradas Vku2 -->
</b:if></b:if>

Hacemos VISTA PREVIA, y si todo esta bien, GUARDAMOS.

Con esto hemos agregado una ID a cada post con el nombre contaentrada+numero.

Suerte con el diseño y a tener buenas ideas.

Para el diseño personalizado tal ves sea necesario agregar:

.blog-pager{clear: both}

Y hacer flotar los post con un ancho: (en lugar de 100% puede ser fijo con ..px)

.contaentrada{float:left;width: 100%;}