Author

— Quite Random

Compatibility

IE 7 – Firefox – Chrome
Platform: Blogger Beta

Demo

— Template :: Sobriety

Download

Instructions

Para editar el área donde se encuentra la foto de “perfil” y los links de redes sociales, sólo cambiamos el siguiente código según se aplique:
— To edit the “profile area” with the picture and links, we must change the details in accordance to our personal information:

Para agregar un minipost, creamos un post, agregándole la etiqueta ‘minipost‘.
— To add a minipost, we simply create a post with the tag ‘minipost.’

La edición de fuentes y colores está habilitada desde el Panel.
— Fonts & Colors edition is enabled from the Dashboard.

[en]

Yes, QuiteRandom has come back to life.

A few weeks ago, Google reported QuiteRandom as a malicious site, for distributing malware content. I wasn’t aware of this, until days after this happened. I contacted them, telling them that I wasn’t aware of anything. They didn’t contact me back, but I assumed it was related to my shared hosting plan. (Google links all sites hosted in a shared hosting, so yes, QuiteRandom is not any malicious site; promised!)

Later on, the domain expired. Being absent for so many weeks, I wasn’t able to renew it. They canceled it… and I had a hard time figuring out how to get it back! However, today I finally could. I then contacted HostGator and they were able to provide me with a solution for the whole malware thing. And now we’re clean! :)

I know I’ve been absent for like ages, but I’m coming back! [I wasn't really absent all along. Check my portfolio and you'll see some new sites there!] New freebies, new posts, new tricks will be out soon. This year was my Senior Year at High School: schoolwork, community service, extracurricular activities, standardized tests to get into college, applications, recommendation letters, and much more, pretty much pushed me away from my online life!

Anyways, QuiteRandom isn’t dead, pals!

Cheers!

[es]

Así es, QuiteRandom ha vuelto.

Una semanas atrás, Google reportó a QuiteRandom como un sitio malicioso, por distribuir contenido malware. No estaba enterado de esto hasta días después de ocurrido. Los contacté, diciéndoles que no estaba enterado de nada. No me contactaron de vuelta, pero asumí que todo estaba relacionado con mi plan de hosting compartido. (Google conecta todos los sitios en un host compartido. Así que sí, QuiteRandom no es ningún sitio maligno; ¡lo prometo!)

Después, el dominio expiró. Habiendo estado ausente por tantas semanas, me fue imposible renovarlo. GoDaddy canceló el dominio, y créanme que tuve dificultades en conseguirlo de vuelta. De todas formas, hoy finalmente pude recuperarlo. Luego, contacté a HostGator y ellos pudieron darme una solución con respecto al tema de seguridad. ¡Y ahora estamos limpios! :)

Sé que he estado ausente por eras, ¡pero regresaré! [No estuve tan ausente tampoco. Pueden revisar mi portafolio y verán nuevos sitios ahí.] Nuevas freebies, nuevos posts, nuevos trucos saldrán pronto. Este año fue mi último año de colegio: deberes, trabajo comunitario, actividades extracurriculares, exámenes para entrar a universidades, aplicaciones, cartas de recomendación, y muchas otras cosas, definitivamente me alejaron de mi vida online.

Sin embargo, ¡QuiteRandom no está muerto, amigos!

-
Fernando

Me paso por el blog de Claudia, y el de Iván y me entero que Rick Klau, de Blogger, publicó recientemente una lista con los 12 sitios más recomendados por los usuarios para descargar plantillas para Blogger.

Me alegra mucho saber que Quite Random ha sido mencionado, junto con otros blogs (que en lo personal considero excelentes, y amigos más que nada), como lo son BTemplates, Zona Cerebral, Deluxe Templates, y Chica Blogger, quien recomendó este blog a Blogger.

¡Gracias!

//

I just came by Claudia’s and Ivan’s blogs and found out that Rick Klau, from Blogger, recently published a list with the 12 most recommended sites for downloading Blogger templates.

I am happy to share this mention with blogs I consider not just good, but excellent… and also close friends, such as: Btemplates, Zona Cerebral, Deluxe Templates, and Chica Blogger, who actually recommended this site to Rick.

Thank you!

As Blogger users, we like two things about it: it’s easy, and it’s free. But hosting isn’t, and the famous ‘free hosting services’ always have their own tricky terms related to the bandwidth consume and/or available space. Many of them are even just for ‘sharing’, and we’re not able to get from them valid, direct URLs to our hosted files.

I’ve listed some of the solutions we can apply until Google decides to give us the option of uploading other types of files.

1. Changing .js for .txt

What we call ’scripts’ are only files with plain text. They have a .js extension, which is not exactly obligatory, and it’s the reason why many hosting services won’t let us upload them.

What we can do, then, is simply changing the .js extension for a .txt extension and upload these files to Fileden, for example; then, using the provided URLs like always.

<script type="text/javascript" src="SCRIPT_URL.TXT" />

(We can upload this .txt files to Google Sites as well. Awilli, in one of this post’s comments, provides a useful link on how to do this: a tutorial from SOSwitcher.)

2. Using Google’s AJAX Libraries API

Many of the scripts we use in our blogs usually only work with certain libraries, ie. Prototype or jQuery. These, and other general libraries can be loaded in our blogs with Google’s AJAX Libraries API, adding the following code before </head> in our templates:

<script src='http://www.google.com/jsapi'/>
<script>
google.load("library if available", "version");
</script>

Here’s a complete list of the available libraries, and their installation.

3. Adding scripts directly to our templates

These kinds of code:

<script src='SCRIPT_URL' type='text/javascript'></script>

Would be replaced by:

<script type='text/javascript'>
//<![CDATA[

SCRIPT_CONTENT
//]]>
</script>

We must take in consideration that adding long scripts directly to our templates can make it a little messy and confusing; this doesn’t mean that long scripts won’t work.

4. Using Blogger’s “HTML/JavaScript” gadget

Adding long scripts to our templates might result impractical. Also, changing its .js extension for a .txt one, because of its volume, would make it consume a lot of bandwidth. Here’s a good solution for that.

In our templates, we create a new Blogger gadget section adding the following code after <body>:

<b:section class='scripts-container' id='scripts-container' />

Once this is done, from our Dashboards, in the ‘Elements Page,’ we will see a new section above our template layout. We add a “HTML/JavaScript” gadget from there, with something like this:

<script type='text/javascript'>
SCRIPT_CONTENT
</script>

We must avoid adding titles to these gadgets; however, if we’re going to add several scripts in different gadgets, we might… after adding this line before </b:skin>:

.scripts-container .widget h2 {display: none; visibility: hidden;}

Also, it seems Blogger interprets all “<” and “>” appearing in the scripts not as expected. To solve this, look for these symbols and add a space before and after each of them. Here’s an example:

Before: for(var i=0;i<a_rc;i++) {
After: for(var i=0;i < a_rc;i++) {

***

Google Pages was kind of the perfect solution for all of this; however, this beta service is soon coming to an end. Google says they will merge both Google Pages and Google Sites so we can create sites in one second; but just imagine a good and trendy site with NO JavaScript at all… I wonder why Google never merged Blogger with Google Pages, as it did with Google Adsense and Google Friends.

I could have listed some of the free services we could use, but considering what has happened with HostFile (dead already), Google Pages (dying), and lately Skydrive (not recommended), we can easily conclude that unless it is isn’t our own host, we will always have limitations.

Reference

Vagabundia [1, 2, 3]

There are plenty of ‘Read More’ hacks for Blogger on the web; however, not all of them create automatic post summaries with thumbnails for each post. This is the type of hacks I used in my latest template, Whiteness. Since it has had quite a good reception for its simplicity, its usability and its automatic ‘Read More’ hack, I thought it would be a good idea to explain the script I used.

Important: I am not, by any means, the original creator of the hack here presented. I first saw it in a post from BloggerSphera and have since worked on/with it.

Installation

There are two main HTML codes we need to add to our templates. These should be added from ‘Edit HTML,’ in our Blogger Dashboards, with the widget templates expanded.

The Script

We first need to install the script. To do this, we must add the following code, before </head>:

<script src='http://quiterandom.com/js/summaries/post-summaries.js' type='text/javascript'/>
<script type='text/javascript'>
summary_noimg = 250;
summary_img = 250;
</script>

I’ve uploaded the script to my server, but we can always download it and upload it to our own host or free hosting service, or check other useful solutions.

The Summaries

We must now replace the default post bodies for the actual post summaries and thumbnails (in all the pages different from the individual posts.)

Look for the following line:

<data:post.body/>

and change it for this:

    <b:if cond='data:blog.pageType != "item"'>
      <div expr:id='"summary-" + data:post.id'><data:post.body/></div>
      <script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>");</script>

      <a class='readmore' expr:href='data:post.url'>Read more »</a>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

The highlighted text in red is the one appearing in the link next to the summaries. ‘Read More’ is the most common phrase, but we can always change it for ‘View full post,’ ‘More,’ or any other text. We can even use images.

Customization

The Summaries

To determine the number of character to be shown in the post summaries, we must change the number next to the variables we added first (right below the script):

summary_noimg = 250; — Defines how many characters will be displayed in posts without thumbnails.
summary_img = 250; — Defines how many characters will be displayed in posts with thumbnails.

The Thumbnails

In order to style the thumbnails, we need to copy and customize the following code, right before ]]</b:skin>:

.post .post-body img.post-thumbnail {
float: left;     /*Defines whether the thumbnail will float to the left, to the right, or not at all.*/
height: 120px;     /*Defines the height of the thumbnail.*/
margin: 0 5px 10px 0;     /*Defines the margin.*/
width: 120px;     /*Defines the width of the thumbnail.*/
}

The ‘Read More’ links

To style the ‘Read More’ links, we need to copy and customize the following code, right before ]]</b:skin>:

a.readmore {
/* CSS properties go here */
}

Demo

You can take a look at the result right here.

Author

— Quite Random

Compatibility

IE 7 – Firefox – Chrome
Platform: Blogger Beta

Demo

— Template :: Whiteness (Default version)

Download

Instructions

Desde el panel de Blogger, en Configuración> Formato> Formato de cabecera de fecha, elegimos la penúltima opción (Día Mes Año :: 08 Mayo 2008).
— From our Blogger Dashboard, in Settings> Formatting> Date Header Format, we pick the option before last (Day Month Year :: 08 May 2008).

Para agregar un minipost, creamos un post, agregándole la etiqueta ‘minipost‘.
— To add a minipost, we simply create a post with the tag ‘minipost.’

La edición de fuentes y colores está habilitada desde el Panel.
— Fonts & Colors edition is enable from the Dashboard.

‘Read More’ Hack

Para cambiar el número de caracteres a mostrarse en el resumen automártico, desde nuestro Panel Blogger (Edición de HTML), buscamos las siguientes líneas en el código JavaScript antes de </head>, y cambiamos los valores:
— To change the number of characters to be shown in the automatic post summary, from our Blogger Dashboard (Edit HTML), we look for the following lines in the JavaScript code before </head>, and change the values:

summary_noimg = 250;
summary_img = 250;

Para cambiar las dimensiones de las imágenes mostradas en el resumen, cambiamos los valores resaltados en el código mostrado aquí abajo:
— To change the dimensions of the thumbnails shown in the summary, we have to change the highlighted values in the code shown below:

.post .post-body img.post-thumbnail {float: left; height: 120px; margin: 0 5px 10px 0; width: 120px;}

También podemos cambiar el texto ‘Read More’ que aparece en los links de los resúmenes. Sencillamente buscamos en nuestra plantilla, con los artilugios expandidos, el siguiente código y cambiamos lo resaltado en rojo:
— We can also change the ‘Read More’ text that appears in the links next to the summaries. We should look for the following code in our template, with the widget templates expanded, and change what’s highlighted in red:

<a class='readmore' expr:href='data:post.url'>Read more &#187;</a>

El procedimiento es sencillo; basta con agregar una etiqueta condicional, y listo. Pero al escribir este tutorial, pensé en presentar otra posibilidad; más concretamente cómo mostrar dos diferentes sidebars: una en los posts individuales, y otra en el resto de páginas (incluyendo la principal).

Instalación

1. Desde nuestro Panel/Escritorio Blogger, nos dirigimos a Edición de HTML.

2. SIN expandir artilugios, buscamos la sección de nuestra sidebar, que debería verse algo así:

<div id="sidebar-wrapper">
  <b:section class='sidebar' id='sidebar' preferred='yes'>
  Widgets
  </b:section>
</div>

3. Arrriba de la primera línea en rojo, agregamos la siguiente etiqueta condicional:

<b:if cond='data:blog.pageType != "item"'>

4. Si solamente queremos ‘quitar’ la sidebar de los posts individuales, agregamos la siguiente línea debajo de la segunda línea en rojo, y aquí terminamos:

</b:if>

Si no, agregamos el siguiente código, y continuamos:

<b:else/>
  <div id="sidebar-posts">
    <b:section class='sidebar' id='sidebarposts' preferred='yes'/>
  </div>

</b:if>

Estilos

Generalmente los estilos de nuestra sidebar (en general) suelen darse al contenedor de la sección (que tiene un ID específico; suele ser sidebar-wrapper). Los atributos para los widgets, encabezados, listas y demás se dan a la clase de la sección.

#sidebar-wrapper {
/* Atributos para el contenedor de la sidebar */
}

.sidebar h2 {
/* Encabezados */
}

.sidebar .widget {
/* Widgets */
}

.sidebar .widget-content {
/* Contenido del widget */
}

Es por esta razón que no he cambiado las clases de las secciones, sino sólamente el ID del contenedor (sidebar-posts). Esto significa que nuestros widgets y sus encabezados tendrán la misma configuración, sin necesidad de añadir nada más. Lo que sí podemos (y debemos) estilizar el contenedor de la sidebar de los posts individuales.

Una vez más, los estilos CSS, son todo lo que se encuentra antes de ]]</b:skin>.

#sidebar-posts {
/* Atributos para el contenedor de la sidebar en posts individuales */
}

Uso

El único ‘problema’ (relativo de todos modos) que hay es que desde nuestro Panel solamente podemos editar y mover los wigets de la sidebar en la página principal. Para los posts individuales, debemos agregarlos y ordenarlos directamente desde Edición de HTML. Ya en las páginas individuales, podemos editarlos con el ícono de Edición que Blogger proporciona.

Demo

Como siempre :D … acá un demo en funcionamiento.

Authors

Designed by: Tutorial Blog
Coded by: Quite Random

Compatibility

IE 7 – Firefox – Chrome
Platform: Blogger Beta

Demo

— Template :: Tuut

Download

Instructions

Desde el panel de Blogger, en Configuración> Formato> Formato de cabecera de fecha, elegimos la penúltima opción (Día Mes Año :: 08 Mayo 2008).
— From our Blogger Dashboard, in Settings> Formatting> Date Header Format, we pick the option before last (Day Month Year :: 08 May 2008).

En breves rasgos, estos posts versión miniatura suelen utilizarse como ‘notas rápidas’, pequeñas, referenciales, de aviso, notificación, etc. que no necesariamente requieren de un post tradicional. Se caracterizan por tener un diseño y estructura distinta, aunque son técnicamente sólo posts con una categoría diferente (ej. Notas rápidas, Actualizaciones, Miniposts, etc.). En la imagen de arriba, vemos cómo Francisco los ha diseñado para Blog and Web.

Hasta hace poco creía que lograr esto en Blogger era difícilmente posible, pero una vez que me topé con un post en Blogger Buster, y más recientemente éste de Vagabundia, me puse a jugar con los códigos. (Suene o no geek, es divertido). En Vagabundia, lo que muestra JMiur es básicamente cómo utilizar estos miniposts fuera de la secuencia cronológica de los posts tradicionales; yo, en cambio, me he enfocado más en cómo cambiar su estructura (y diseño) dentro de dicha secuencia (más como se usa en Blog and Web, digamos).

Instalación

1. Creamos un post con la categoría minipost.

2. Desde Edición de HTML (Panel » Diseño), expandimos artilugios.

3. En el siguiente código, agregamos lo que está resaltado.

    <b:loop values='data:posts' var='post'>

      <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:label.isLast == &quot;true&quot;'>
        <b:if cond='data:label.name != &quot;minipost&quot;'>

        <b:if cond='data:post.dateHeader'>

          <h2 class='date-header'><data:post.dateHeader/></h2>
        </b:if>
          <b:include data='post' name='post'/>

        <b:else/>
          <b:include data='post' name='minipost'/>

        </b:if>
        </b:if>
      </b:loop>

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:include data='post' name='comments'/>

      </b:if>
      <b:if cond='data:post.includeAd'>
        <data:adEnd/>
        <data:adCode/>
        <data:adStart/>
      </b:if>

      <b:if cond='data:post.trackLatency'>
        <data:post.latencyJs/>
      </b:if>
    </b:loop>

4. Buscamos la siguiente línea:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

y debajo de ella, pegamos el siguiente código:

<b:includable id='minipost' var='top'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <div class='minipost home'>
    <div class='date'><data:post.dateHeader/></div>

    <div class='body'>
      <data:post.body/>
      <div class='clear'/>
    </div>
    <div class='meta'>

      <a expr:href='data:post.url'>permalink</a> |
      <a expr:href='data:post.url + &quot;#comments&quot;'>comments</a>
      <b:include data='post' name='postQuickEdit'/>
    </div>

  </div>

<b:else/>

  <div class='minipost item'>
    <div class='date'><data:post.dateHeader/></div>

    <div class='title'>
      <a expr:href='data:post.url'>
        <data:post.title/>
      </a>
    </div>

    <div class='body'>
      <data:post.body/>
      <div class='clear'/>
    </div>
    <b:include data='post' name='postQuickEdit'/>

  </div>
</b:if>

</b:includable>

De esta forma, habremos definido cómo será la estructura de los miniposts en las páginas del blog, y los posts individuales.

En este ejemplo, en los miniposts que se verán en la página principal, archivos y categorías, se mostrará solamente la fecha, el contenido, y dos enlaces (el enlace permanente al minipost, y el enlace a los comentarios). En los miniposts individuales, se mostrará la fecha, el título y el contenido.

— Podemos usar Vista Previa para tener una idea de cómo se verán los miniposts ahora.

Estilos

Los estilos (colores, tamaños, fondos, fuentes, etc.) los definimos con CSS (el código antes de ]]</b:skin>, utilizando las clases de cada contenedor:

.minipost.home { /* Miniposts en la página principal, archivos, y categorías */ }
  .minipost.home .date { /* Estilos para la fecha */ }
  .minipost.home .body { /* Estilos para el cuerpo del minipost */ }
  .minipost.home .meta { /* Estilos para el 'footer' del minipost */ }

.minipost.item { /* Estilos para los miniposts individuales */ }
  .minipost.item .date { /* Estilos para la fecha del minipost individual */ }
  .minipost.item .title { /* Estilos para el título del minipost individual  */ }
  .minipost.item .body { /* Estilos para el cuerpo del minipost individual */ }

Demo

Acá un demo en funcionamiento.