Blogger, Tutoriales

Blogger: Cómo dividir el widget de etiquetas en dos columnas

Publicado por Claudia en noviembre 10, 2009

Etiquetas-BloggerCuando tienes muchas etiquetas y una barra lateral lo suficientemente ancha, siempre tienes la opción de dividir el widget de etiquetas en dos o más, por una cosa de orden y estética.

Hace un tiempo, Cebong mostraba una forma de crear un widget de etiquetas multicolumnas añadiendo una nueva sección en el footer o la sidebar.

En realidad, es mucho más simple de lo que parece: no es otra cosa que determinar anchos (%) para las listas de esa sección. En otras palabras, puedes hacer lo mismo si ya añadiste un widget de etiquetas a tu sidebar, pero con un código CSS simplificado a ser añadido antes de ]]></b:skin>:

#Label1 ul li{
float: left;
width: 45%;
}

A considerar:

  • El ancho (width) va a depender de cuántas columnas quiera incluir, y no siempre es exacto, porque el widget de etiquetas va a heredar el padding de las listas de la sidebar (.sidebar ul li o similar). En este caso, 45% está bien para dos columnas; para 3 columnas, quizá ande bien con 30 ó 33%.
  • El selector #Label1, puede variar. Por defecto, el widget de etiquetas (si tienes sólo uno), debiera ser Label1; pero, si tienes dos, tendrías un widget de ID Label1, y otro Label2.
  • Puedes dividir cualquier widget de lista (ejemplo, lista de enlaces) de la misma forma, averiguando su ID.

sidebar-blogger

Tags: , ,
Blogger, Tutoriales

Leer más en Blogger… ¡al fin!

Publicado por Claudia en septiembre 9, 2009

Hace tres meses veíamos la inyección de “sospechosos” códigos en las pantillas de Blogger que nos hacían pensar la posibilidad de la inclusión de “leer más” por defecto. Hoy ya es posible, y sin tener que añadir javascript o preocuparse por la velocidad de carga del blog o el hosting del script *.js.

Se activa de dos maneras:

1) Cambiando al nuevo editor de texto enriquecido WYSIWYG, desde Blogger in Draft (Configuración / Básico / Configuración global / Editor actualizado), y seleccionando el ícono “Insertar salto de línea” del editor.

2) Manualmente, y sin necesidad de ir a Blogger in Draft ni cambiar al editor actualizado:

Texto a mostrar<!-- more --> texto a ocultar

Adicionalmente, puedes cambiar el texto del enlace (por defecto “Más información”) en en elemento de Entradas del blog, desde la Edición de elementos.

Incorporando en plantillas antiguas

Si tienes una plantilla creada antes de junio, y no logras que se corten las entradas, lo más probable es que a tu plantilla le haga falta la siguiente pieza de código:

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

Añádela entre el cuerpo y el pie de las entradas (post-footer), como en la siguiente imagen:

Un poco de CSS para estilizar el enlace

Con CSS, puedes adornar en enlace “leer más” o agregar un botón. Por ejemplo:

.jump-link {
background: #FF0084;
padding: 1px 5px;
border: 1px solid #FF0000;
width: 70px;
}

.jump-link a {
color: #FFF;
text-decoration: none;
font-weight: bold;
}

.jump-link:hover {
background: #FF0050;
border: 1px solid #FF0000;
}

.jump-link a:hover{
}

Si quieres que el botón quede flotando a la derecha, puedes hacerlo con la propiedad “float:right”:

.jump-link {
float: right;
}

Y limpiando la flotación con HTML, pegando bajo el código que hace posible el corte de las entradas:

<div style='clear: both;'/>

Finalmente, si seguiste algún tutorial para poner excerpts en Blogger y prefieres incluir el “leer más” de esta forma, es cosa de retroceder los pasos uno a uno y añadir el código correspondiente al jump-link.

Más en: Blogger Buzz | Vía: Vagabundia

Blogger, Tutoriales

Cómo crear dos columnas de posts en Blogger

Publicado por Claudia en agosto 22, 2009

Este mini-tutorial nace a partir de una pregunta vía e-mail. No se trata de dividir un post en dos columnas, sino de mostrar dos columnas de posts en vez de una. Puede ser muy útil para cambiar la forma en que se muestran los posts en la página principal y, en especial, para crear la base de una plantilla tipo Magazine como Turnoutmag.

posts-blogger

Empecemos con el experimento:

1. Lo primero, es añadir el script “leer más con thumnails” y guardar los cambios. Como siempre, es recomendable descargar y realojar el archivo summary-post-v20-test.js. Si no, podría dejar de funcionar en cualquier momento.

2. Configura las opciones del script del siguiente modo: summary_noimg = 300; summary_img = 230; img_thumb_height = 60; y img_thumb_width = 60. En realidad, puedes elegir las proporciones que quieras pero, para este experimento, yo elegí éstas.

3. Amplía los contenedores de tu blog: el #main-wrapper debe tener al menos 580 píxeles de ancho, y el #outer-wrapper debe tener como ancho mínimo la suma del ancho del #main-wrapper con la del #sidebar-wrapper. Seguramente, también vas a tener que ampliar los contenedores #header-wrapper y #footer-wrapper para que sigan en concordancia con el diseño.

4. Ahora, busca la siguiente sección en tu plantilla:

]]></b:skin>

Justo debajo, añade:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
 
.post {
border:1px solid #BFBFBF;
float:left;
height:300px;
width:260px;
margin:7px;
padding:0px 5px 5px 5px;
overflow:hidden;
}
 
</style>
</b:if></b:if>

Lo anterior corresponde a estilos condicionales para la página de inicio. Se trata simplemente de especificar el alto y el ancho de los posts. En esta sección, también puedes añadir más estilos condicionales para el home (puedes ayudarte de la chuleta que creó Francisco). Así, por ejemplo, puedes cambiar el color del título de los posts o modificar el tamaño del texto en las entradas.

5. Detalles adicionales

a) Seguramente, vas a necesitar limpiar la flotación de los links de navegación:

#blog-pager {
clear: both;
}

b) Puedes adornar con CSS el enlace “Leer más”:

.rmlink {
background: #CA8398;
padding: 2px 5px;
}
.rmlink a:link, .rmlink a:hover, .rmlink a:visited{
color: #FFF;
}

c) En Formato, necesitas cambiar el número de entradas a mostrar a un número par (idealmente 8, 10 ó 12).

Consideraciones finales:

Es una técnica muy sencilla, que puedes adaptar a tus necesidades y “adornar” con un poco de CSS y HTML:

  • Puedes modificar los metadatos (fecha, autor, enlace de los comentarios), cambiándolos de lugar, añadiendo o quitando texto, o utilizando íconos para destacarlos.
  • Seguramente, notarás que la fecha queda flotando arriba de uno o varios posts, por lo cual puede ser algo molesto y poco estético. Opta por ocultarla desde la sección Elementos de la Página, y usa en su lugar el fomato de la hora. También puedes moverla manualmente desde la edición de HTML, aunque puede ser más complejo si no estás familiarizado con la estructura de una plantilla Blogger.
  • Si amplías más los contenedores de la plantilla, y reduces el tamaño de los posts en la página principal, puedes crear tres o más columnas de posts sin necesidad de retocar nada más. Inclusive, puedes llegar a crear galerías de imágenes modificando las propiedades del script.
  • Si antes del contenedor #main-wrapper añades un plugin jQuery para crear slideshows, y complementas la técnica poniendo columnas en el footer y arreglando tu sidebar con widgets y más columnas, puedes tener una perfecta plantilla tipo magazine. Todo está en entreverse a jugar y experimentar un poco.
Blogger, Tutoriales

Blogger: el primer post con un estilo diferente II

Publicado por Claudia en julio 6, 2009

Guti me pedía que explicara un poco más acerca de cómo mostrar el primer post con un estilo distinto en Blogger (viene de acá), utilizando el nuevo código condicional que aparece en las plantillas.

En general, es posible hacer modificaciones básicas añadiendo estilos condicionales bajo el cierre de “b:skin“, y justo antes del cierre de la etiqueta “head“, de la siguiente manera:

Condicionales Blogger

Lo anterior va a definir estilos para el primer post, que son distintos a los de los posts individuales. En el ejemplo, puse un color distinto para el cuerpo de los posts (post-body). No obstante, añadir condicionales para el primer post es algo más complejo que eso. No recomiendo su uso para quienes no están familiarizados con la estructura de las plantillas de Blogger, porque podrían sufrir un gran dolor de cabeza.

Hace unos días, Ro Zanchetta escribió una entrada de cómo usar la nueva etiqueta “isFirstPost” en Blogger, con un ejemplo concreto para plantillas tipo revista, utilizando un hack para “leer más”. Para quienes son arriesgados y quieren “lanzarse directamente a los leones”, el post de Ro es una lectura obligada. Por mi parte, voy a explicar el mecanismo para usar condicionales para el primer post, de acuerdo a mis propios experimentos.

Ahora bien: Al expandir los artilugios de las plantillas, es posible encontrar la siguiente código:

<b:includable id='post' var='post'>
Código-post
</b:includable>

Lo que llamé Código-post son muchas líneas de código, las cuales en una plantilla muestran: el título de un post, el cuerpo del post, y el footer del post, donde aparecen los meta-datos: autor del post, hora, comentarios, etiquetas y otros.

Entonces, el procedimiento a seguir es el siguiente: copiar el código de los posts (debe mostrarse dos veces en total) utilizando distintos condicionales, de la siguiente manera:

<b:if cond='data:post.isFirstPost'>
Código-post con clases distintas para el primer post
<b:else/>
Código-post
</b:if>

El “Código-post” es el código completo, íntegro, sin cambios. Sin embargo, el “Código-post con clases distintas para el primer post” debe tener algunos cambios. Por ejemplo:

  • En vez de “div class=’post-entry‘”, voy a usar “div class=’post-entry-first‘”
  • En vez de “div class=’post-body entry-content‘”, voy a usar “div class=’post-body-first’

Y así sucesivamente, definiendo mis propios selectores para esa sección. Preferí usar selectores similares a los de la plantilla Mínima, agregando “-first” a cada uno, para que sean más fáciles de recordar.

Hecho este procedimiento, sólo queda definir las propiedades para cada selector antes del cierre de “b:skin”, como en la siguiente imagen (sólo es un ejemplo, porque puedes hacer mucho más):

Condicionales Blogger

Voilá! Eso es todo. Probablemente, la etiqueta “isFirstPost” dé para una nueva entrada de este tipo, sobre cómo añadir hacks. A mí, por ejemplo, me gustaría poner un hack “leer más” automático en el primer post, y un hack “leer más” no-automático para los siguientes. Es cosa de seguir experimentando…

Tags: , ,
Tutoriales, Wordpress

Comparte tus URLs cortas al estilo Techcrunch

Publicado por Claudia en junio 30, 2009

Hace algún tiempo, Techcrunch comenzó a usar su propio acortador de direcciones, con un dominio distinto al principal. Tener un acortador de URLs propio no es cosa difícil, especialmente si usas WordPress e instalas un plugin como Link Shortcut. Pero lo que me llamó la atención, fue la cajita que utiliza Techcrunch para compartir sus URLs cortas, las cuales se generan automáticamente para cada post.

Pienso que mostrar tus enlaces permanentes ayuda a que se difundan tus posts, especialmente si muestras URLs cortas para compartir en Twitter o Facebook. Una URL corta debería significar mayor difusión, porque les ahorra a tus visitantes el tener que ir a Bit.ly (u otro acortador), si es que no usan alguna extensión para Firefox o algún bookmarklet que les permita hacer esto con un click.

Aquí comparto la forma que encontré para mostrar tus URLs cortas al estilo Techcrunch y facilitar que compartan tus enlaces. Probablemente exista una manera distinta, más simple y hasta mejor de hacerlo, pero quise mostrar una vía “casera” que sí funciona (pueden ver el resultado de mi “experimento” al final de este post).

Un poco de javascript

Partiendo por lo general, lo primero fue buscar la manera de seleccionar todo el texto (la URL, en este caso) al hacer click con el mouse. Algo básico, pero necesario. De esta forma, utilicé un script que produce este efecto, y que puedes encontrar en Javascript Array o en Wallpaperama. Cualquiera de las dos versiones me va a permitir mostrar las cajitas para mis URLs, cambiando el valor (value) del input.

Buscando el plugin idóneo

En WordPress, hay varios plugins para generar URLs cortas, pero me decidí por “La Petite URL“, que hace este prodecimiento por sí mismo, instantáneamente.

Este plugin tiene opciones de configuración básicas: eliges el largo de tus URLs y el tipo de caracteres que quieres usar (letras minúsculas, mayúsculas y/o números). Luego de su instalación y configuración, sólo queda encontrar la función que me permita mostrar una URL corta para cada post, en el archivo single.php. La función que utilicé fue la siguiente:

<?php the_petite_url(); ?>

Dicha función muestra sólo los caracteres aleatorios de mi URL (ejemplo, “abcde”), por lo que antes tengo que añadir la dirección de mi blog (http://chicablogger.com/). Por lo tanto, procedí así:

1. Copié el siguiente código (el script) antes del cierre de la etiqueta “body“:

<script type="text/javascript">
function SelectAll(id)
{
    document.getElementById(id).focus();
    document.getElementById(id).select();
}
</script>

2. Puse este código en mi single.php, antes de los comentarios:

<input type="text" style="width:180px; border: 1px solid #c3c3c3" onClick="SelectAll('short_txtfld');" value="<?php echo get_option('home'); ?>/<?php the_petite_url(); ?>" />

Ahora, para mostrar la URL completa (en vez de la versión acortada), el código deberá ser como el anterior, pero cambiando el valor (value) por este:

<?php the_permalink(); ?>

A considerar: El plugin funciona sólo para posts nuevos. Si quieres que genere URLs cortas para tus posts antiguos, deberás volver a guardarlos.

Una alternativa simple para Blogger

1. Pega antes del cierre de la etiqueta “body“.

<script type='text/javascript'>
function select_text()
{
var content=eval(&quot;document.myform.field&quot;);
content.focus();
content.select();
}
</script>

2. Busca el siguiente código:

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

Y pega debajo:

<form action='' method='post' name='myform'>
<textarea name='field' onClick='select_text();' style='width: 180px; height: 15px; border: 1px solid #c3c3c3;'><data:post.url/></textarea>
</form>

El código anterior no genera URLs cortas, pero sí muestra tus URLs para trackbacks.

Tags: , ,