¡Invítame a un café!

Son varias las personas que me han preguntado últimamente sobre la forma de añadir al final de las entradas, la posibilidad de solicitar una donación vía Pay-Pal.

He visto en algunos blog que colocan la frase "si te gustó esta entrada, invítame a un café" al final de cada entrada, la mayoría de las veces acompañada por un icono.

[1] En nuestro panel desde Edición HTML y marcando la opción de "Expandir las plantillas de artilugios" localizamos esta línea de código:

<p class='post-footer-line post-footer-line-3'/>

Dependiendo de la plantilla, podría aparecer de esta otra manera:

<div class='post-footer-line post-footer-line-3'/>

[2] Justo después de esa línea, añadimos este código:

<b:if cond='data:blog.pageType == "item"'>
<br/><img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SicQ0oE7NwI/AAAAAAAAG4k/qZQ3hVqZLwg/s320/Coffee+Time-32.png" /><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&amp;business=TU_EMAIL_AQUI&amp;item_name=Invítame a un café!&amp;no_shipping=1&amp;cn=Comentarios%20%28opcional%29&amp;tax=0&amp;currency_code=EUR&amp;lc=ES&amp;bn=PP%2dDonationsBF&amp;charset=UTF%2d8">Si te gustó esta entrada, invítame a un café!</a><br/>
</b:if>

[3] Sustituimos donde dice "TU_EMAIL_AQUI" por la dirección de correo con la que nos hemos registrado en Pay-Pal.

El widget no será visible en la página principal, para que sea visible en todas las páginas, eliminamos la primera línea del código (<b:if cond='data:blog.pageType == "item"'>) y el cierre del final (</b:if>)

La url para el icono del ejemplo ya está incluida en el código, para usar un icono personalizado, cambiamos esa url por la del nuestro.

Os dejo alguna "tacita" más que he encontrado:

        

FilesTube: Usar lo que la web provee

FilesTube no tiene nada que ver con YouTube, sólo es un buscador de todo tipo de archivos con características particulares como la posibilidad de usar esos archivos en nuestras páginas. No aloja archivos, sólo los busca y nos dice donde están y de dónde podemos descargarlos.

Aunque podemos usarlo libremente, al registrarnos gratuitamente accedemos a algunas de las funciones como historial, crear listas de reproducción de audio o video y la posibilidad de incrustar reproductores.

El proceso es sencillo y está explicado en esta página. Como los MP3s a reproducir se encuentran en "alguna parte" de la web, pueden "desaparecer" pero las listas son editables así que podemos cambiarlas cuantas veces se nos ocurra.

Una nueva etiqueta de Blogger: isFirstPost

Otra vez es Ariane quien ha descubierto un nuevo código en las plantillas de Blogger pero, esta vez, parece funcionar. En Blogger'SPphera algo nos dicen aunque todavía no hay ningún ejemplo concreto de cómo usarlo y habrá que esperar un poco. Así, a asimple vista, parece interesante.

Si uno carga una plantilla nueva, buscando en <b:includable id='main' var='top'> se encontrará con esto:

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

La etiqueta <b:if cond='data:post.isFirstPost'> es una condición que detecta si lo que se muestra es el primer post o no lo es. Por lo que vi, no detecta si es el último post publicado sino si es el primero de una página, incluso en las páginas de navegación.

Está colocado allí como parte de los códigos de Adsense así que imagino que su utilidad es esa, resaltar algún tipo de publicidad pero, la condición sigue siendo válida así que podría usarse en otras partes como <b:includable id='post' var='post'> y diferenciar el post superior de una lista de los que se muestran debajo, por ejemplo, mostarlo completo y el resto resumido.

<b:if cond='data:post.isFirstPost'>
  ... aquí iría el código de un post completo ...
<b:else/>
  ... aquí iría el código para un post resumido ...
</b:if>

Poca información, lo sé. Blogger no explica nada pero demos gracias a que gente como Ariane y Roseli nos van mostrando estos detalles y nos alientan a experimentar un poco.

RAY CREATIONS » Selección de plantillas

Blue Bubbles

Blue Spiral

Dark Mistry

Dark Forest

Green Leaves

Notebook

Crystal Blue

Water World

Paradise Valley

Night Sky

Plantillas para Blogger de libre descarga « RAY CREATIONS »

Z-Graphics

ΜigueŁ jίмenez™ me comentaba el otro día algo relacionado con el blog, lo visité para hacerme una idea de lo que me comentaba y descubrí que desde mi última visita su blog había dado un gran cambio.

Me sorprendió el editor de comentarios y no me resistí a probarlo. El atractivo no sólo es en apariencia sino también en eficacia. Le sugerí que sería buena idea explicar los pasos a seguir para disponer de un editor igual y no se hizo de esperar, pueden ver las explicaciones del Mini-editor Z-Graphics

En un principio la idea de esta entrada era dar a conocer el editor, pero hay otro motivo y es una nueva plantilla disponible para Blogger que ΜigueŁ a diseñado, se trata de Green Place

La plantilla es una maravilla pero hay un detalle que me ha gustado mucho y es la disponibilidad de ΜigueŁ para ayudar a solventar cualquier problema que se pueda presentar con la plantilla, así como orientar si se desea hacer alguna modificación.Creo son motivos más que suficientes para visitar Z-Graphics

Suerte ΜigueŁ y gracias por compartir

Una lista numerada fuera de lo común

Sexy Ordered Lists with CSS, es decir listas numeradas pero .. sexy ¿Por qué sexy? Vaya uno a saber, seguramente, porque es más llamativo que llamarlas lista con fondos

De todas maneras, es una buena idea.

¿Qué es una lista ordenada? Una etiqueta HTML que muestra eso, una lista con una serie de items y de manera automática se coloca delante un número de orden (ver Las listas en HTML 1 y 2):

1. el primer item
2. el segundo item
3. el tercer item

<ol>
  <li>el primer item</li>
  <li>el segundo item</li>
  <li>el tercer item</li>
</ol>

El truco sexy consiste en colocar dentro de cada item, dos datos separados, un encabezado y un párrafo y de esa manera, tenemos varios elementos que podemos personalizar de manera independiente:

<ol class="steps">
  <li class="first">
    <h2>encabezado 1</h2>
    <p>párrafo 1</p>
  </li>
  <li>
    <h2>encabezado 2</h2>
    <p>párrafo 2</p>
  </li>
  <li class="last">
    <h2>encabezado 1</h2>
    <p>párrafo 1</p>
  </li>
</ol>

Y claro, la clave está en cuáles son las propiedades CSS a aplicarle a cada sector; por ejemplo:

<style type='text/css'>
ol.steps {
  /* la imagen de fondo de los números */
  background: transparent url(http://img198.imageshack.us/img198/9223/ulsexy.gif) repeat-y scroll 0 0;
  border: 1px solid #111;
  margin: 20px 0;
  padding: 0 0 0 40px; /* la alineación horizontal de los números */
}
ol.steps li {
  background:#222 none repeat scroll 0 0;
  /* el efecto resaltado del los bordes de cada item */
  border-top: 1px solid #000;
  border-right: 1px solid #333;
  border-bottom: 1px solid #353535;
  border-left: 1px solid #151515;
  /* la fuente de los números */
  color: #DEF;
  font-family: 'Century Gothic';
  font-size: 25px;
  margin: 0;
  padding: 15px;
}
ol.steps li h5 { /* la fuente de los títulos */
  border-bottom: 1px dashed #333;
  color: #BCD;
  font-family: 'Century Gothic';
  font-size: 22px;
  font-weight: normal;
  padding: 0 0 5px 0;
}
ol.steps li p { /* la fuente de los textos */
  color: #AAA;
  font-family: Tahoma;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
}
ol.steps li.first { /* el borde superior opatativo */
  border-top: 1px solid #333;
}
ol.steps li.last { /* el borde inferior optativo */
  border-bottom: none;
}
</style>

Daría como resultado algo así:

1. Curabitur mattis nibh

   Vestibulum sapien dolor, viverra bibendum accumsan condimentum, fermentum id sem. Duis vel sapien id dui vestibulum aliquet ut ut libero. Pellentesque eget libero odio. Ut lacus tortor, auctor eget commodo ut, commodo eu nisi. Donec eleifend dapibus justo ut auctor! Donec risus quam, eleifend id suscipit consectetur, iaculis a purus. Morbi magna mauris, ultricies ac consequat ac, lobortis non enim. Curabitur in purus est! Pellentesque aliquam; velit consectetur feugiat ornare, tortor lectus tincidunt leo, in blandit tellus velit vel quam. Mauris eleifend enim quis lectus fringilla consequat. Maecenas arcu est, tincidunt et varius sed, faucibus ut diam. Sed elementum mollis bibendum.

2. Quis dolor interdum lobortis

   Morbi volutpat ipsum sit amet enim iaculis condimentum. Suspendisse mattis neque a enim molestie dignissim. Nulla turpis diam, euismod bibendum laoreet sed, vulputate ac sapien. Sed dignissim nibh hendrerit lacus accumsan vestibulum? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at hendrerit arcu. Aenean convallis nisl nec nisi feugiat tempor. Phasellus interdum mollis eros; ut rhoncus arcu feugiat ac. Vivamus posuere suscipit risus, sed bibendum massa lacinia non. Mauris dapibus eros quis risus dictum consectetur non ac libero. Quisque tincidunt nunc ac metus posuere varius? Sed cursus tincidunt mauris, a vestibulum ante rhoncus eget! Nullam sodales sagittis tincidunt. Duis dapibus lacinia venenatis. Donec tincidunt nisl nisl? Donec viverra consequat est, eget metus.

3. Proin sem nibh

   In nulla orci, imperdiet sed viverra ac, vulputate sed magna. Vestibulum viverra ullamcorper venenatis? Proin ac aliquet purus. Suspendisse at ligula sed dui lacinia feugiat. Proin lectus est, ultricies eget hendrerit a, molestie vitae arcu! Suspendisse rhoncus, metus id rhoncus iaculis, nisi lacus egestas sem, et feugiat eros arcu in nisl? Ut consequat interdum enim, eget dapibus ligula ultricies at. Donec consequat luctus neque. Maecenas ac magna a quam porttitor ullamcorper semper eu metus. Proin vel dui ipsum, laoreet dapibus massa! Sed interdum rutrum porta. Nam nisl ante, ultricies accumsan aliquam vitae, lacinia id sem! Aliquam erat volutpat. Nulla facilisi.

Colocar un botón para Tweetmeme

Me solicita Kenneth a través de un correo que explique como incluir un botón para Tweetmeme en el blog.

Tweetmeme es una especie de agregador de noticias de Twitter.
Este servicio rastrea y optiene la información de los tweets que comparten los usuarios de Twitter entre si (RT), en su web podemos ver una portada principal donde aparecen los tweets más destacados.

En Blogger podemos añadir un botón que permita a nuestros usuarios enviar la información a Tweetmeme de las entradas de nuestro blog, cuantos más usuarios envien la entrada, más posibilidad tendrá esta de posicionarse en Tweetmeme.


Vamos a ver como colocar el botón al lado derecho del título de nuestras entradas.

[1] Desde "Edición HTML" en nuestro panel y marcando la opción de "Expandir las plantillas de artilugios" localizamos el código que está en negrita y añadimos el que he resaltado en color rojo:

<b:if cond='data:post.title'>
<div id="tweetmeme" style="float: right;">
<script type="text/javascript">
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
<h3 class='post-title entry-title'>

[2] Usamos vista previa y tendremos que ver nuestro botón a la derecha del título de la entrada:

[3] Guardamos cambios.

Si en lugar de ese botón, queremos usar el otro modelo disponible de botón (más pequeño), el código (que colocaríamos en el mismo lugar) sería este:

<div id="tweetmeme" style="float: right;">
<script type="text/javascript">
tweetmeme_url = &#39;<data:post.url/>&#39;;tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Podemos colocarlo también al final de las entradas, justo antes del comienzo de los comentarios, de esta manera solo será visible cuando entramos a una entrada concreta.
Para hacer esto tendríamos que incluir el código así:

<b:includable id='comments' var='post'>
<script type="text/javascript">
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
<div class='comments' id='comments'>