JMiur [E]

Entramos en Blogger. Hacemos click en Diseño, luego en Edición HTML. Marcamos Expandir plantillas de artilugios. Hacemos click otra vez y mientras esperamos que se recargue la página, buscamos la palabra "artilugios" en el diccionario.

Suspiramos. Nos inclinamos sobre el monitor y nos desplazamos por el código; una, tal vez dos veces. Murmuramos algo. Cerramos la pestaña y nos vamos a ver videos de japones golpeándose.

Nos dimos por vencidos.

Es lógico. Pusimos toda nuestra buena voluntad porque se nos ocurrió que era hora de tratar de entender un poco más y Blogger no nos lo hace sencillo. En lugar de algo organizado, nos muestra un galimatías donde lo único que alcanzamos a reconocer son dos o tres instrucciones que nos suenan más o menos familiares.

¿Dónde están los posts? ¿Cómo se muestran? ¿Podremos meter mano y hacer cosas diferentes?

No sé por qué motivo, razón o circunstancia, a los desarrolladores de Blogger se les ocurrió esta forma críptica de codificar algo pero, hay que lidiar con ellos. Lo básico, es entender que cuando se genera el código que muestra el navegador, lo que está ocurriendo es que, una serie de instrucciones se repiten una determinada cantidad de veces, una para cada entrada a ser mostrada, todas igualitas. Eso es lo que se llama un LOOP (bucle). Si alguien experimentó con WordPress o leyó artículos referentes a ese servicio, habrá notado que constantemente se hace refencia a "el LOOP", casi como si fuera un nombre propio. Y esto no es un capricho. Es que entender el LOOP es la clave de todo porque es allí donde un blog es un blog.

En Blogger también hay un LOOP y es todo eso que está entre estos dos códigos:
<b:includable id='main' var='top'>
.......
</b:includable>
El contenido de ese INCLUDABLE es lo que controla la forma en que se mostrarán las entradas de nuestro sitio y en sus orígenes era un código corto pero, en los últimos tiempos, Blogger le ha añadido instrucciones siguiendo la manía generalizada de casi todos los desarrolladores: tratar de pensar por nosotros y preveer todas las posibilidades (omnipotencia pura).

Este es el código por defecto de una plantilla mínima:
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>

</b:loop>
<data:adEnd/>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

</b:includable>
Allí, lo que está en amarillo son comentarios es decir, anotaciones hechas en la misma plantilla para explicar algo. No se ejecutan y podemos eliminarlas o modificarlas.

Todo lo rojo es el código para incluir Adsense. Si no usamos ese servicio, también podemos eliminarlo.

Las líneas en azul son lo que maneja la posibilidad de calificar los posts (las estrellitas) y está ahí, de prepo, las usemos o no las usemos. También podemos eliminarlas.

Y ya que estamos, eliminamos todo lo que está en naranja que es irrelevante.

Ahora, el contenido del INCLUDABLE quedará mucho más claro (es una forma de decir):
<div class='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
</div>
<b:include name='nextprev'/>
<b:include name='feedLinks'/>
¡No quedó nada! Y sin embargo, el blog se sigue viendo ¡Ohhhhh! Ahí está algo que dice LOOP.

En esas pocas líneas está el nucleo de nuestro sitio. Un bloque (un DIV) que tiene una clase CSS llamada blog-posts y debajo dos intrucciones propias de Blogger llamadas INCLUDE.

[INCLUDABLE | INCLUDE no se les ocurrió nada mejor para confundirnos que ponerles nombres parecidos a dos cosas diferentes]

INCLUDE es una especie de subrutina; ejecuta algo que está en otro lado, lo "incluye" ahí.

¿Qué "incluye"? Pués un INCLUDABLE ... un trabalenguas XD

Simplificando un poco, luego del bloque donde se ejecuta el LOOP, Blogger va y ejecuta otras dos partes:

<b:includable id='nextprev'> ...... </b:includable>
agrega la barra de navegación inferior (Entradas antigüas, Inicio, etc)

<b:includable id='feedLinks'> ...... </b:includable>
agrega la línea para suscribirse (al sitio o a los comentarios)

El bucle es muy simple. Se ejecuta tantas veces como hemos indicado en la Configuración, mostrando una cierta cantidad de entradas o una sola vez si se trata de una página individual. Aquí es donde Blogger lee los datos de cada post y los muestra.

Primero que nada, la fecha si es que existe (y es donde nos complica la vida al separar la fecha del resto de los datos):
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
Luego, otra vez otro INCLUDE que va y ejecuta una serie de instrucciones que dependen de cada plantilla y que son las que muestran el post en si mismo, el pie de página, las etiquetas, etc, etc, etc:
<b:include data='post' name='post'/>
Por último, hay una condición que incluirá los comentarios sólo si estamos en una página individual:
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
¿Y para qué puede servir saber esto?

Dentro de ese LOOP podemos acceder a algunos datos fundamentales que nos pueden servir para personalizar la plantilla, agregandole funciones o condiciones; la más interesante, a mi juicio, es la posibilidad de detectar la etiqueta de un post y actuar en consecuencia; de tal manera, podríamos mostrar ciertas entradas de una forma distinta al resto.

A eso vamos ...

33 comentarios:

BanakaBanaka!!  

JMiur> a veces parece que nos lees la mente o algo parecido... ese mismo es el recurso que utilizamos en "Blogs con EÑE" para diferenciar las fichas de los blogs, de los comunicados, por ejemplo o del resto de páginas estáticas (inscripción, nofollows, logos y demás).

Muy bien explicado, pa variar.;)
Saludos,
Iván.

Responder
Bonzu Pipinpadaloxicopolis III  

En mi plantilla es
<!-- posts -->

<div id='blog-posts'>

Responder
Anahí  

¡Maestro!

Responder
Jorge Alberto Baez Perez  

hola a todos pues kiero compartir un truco rosa para que lo agas una de tus grandes tutoriales "INTRO EN BLOGGER" ace mucho k encontre una tutorial en foroactivo.com para poner intro a un foro por medio de un javascrip y dije que pasa si en el scrip lo pongo en mi blog y funciono tooodooo un exitooo. pueden ver mi blog como kedo mi intro en blogger

Responder
Jorge Alberto Baez Perez  

solo leela tutorial rosa y veee como lo adaptas facil a un blog.....

como en mi blog Flowurbanos

Responder
Graciela  

:P a la pelotita loop, tengo loop en el cabello...
Es un artículo para leer y leer para mi J, muy buena explicación. Me pregunto a Blogger le conviene lo de Adsense???, ahora lo incluye en las plantillas nuevas...besos tesoro!!!

Responder
Gem@  

Sin lugar a dudas es para llevarlo a la práctica y dejar la plantilla a prueba del algodón (quiero decir muy limpia)

Responder
JMiur  

Cada vez le ponen más y más cosas. Termina confundiendo a cualquiera :D

Responder
Noe'S***  

Hola! wow por fin encontré lo que andaba buscando! muy buen blog y sobre todo muy útil... Una consulta, estoy renovando mi blog y me surgió un problema, no puedo cargar una imagen en la "cabecera" del blog, intenté de varias formas pero no hay caso, subi la imagen a un hosting y lo puse en la edicion html pero nada, y mi conocimiento por ahora no va más allá de eso. Te agradecería mucho la ayuda! Gracias! Bless

Responder
JMiur  

No va a ser seencillo colocar la imagen en esa plantilla porque todo el blog tiene un fondo, es el que está en el BODY.

Podrías probar ubicarla en

#logo {
...........
background:transparent url(xxxxx) no-repeat scroll left 0;
.........
}

Pero dependerá mucho del tamaño que tenga yde qué quieras tener como reusltado. Tendrías que dejarla puesta para que pueda verse online y allí ver si es posible encontrar alguna solución.

Responder
Gem@  

Hay un dicho que dice piensa mal y acertarás yo pienso que no siempre es así pero desde que leí que quizás Blogger con el tiempo añada Adsense creo que puede ser cierto.
Es más, en plataformas como Blogia ya han impuesto Adsense en diferentes partes de los blogs. Pensaba que si retiramos ese código de la plantilla ¿le pondríamos más difícil que esto ocurriera? o ¿no serviría de nada?

Responder
JMiur  

Gem@:

Ese código está colocado allí para "facilitar" a los usuarios el uso de Adsense. Supongo que es parte de una campaña para incentivar el uso de ese servicio, por eso han agregado la pestaña Monetizar. Es que, para Google, ese es su servicio clave, ellos viven de eso :)

Dudo mucho que agreguen publicidad por su cuenta y para hacerlo, deberían utilizar algún otro tipo de metodología, deberían insertar ellos el código de manera forzosa, con algún sistema similar al que usan para agregar otros scripts o la misma navbar. Además, deberían cambiar las condiciones del servicio para evitar que lo quitemos.

Pienso que en realidad sólo se trata de promoverlo.

Responder
Gem@  

Eso es verdad porque añaden códigos que a veces ni nos enteramos y pueden hacerlo de esa forma, ojalá estés en lo cierto :O

Responder
Bruja  

Un excelente despiece de la plantilla. Y me pregunto, ¿no estará por acá el truco para invertir el orden de las entradas?

Un saludo.

Responder
Bruja  

[para la suscripción]:S

Responder
JMiur  

Gem@:
Eso espero :D

Bruja:
No. Eso no parece posible. Es una de las cosas que aparece como prioritaria en la WishList de Blogger desde siempre :)

Responder
Marey  

Que genial enserio te lo agradezco si no fuera por ti nunca me abría atrevido a abrir un blog jeje, pero ahora creo que si se puede XD lo abrí ayer y lo primero q encontré fue esta pagina: http://btemplates.com/category/ donde encontré temas pero enserio ninguno me gustaba o algo salia mal ¬¬ una amiga me convenció de crearlo y después de luchar toda la noche con el estaba convencida de cerrarlo y despareada sin intención en google puse 'ayuda con blogger' solo para deshogar mi frustración y encontré tu blog *-*...pero en fin enserio gracias, creo que me subscribiré a tu foro y me tendrás por aquí molestando de ves en cuando, la verdad se html y amo hacer graficos pero debo de aceptar que con esto no puedo sola jeje pero ia veras me volveré una experta...por eso voy a incluirte en mi post de hoy n_n visitalo si quieres http://mareytopics.blogspot.com/

Responder
JMiur  

Saludos, Marey, espero que te diviertas y ... paciencia, mucha paciencia :D

Responder
MOKEWA PERU  

disculpa amigo pero la verdad en estas cosas soy nulo, mi blog es www.mokewaperu.blogspot.com y quiero agregarle entradas recientes, entradas antiguas e inicio, me podés decir como lo hago y donde lo agrego? cre que si vas a codigo fuente , agregando eso me lo puedes pasar a mi correo rikjard2@hotmail.com.
Te lo agradecere mucho, muchas gracias

Responder
JMiur  

Por lo que veo online, no reconozco la estructura de tu plantilla ¿es una plantilla clásica o de nuevo diseño? Ni siquiera reconozco el DOCTYPE.

Responder
Rober Ll. Quiroz  

hola jmiur quisiera saber si se puede poner un bloque de adsense despues de la primera entrada en la pagina principal como el 336*280 solo en el principal y que no aparesca en las entradas unicas pues tengo un anuncio en el sidebar y dos en cada entrada unica. lo que quiero es uno o dos en la pagina principal y como tengo 1 en el sidebar completarian los 3 bloques no se si me entiendes. e provado con el diseñador y con Publicar anuncios con Google AdSense pero me aparece espacios en blanco pues pasarian los 3 bloques.... mi blog es http://portaltodo.blogspot.com/ :) gracias

Responder
JMiur  

Seguramente se puede usando condicionales. Habría que ver el detalle exacto pero creo que sería algo así:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:post.isFirstPost'>
... debería ir acá ya que esto sólo se ejecutaría sólo en el primer post del home
</b:if>
</b:if>

Responder
Xabi  

Bueno es para agradecer tu trabajo, llevo meses intentando poner la paginación en mi blog (http://www.lekitxokozeruak.com/) y al fin lo he conseguido, he seguido tus instrucciones y como ahora tengo dominio propio he cambiado la dirección de blogger por la mía. No funcionaba pero era un problema de mi plantilla. Luego me ha pasado lo que a muchos otros, alguna página no podía verse, me he vuelto loco buscando la solución y creo que ya está solucionado. El problema está en que blogger tiene restringida la longitud de la página y aunque pongas en la plantilla que quieres 10 posts por página y en la configuración tambien, si los posts son largos
y sobrepasan la longitud permitida te crean conflictos. Yo lo he solucionado poniendo un máximo de 8 por página.
Pues nada que sigas así y muchas gracias

Responder
JMiur  

Sí, hay un límite al volumen de las páginas.

Responder
X-Crim  

eres un crack, muchas gracias.

Responder
JWriter  

amigo he instalado una nueva plantilla y tengo un problema que me esta rompiendo la cabeza =/, no puedo poner adsense en el mismo post ni abajo del titulo ni al final del post, porque siempre que lo hago lo muestra en blanco, y buscando en el código encontré este que explicas aquí, y esta totalmente diferente al que tu muestras, no se si me podrías ayudar y revisarlo y decirme si hay algo mal.

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='threaded_comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='threaded_comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>
<data:adEnd/>
</div>

ese es el código de la plantilla donde esta el loop, ahí esta cambiada la parte de adsense, no se si por esto se vera en blanco cada vez que pongo adsense dentro del post.

la plantilla se llama metro simple, la puedes encontrar aquí: http://www.btemplates4u.com/2012/09/metro-simple-blogger-template.html para que la revises si puedes.

espero me puedas ayudar

JMiur  

Desde el 2009 hasta ahora, el loop ha ido sufriendo distintas variaciones aunque lo esencial sigue igual.

Eso que muestras es normal y correcto.

Habría que ver tu blog con el Adsense colocado para ver si en el código fuente hay algún detalle que indique el tipo de error.

JWriter  
Este comentario ha sido eliminado por el autor.
JMiur  

No veo problema alguno. Se muestran correctamente arriba del div post-footer

JWriter  
Este comentario ha sido eliminado por el autor.
JMiur  

Lo único que puedo decirte es que en el código no se ve nada raro.

Responder
Paul Martínez  

Que tal como estas, disculpa una pregunta. Sucede que yo aplique cambios html para ocultar entradas de acuerdo a la etiqueta, sin embargo sucede que el resto de entradas se multiplican en proporción al número de etiquetas que tienen. Me ha tocado Dejarlas solo con una etiqueta para q me salgan solo una vez. Puedes ayudarme para poder editarlo bien y no tener este problema por favor? muchas gracias.

JMiur  

No sé cuál es el código que estás usando pero, si un post tiene varias etiquetas, no hay una forma sencilla de ocultar los posts. Y si sólo tienen una y se duplican es que tienes duplicado este código:

<b:include data='post' name='post'/>

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR