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

Gadgets for Blogger

Publicado por Claudia en agosto 29, 2009

gadgets-for-bloggerGadgets for Blogger es un nuevo directorio de widgets/gadgets desarrollado específicamente para la plataforma Google Blogger. En él puedes encontrar gadgets fáciles de instalar y cuidadosamente probados, que incluyen screenshots, información detallada y datos de contacto de su autor.

Detrás del sitio está Amanda Fazani de BloggerBuster. Te suena, ¿no? 😉

Enlace: Gadgetsforblogger.com

*Si buscas más gadgets, Widgets for free es otro interesante directorio para revisar.

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

Blogger Seguro: Protege tu blog de plagios y ataques

Publicado por Claudia en agosto 11, 2009

blogger-seguroUno de los aspectos más importantes de un blog, y uno de los más descuidados, es la seguridad. Nadie está exento de plagios o ataques. La gran pregunta es: ¿qué hacer para proteger tu blog, especialmente tienes un Blog en Blogger y no puedes usar ningún plugin que te ayude a garantizar su seguridad?

En su libro Blogger Seguro, que cuenta con el apoyo de más de 60 blogger brasileños, Sergio Estrella (IceBreaker) entrega consejos fundamentales para protegerse del plagio, del hacking y de accidentes indeseables, invitando a usar una serie de útiles herramientas, tips y sitios web prevenir antes de lamentar, y pasos a proceder en caso del robo de contenido, o en caso de que alguien se haya apropiado de tu blog.

Sergio Estrella también es autor de otro libro que considero imprescindible para usuarios de Blogger, llamado “Blogger Rápido“. Se trata básicamente de cómo optimizar el CSS, las imágenes y los elementos y widgets que usas en las plantillas, a fin de hacer que tu blog cargue más rápido.

Ambos libros pueden ser descargados en formato *.pdf desde el blog de IceBreaker (en un pack “dos por uno”). Son libros cortos y precisos, escritos en portugués. Si no entiendes el portugués y te gustaría obtener una traducción al español, puedes descargar los libros, subirlos a Zoho y luego usar esa URL en Google Translator.

Blogger

Cheat Sheet para Blogger

Publicado por Claudia en agosto 5, 2009

Una “cheat sheet” es una guía de referencia rápida, cuya denominación deriva de los “ayudamemoria” que todos alguna vez usamos en un examen. Habitualmente, vemos cheat sheets de WordPress, CSS, HTML y uno que otro lenguaje de programación. Entonces, ¿por qué no disponer de una para Blogger?

Francisco de Blog and Web creó una espectacular chuleta para Blogger, la única que se ha visto hasta este momento (y en español). De seguro, será muy útil para quienes quieren modificar su plantilla Blogger y no saben cómo, así como también para quienes adaptamos o diseñamos plantillas.

Blogger-Cheat-Sheet

La chuleta está basada en Mínima, y muestra de manera gráfica (y bastante pedagógica) los selectores de clase e ID que son comunes al CSS de la mayoría de las plantillas. Éstos pueden variar un poco en plantillas modificadas o adaptadas a partir de WordPress, pero es una excelente base para identificar y modificar las distintas secciones que componen la estructura de un diseño hecho en Blogger.

Puedes ver y descargar e imprimir la chuleta de Blogger desde Blog and Web. Indudablemente, puedes acompañarla con cheat sheets de CSS para comprender el uso de las propiedades y sacarle aun un mayor provecho.

Tags: ,