JMiur [E]

Las entradas del blog, título, contenido, pie de página, etc, son agregadas con un widget; más complejo que cualquier otro de los que podemos incluir pero, widget al fin:
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>
.......
</b:widget>
Obviamente, hay uno solo y desde Diseño | Elementos de la Página no podemos agregar otros; ni siquiera aparece en la lista pero, nada impide que podamos hacerlo manualmente desde la Edición HTML.

¿Y para qué se nos ocurriría agregar otro widget con las entradas del blog? Pués porque sólo allí es donde podemos leer los datos de la entrada y, por ejemplo, de ese modo, podríamos mostrar algunos de ellos en cualquier parte de nuestra página y no necesariamente en el post-footer. Usando esta idea de quiterandom.com, los vamos a mostrar en la sidebar.

Primero que nada, vamos a Diseño | Edición HTML y sin expandir los artilugios para que sea más simple; buscaremos la sección de la sidebar que, por defecto, dirá algo así:
<b:section class='sidebar' id='sidebar' preferred='yes'>
Inmediatamente debajo de eso, agregaremos el siguiente código que ha sido modificado del artículo original para evitar que Blogger nos agregue códigos innecesarios:
<b:widget id='Blog99' locked='false' title='Entradas del blog' type='Blog'>
<b:includable id='nextprev'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='post' var='post'>
<div class='meta'>
<div class='title'>Leyendo: &quot;<data:post.title/>&quot;.</div>
<div class='comments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.numComments/> <data:top.commentLabelPlural/>
</a>
</div>
<div class='labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</div>
<div class='date'>Publicado el <data:post.dateHeader/></div>
<!-- ....... cualquier otro dato que nos interese mostrar -->
</div>
</b:includable>

<b:includable id='status-message'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='main' var='top'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</b:if>
</b:includable>

<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='comments' var='post'/>
</b:widget>
Lo llamamos Blog99 pero cualquier nombre es admitido. Como se ve, hay muchos includables vacíos porque no los necesitamos pero, no podemos quitarlos ya que si lo hacemos, Blogger los agregará otra vez completos. Sólo necesitamos dos de ellos, los llamados main y post. En el primero, condicionamos todo nuestro nuevo widget para que funcione exclusivamente en páginas individuales y en el segundo, ponemos todo eso que nos interese mostrar. En ese ejemplo hay algunas posibilidades agregadas.

El resto es diseño gráfico. Para eso, agregamos un poco de estilo antes de </b:skin>. Por ejemplo:
/* este es el rectángulo donde mostraremos nuestro widget */
div.meta {
background-color: #141414;
border: 1px solid #333;
padding: 20px;
}
/* las diferentes partes del ejemplo */
div.meta div.title { /* el texto "Leyendo" y el título */ }
div.meta div.comments { /* la cantidad de comentarios */ }
div.meta div.labels { /* las etiquetas */ }
div.meta div.date { /* la fecha de publicación */ }
Hay un ejemplo online que puede verse en este blog de pruebas.

27 comentarios:

Graciela  

Como decirlo EXCELENTE!
lo que he renegado tratando de imaginar cómo poner las últimas entradas, de manera distinta de lo que las tengo, no me hace caso la plantilla hago una denuncia!...bueno tampoco mis neuronas ;)

Abrazos Jmiur :)

Responder
Gem@  

Por primera vez veo esa idea y resulta original.
Sigo a Fernando desde mi feed y por ello no me había dado cuenta del gran cambio que ha dado a su espacio.
Este chico tiene un talento especial siempre lo dije y me alegra que siga siendo así :)

Responder
JMiur  

Adelante, Graciela, no se rinda :D

Gem@: Sí, es algo publicado hace tiempo pero es una buena idea :D

Responder
Alex  

Muy bueno jamas pense que se pudiera hacer esto

Gracias JMIUR

Responder
Marcos-Gabriel  

o quite random e o bloggerpshera ja haviam mostrado algo do tipo.
De qualquer forma bom tutorial, otimo p/ iniciantes.

Responder
JMiur  

Eso es lo que dice el post:

Usando esta idea de quiterandom.com, los vamos a mostrar en la sidebar.

:O

Responder
Omar-GeekOS  

JMiur como quito este widget D: ya no lo puedo borrar T_T en html lo borro pero me sale un error y soy usuario medio en esto pero nunca he tenido ese problema, quiza sea porque es tipo blog, pero si cambio a HTML y guardo, vuelve a blog y nunca se borra T__T

Responder
JMiur  

Se elimina igual que cualquier otro. Puede ser que haya algún error en Bllogger mismo. Prueba con otro navegador o cambiando la interfaz que usas, si es la nueva, usa la vieja o visceversa.

Responder
Chico del Cereal  

JMIUR!!! :'DDDDDDDDDDDDDDDDD SOS UN GROZO SABELO xD, Tankius(; tengo una duda, si quiero que solo salga la etiqueta en un post en un widget, pero sin poner el widget de entradas del blog, se puede?

Responder
Chico del Cereal  

PD: soy Omar-GeekOS

Responder
JMiur  

Me alegro que se solucionara. La verdad, era algo raro :D

Responder
NE  

Hola!
Antes de todo, Mil y Una Gracias! Me lo recomendo el Potro este post! Y la verdad es lo que necesitaba!
El problema que tengo, es que quiero que salga solamente el Titulo de la entrada, en letras grandes.. solo eso, pero no hay maneras, voy eliminando codigos y la estoy liando todabia mas.. me podrias ayudar con eso ? No se que codigo exactamente poner, para que salga solamente el titulo de la entrada.

Oye Muchisimas Gracias anticipadas! Guardo en Fav :)

Responder
JMiur  

Si sólo quieres mostrar el título de la entrada, no creo que tenga sentido poner algo tan complejo; se podría hacer sól ocon un par de líneas de JavaScript pero, para darte una idea básica de cómo hacer eso, tendría que saber en que sitio quieres colocarlo.

Responder
NE  

Muchisimas Gracias Jmiur, El sitio es este (Esta un poco revuelto): http://vertiendas.blogspot.com/ y lo que quisiera es en la cabecera salga solamente el titulo de la entrada..

Si me puedes ayudar seria de enorme ayuda! Muchas Gracias de nuevo JMiur :)

Responder
JMiur  

Ahí me perdí un poco ¿Estás hablando del home o e las entradas individuales? ¿A qué llamas cabecera?

Pregunto esto porque no veo similitud con lo explicado en esta entrada o cómo lo quieres aplicar.

Responder
NE  

Hola de nuevo y lo siento por explicarme tan mal!
Bueno ordene un poco mejor todo el Blog para que se entienda mejor.

Mi intención es lograr que en el encabezado azul al medio, salga el titulo de la entrada con letras un poco grandes: http://vertiendas.blogspot.com/2012/01/comercial-baslem.html

Si me pudieras dar lo básico para que lo busque o pregunte por foros.. estaría genial!
Aun que pensaba que con el código que mencionas aquí se podría obtener un resultado semejante?

Muchas Gracias, Valoro mucho su tiempo!

Responder
JMiur  

Eso es diferente y require otros cambios, más pequeños pero varios.

Primero, busca en la plantilla esto:

<div id="cwrapper">

y debajo, coloca esto:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h1 class='eltitulo'><data:blog.pageName/></h1>
</b:if>

ahora, agrega modifica esta regla del CSS:

#cwrapper {
width: 970px;
}

que diga:

#cwrapper {
width: 970px;
}

y debajo, colocas algo así:

h1.eltitulo {
color: #FFF;
left: 0;
margin: 0;
padding: 0;
position: absolute;
text-align: center;
top: 40px;
width: 970px;
}

eso mostrará el título de la entrada en esa parte del header y la posición vertical la controlas con la propeidad top; el resto, color fuente etc, lo defines a gusto.

Responder
NE  

Diooss!!! Eres un genio, muchisimas Gracias!! Ha quedado exactamente como yo queria!
Ahora dime que puedo hacer por ti?
Saludos y Gracias de nuevo! Buenisimo!

Responder
JMiur  

Perfecto NE :D

Responder
Eddy  

perfecto xD! se le puede dar un mejor uso, me sirvió!!

Responder
Carlos Eduardo  

Buenas tardes maestro, tenia semanas metido en internet buscando algo semejante a lo que deseo hacer. Lo que quiero tener en mi blog es algo como esto: Bloggermint, en este caso la bar-info esta a la izquierda y obviamente solo se muestra en las entradas, habria que tener dos sidebar para hacer lo que ud explica y poner este efecto en la sidebar izquierda? o se podria hacer teniendo una unica sidebar? lo que quiero es que la sidebar original este a la derecha, y la informacion de la entrada a la izquierda.

En esta Plantilla de Blogger Oulipo hay algo parecido, pero el problema es que la mia ya la llevo modificada a como la quiero, regresar atras a otra plantilla seria demasiado. En este blog quiero hacerlo Goles de Venezolanos. Disculpe el desorden, estoy modificando algunas cosas.

Como siempre se que tendra algo que decir maestro, una orientacion, una luz que me ilumine jeje. Saludos.

JMiur  

No sé exactamente que quieres hace pero no es necesario usar dos sidebars. En el ejemplo de esta misma entrada, sólo hay una; puede estar en cualquier parte.

Carlos Eduardo  

Si se que se puede con este ejemplo, pero me quedaria a la derecha y "encima" la sidebar, lo que yo queria es que la informacion de la entrada me quede al lado izquierdo de la entrada, y la sidebar que este en su sitio derecho normalmente, lo que no se es como crear ese espacio en la izquierda para poder agregar esta informacion. En el ejemplo de Bloggermint se ve claramente que la informacion de la entrada se ve en la izquierda de la misma y la sidebar es independiente y se ubica a la derecha. En mi comentario anterior te habia dejado los link para que lo vieras visualmente. Gracias por la respuesta. En conclusion, la info de la entrada a la izquieda del post y la sidebar en su sitio origianal, derecha. Saludos Maestro.

JMiur  

Para eso tienes que agregar otra columna que se llame sidebar o no, es indistinto pero, debe haber otro DIV que flote a la izquierda tal como la sidebar flota a la derecha y el contendio debe ponerse allí.

Carlos Eduardo  

A eso me referi cuando te dije si podria hacerse con dos sidebar y poner tu ejemplo en la sidebar o columna de la izquierda, el punto es que no tengo ni idea como hago esa otra columna izquierda, pero bueno, tocara ponerme a leer y ver como puedo hacer. Muchas gracias.

Responder
mgmnzx  

Quisiera consultarte si es posible hacer, o si sabes como hacer un widget automaticamente de en forma de codigo el enlace de la entrada y una imagen en miniatura de la primera imagen que hay en ella, algo así como hace imageshack y otros host de imágenes

ejemplos:
http://i48.servimg.com/u/f48/12/98/04/21/ejempl10.jpg
http://i48.servimg.com/u/f48/12/98/04/21/ejempl11.jpg

JMiur  

Poder se puede pero requiere que crees el script que lea los feeds del sitio y arme ese contenido. Pero, difícilmente alguien lo usaría porque sería un exceso. En todo caso, puedes ofrecer un iframe, diseñar y colocar ese código en una página o en un blog auxiliar y ofrecer compartir eso que no será un enlace.

Una cosa es una imagen suelta y otra muy distinta es un contenido variable que incluye distinto tipo de etiquetas.

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