0

Recuperar datos en post-footer

A veces el enlace a comentarios que aparece en pos-footer "desaparece" puede ser un error al hacer cambios en la plantilla o que el enlace esté ahí pero no se muestre porque falta activar la opción.
Para solucionarlo debemos hacer unas comprobaciones antes de buscar en la plantilla.

Una de las comprobaciones es dirigirse a Configuración|Comentarios y marcar la casilla correspondiente.

La segunda averiguación es en Plantilla de diseño editar Entradas del blog y marcar para mostrar los comentarios.
Si con eso no resulta, comprobaremos que en el editor de entradas está marcado para admitir comentarios.

Si la opción de comentarios se resiste y no aparece en nuestro post-footer lo que haremos será comprobar la plantilla pero antes haremos una copia de resguardo o nos aseguraremos que tenemos una.
Nos situamos en Edición de HTML y marcamos para expandir la plantilla de artilugios.
Buscaremos <div class='post-footer'> a partir de ahí lo que veremos será lo siguiente:

<div class='post-footer-line post-footer-line-1'>
Contenido de la línea 1 en post-footer
</div>
<div class='post-footer-line post-footer-line-2'>
Contenido de la línea 2 en post-footer
</div>
<div class='post-footer-line post-footer-line-3'>
Contenido de la línea 3 en post-footer
</div>


El contenido puede variar de unas plantillas a otras, por ejemplo en post-footer-line-1 solemos añadir los datos de autor, las etiquetas y comentarios.
En post-footer-line-2 el sobre de envío de entradas y el lápiz de edición rápida.
Suele emplearse post-footer-line-3 para añadir marcadores sociales, entradas relacionadas y algún que otro complemento como la imagen para de ir a inicio.
Aún puede ser posible añadir o tener más líneas pero vamos a basarnos en esas tres.

Recuperar el enlace a comentarios.
Para el enlace a comentarios lo que debemos encontrar es lo siguiente:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

Lo buscamos con especial atención, de no encontrarlo probamos a añadirlo justo después de:
<div class='post-footer-line post-footer-line-1'>
Miramos en vista previa y si todo ha ido bien el enlace lo veremos así:

Si el enlace no aparece o la vista previa no es posible es obvio que algo no está bien. Probaremos de nuevo e incluso podemos intentar a localizar la primera línea:
<span class='post-comment-link'>
A partir de ahí seguramente veremos el resto, lo podemos mover y situarlo justo después de:
<div class='post-footer-line post-footer-line-1'>
Si deseamos modificar ese texto lo podemos hacer siguiendo estos pasos.

Recuperar texto de Etiquetas.
La misma operación podemos realizar si lo que tratamos de recuperar son las etiquetas buscamos:

<span class='post-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 != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

De no encontrarlo copiamos el código y lo añadimos como hicimos anteriormente para recuperar los comentarios, si deseamos que sea en la misma línea de los comentarios lo añadimos a continuación del código para el enlace de comentarios. De desearlo en la siguiente línea lo añadiremos justo después de:
<p class='post-footer-line post-footer-line-2'>


Recuperar datos de autor.
Podemos recuperar o modificar también los datos de autor localizando:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Ya sabemos que podemos copiar el código y situarlo en cualquier línea, yo lo tengo en la primera y para el ejemplo hice lo mismo lo añadí justo a continuación de:
<div class='post-footer-line post-footer-line-1'>
Para cambiar el "publicado por" que aparece antes del nombre de autor lo podemos hacer sustituyendo <data:top.authorLabel/> por otro texto.
Si deseamos eliminar el nombre de autor no hay problema lo podemos hacer suprimiendo <data:post.author/>
También podemos añadir un texto envolviendo el nombre de la siguiente forma:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
Aquí anda
<span class='fn'><data:post.author/>siempre de pruebas</span>
</b:if>
</span>


Recuperar hora de publicación.
La hora de publicación se muestra gracias a lo siguiente:

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<abbr class='published' expr:title='data:post.timestampISO8601'>
<data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

Si en tu plantilla a desaparecido ya sabes que hay que seguir los mismos pasos, ubicar la línea donde deseamos añadirlo y pegar el código. También podemos añadir texto, puede ser antes o después de la fecha que corresponde a la etiqueta <data:post.timestamp/>

Mi texto <data:post.timestamp/> o mi texto..


Naturalmente todo ese texto de ejemplo es innecesario, se trata de mostrar cómo recuperar esos datos y de qué forma modificarlos.
Si deseas añadir iconos también es posible.

0

Ajustar el tamaño de una imagen al texto

Por lo general, usando CSS, armar un texto combinado con una imagen es bastante sencillo aunque a veces, ajustar ambas cosas se vuelve una tarea titánica.

Supongamos que tenemos dos imágenes, una de 128x128 y otra de 256x256 y que queremos usarlas como "adorno".

Usando la propiedad float, podemos colocar el texto "rodeando" la imagen, ya sea a un lado o al otro. Esto es lo que hace Blogger cuando nos pide que elijamos un diseño al subirlas pero podemos hacerlo con cualquiera, basta darle un estilo:
<div style="text-align: justify;"><img src="URL_imagen" style="margin-right: 10px; float: left;" /> ... el texto a mostrar ... </div>

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum arcu felis, semper sed vestibulum eget, gravida id tortor? Mauris eleifend suscipit tellus, a tempor lorem euismod eget? Maecenas porta rutrum faucibus. Pellentesque eget rhoncus est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem est, laoreet non pharetra in, porttitor sed turpis pellentesque.

Lo mismo hacemos para el otro lado:
<div style="text-align: justify;"><img src="URL_imagen" style="margin-left: 10px; float: right;" />el texto a mostrar ... </div>

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum arcu felis, semper sed vestibulum eget, gravida id tortor? Mauris eleifend suscipit tellus, a tempor lorem euismod eget? Maecenas porta rutrum faucibus. Pellentesque eget rhoncus est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem est, laoreet non pharetra in, porttitor sed turpis pellentesque.

Sólo invertimos los códigos, uno flota a la izquierda y tiene un margen a la derecha, el otro flota a la derecha así que tiene un margen a la izquierda pero ¿qué pasa si por cualquier motivo cambiamos el tamaño o el tipo de fuente del texto?

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum arcu felis, semper sed vestibulum eget, gravida id tortor? Mauris eleifend suscipit tellus, a tempor lorem euismod eget? Maecenas porta rutrum faucibus. Pellentesque eget rhoncus est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem est, laoreet non pharetra in, porttitor sed turpis pellentesque.

Se descalabra todo y claro, deberíamos "redimensionar la imagen para mantener el efecto. La rehacemos, la subimos otra vez ... demasiado trabajo.

También podemos "redimensionarla" usando los atributos width y height.

Basta colocar el ancho y el navegador se encargará de calcular el alto de forma automática para mantener la proporción. O colocar sólo el alto. O colocar ambos valores y cambiar esa proporción:

original = 256x256 --> 100x100
<img width="100" src="URL" /><img height="100" src="URL" /><img width="100" height="100" src="URL" />

<img width="50" height="100" src="URL" /><img width="100" height="50" src="URL" />

Sea como sea, deberíamos "recalcular" el tamaño de manera individual ... sigue siendo mucho trabajo.

Sin embargo, hay una técnica explicada en JON TANgerine que nos facilita hacer esto de manera genérica, usando CSS. Para ello, en lugar de utilizar pixeles para dimensionar las imágenes, utilizaremos la unidad em lo que significa que el tamaño de la imagen tendrá una relación con el tipo de fuente del texto.

¿Cómo calculamos eso? No hay otra forma que usar la aritmética o una calculadora online.

Supongamos que estoy satisfecho con el modelo creado. Conozco dos datos, sé que la imagen debe tener 128x128 y que la fuente del texto tiene 14 pixeles. Uso una fórmula de conversión:

(1 / TamañoFuente) * AnchoImagen = AnchoImagen en unidades em
(1 / TamañoFuente) * AltoImagen = AltoImagen en unidades em

en este caso:

(1 / 14) * 128 = 9.14

Así que puedo cambiar el código a usar:
<div style="text-align: justify;"><img src="URL_imagen" style="margin-right: 10px; float: left; width: 9.14em; height: 9.14em;" /> ... el texto a mostrar ... </div>

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum arcu felis, semper sed vestibulum eget, gravida id tortor? Mauris eleifend suscipit tellus, a tempor lorem euismod eget? Maecenas porta rutrum faucibus. Pellentesque eget rhoncus est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem est, laoreet non pharetra in, porttitor sed turpis pellentesque.


De esta manera, el texto y la imagen mantendrán una relación pre-establecida, sin importar ni el tipo de fuente ni el tamaño de la imagen que usemos.

0

Sorteo de un Grabador Blu-ray

Grabador Blue-Ray
Pablo administrador de "Dinero desde casa" sortea en su sitio un Grabador Blu-ray externo LaCie d2 8x y servidor multimedia LaCinema Black MAX.

Es compatible con DVD y CD, y su velocidad de escritura puede alcanzar 8x para los BD-R y 48x para los CD-R. Puedes grabar hasta 4 horas de vídeo HD en un disco Blu-Ray de 50 Gb es decir aproximadamente 10 veces más que en un DVD.


El concurso comenzó el día 11 de Mayo de 2009 y finalizará el 1 de Junio a las 00:00.

Puede participar cualquier persona que tenga un sitio web con más de dos meses online.

Para participar en el Sorteo dispones de distintas alternativas: (Una vez lleves a cabo cualquiera de las alternativas se te asignará 1,2 ó 3 números para participar en el Gran Sorteo).

[1] Escribir un Artículo en tu Blog sobre el Concurso (Con un enlace al Sorteo) y un comentario en este artículo dejando un enlace al artículo que has escrito sobre el tema (Dispondrás de 1 número para participar).

[2] Recomendar el Sorteo a algún amigo. No solo deberás recomendarlo sino que tu amigo ademas deberá participar en el Sorteo para que así se contabilice tu participación. (Dispondrás de 1 número para participar).

[3] Enviar este artículo a cualquier sistema de publicación de Anuncios (Tablones de Anuncios, Blogs, Directorios), crear Eventos Tuenti con el Sorteo y cualquier idea que te surja con tal de dar a conocer el Sorteo. Solo se contabilizarán dos envíos por persona. (Dispondrás de 2 números para participar).

Aún queda tiempo para participar y el regalo es más que interesante (está valorado en torno a 300€), además si el ganador del sorteo no fuese residente en España, se le enviará el valor del regalo en metálico.

¡Suerte!

0

Las propiedades CSS por defecto

Sin CSS, una página está desnuda pero, aún así, algo de pudor le queda ya que los navegadores establecen una serie de propiedades por defecto que serán aplicadas a menos que las cambiemos. Tienen ciertas diferencias según se trate de un navegador u otro pero, en general, son justamente esas propiedades no-identificadas, las que nos causan problemas porque no solemos tenerlas en cuenta.

El body de una página es donde están definidas por defecto algunas de esas propiedades Es más o menos conocido que el fondo (background) de una página es blanco y que el color de los textos (color) es negro pero tiene algunas más que suelen perturbar, por ejemplo, el margen (margin):
body {
background: #FFF url() repeat left top;
color: #000;
font-family: Times New Roman;
font-size: 16px;
margin: 8px;
}
Los enlaces también tienen propiedades por defecto, son de color azul y se muestran subrayados.

Todas las etiquetas de títulos tienen fuentes en negrita (font-weight:bold) y además, un tamaño que está en relación al tamaño de la fuente definida en el body. Para colmo, también tiene márgenes:
h1 font-size: 2em; margin: 21px 0;
h2 font-size: 1.5em; margin: 19px 0;
h3 font-size: 1.2em; margin: 19px 0;
h4 font-size: 1em; margin: 21px 0;
h5 font-size: .8em; margin: 21px 0;
h6 font-size: .7em; margin: 26px 0;
Ni las etiquetas DIV ni SPAN tienen propiedades por defecto pero si las tiene la etiqueta P; esta posee un márgen superior e inferior igual al tamaño de la fuente por defecto (margin:1em 0).

Más etiquetas con propiedades pre-definidas:
blockquote margin: 16px 40px;
pre font-family: monospace; margin: 16px 0;
Las imágenes que sirven como enlaces tienen un borde de color igual al color de los enlaces (border: 2px solid #0000EE)

Probablemente, las etiquetas que causan más conflictos son las listas ya que tanto OL como UL tienen varias propiedades incluyendo márgenes y separaciones:
ol margin:16px 0; padding-left: 40px; list-style-position: outside; list-style-type: decimal;
ul margin:16px 0; padding-left: 40px; list-style-position: outside; list-style-type: disc;
Es muy común leer que para evitar que todas estas propiedades no nos molesten, lo mejor es "resetearlas", es decir, poner al inicio de nuestra plantilla, algunas definiciones que "limpien" esas cosas. Hay decenas de ejemplos que pueden verse online pero, para un uso normal, no es necesario tanto, basta agregar unas pocas, justo al inicio de nuestra plantilla, dentro de etiquetas <style> </style> o de <b:skin> </b:skin>.
* {margin: 0; padding: 0;}

html, body {height: 100%;}
body {height: 100%;}

a, a:visited, a:link, a:active  {outline: none; text-decoration: none;}
a:hover {outline: none; text-decoration: none;}
a img {border: none; outline: none; text-decoration: none;}

object, embed {outline: none;}

ol, ul, li {list-style: none;}
Por supuesto, esto tendrá que verse caso por caso ya que es posible que algunas de las propiedades por defecto nos sean útiles y por lo tanto, no nos interese sacarlas pero, siempre es bueno saber que allí están y, cuando comenzamos un sitio nuevo, lo mejor es eliminarlas a todas y tomarnos el trabajo de definirlas una por una.

0

Añadir estilos a un gadget

Retro Icon me preguntaba el otro día:

¿Cómo puedo hacer para crear un cuadro de color negro que contenga texto e imágenes en el sidebar?


Quien dice negro dice cualquier otro color, la cuestión es crear unos estilos para añadir a un gadget determinado y que sea distinto al resto que compone la sidebar.
Lo primero que haremos será añadir los estilos que más tarde podemos modificar para personalizarlo a nuestro gusto. Justo antes de ]]></b:skin> añadimos:

#gadget {
line-height: 20px;
text-align: left;
padding: 12px;
background-color: #000;
color: #fff;
}

Guardamos los cambios y editamos un nuevo gadget en la sidebar escogiendo HTML/Javascript en su interior incluimos:

<div id="gadget">
Aquí añadimos el contenido.
</div>



Si deseamos una imagen de fondo sustituimos background-color: #000; por background:url('url-de-la-imagen') repeat;



Para añadir una imagen en el gadget lo haremos con:
<img src="url-de-la-imagen"/>


0

Blogger y sus códigos misteriosos

Hace ya varios días que Ariane twiteaba una información que, hasta ahora, sigue siendo un misterio. Trabajando con una plantilla recién cargada desde Blogger, había encontrado unos códigos nuevos y se preguntaba ¿son eso lo que parecen ser?

Si buscamos en:
<b:includable id='post' var='post'>
veremos que inmediatamente después de las instrucciones que muestran los posts, aparece esto:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>
Parecería que, con alguna condición, las entradas tendrían la posibilidad de ser mostradas parcialmente, al estilo de lo que hace el tag MORE en WordPress, una función largamente solicitada y que usualmente, simulamos con algún hack.

Por ahora, nada funciona excepto el texto Read More que genera <data:post.jumpText/> Tampoco he visto ningún tipo de referencia al tema en la web.

No es el único misterio. Revisando un poco, hay otros códigos "raros" o por lo menos, cosas que no había visto antes y que no tengo la menor idea para que sirven.

Por ejemplo ¿qué hace esto que aparece en el LOOP?
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
¿Carga un script? ¿Cuál? ¿Bajo qué condiciones?

Una más. Ahora, el includable del formulario de comentarios incrustado es distinto:
<b:includable id='comment-form' var='post'>
Luego del IFRAME se ve esto:
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
¿Sería mucho pedir que Blogger nos informara de estos cambios y su significado? Digo, no sé, se me ocurre que es lo que debería hacer cualquier servicio, por muy mediocre que sea.

0

Pequeña lista de herramientas online para desarrolladores