Plantilla para Blogger: Brushed Metal

Brushed Metal es una plantilla para Blogger completamente gratuita que incluye las siguientes características:

• Footer multicolumna (6 gadgets).
• Sidebar a la izquierda.
• Comentarios  anidados y con avatares de 60px (Por defecto 36px máximo).
• Marcadores en el pie de página.
• Algunas transiciones CSS3.
• Thumbnails redimensionables y límite de resúmen personalizable (Créditos a Oloman).

Demo | Descargar

Instrucciones de configuración:

Añadir gadgets en el footer:

En la sección "Diseño" de tu escritorio, verás en el pié de página 6 espacios para incluir gadgets, cada sección soporta un máximo de 1 gadget para así evitar problemas de visualización:

Si deseas desbloquear dichos límites, deberás buscar el siguiente código:

maxwidgets='1'

Y posteriormente suprimir los 6 códigos.

Configurando el menú:

El código del menú es el siguiente:

<div id='menu'>
<ul>
<li><a href='/'>Inicio</a></li>
<li><a href='URL1'>Contacto</a></li>
<li><a href='URL2'>Ejemplo</a></li>
<li><a href='URL3'>Ejemplo</a></li>
<li><a href='URL4'>Ejemplo</a></li>
<li><a href='URL5'>Ejemplo</a></li>
<div class='clearfix'/>
</ul>
</div>

Para modificar los enlaces reemplaza los valores URLnº y el nombre de cada enlace, por ejemplo:

<div id='menu'>
<ul>
<li><a href='/'>Inicio</a></li>
<li><a href='http://www.tu-blog.blogspot.com/p/contacto.html'>Contacto</a></li>
<li><a href='http://www.tu-blog.blogspot.com/p/acerca.html'>Acerca de nosotros</a></li>
<li><a href='http://www.tu-blog.blogspot.com/p/indice.html'>Índice</a></li>
<li><a href='http://www.tu-blog.blogspot.com/p/followers.html'>Seguidores</a></li>
<li><a href='http://www.tu-blog.blogspot.com/p/autor'>El autor</a></li>
<div class='clearfix'/>
</ul></div>

Cambiando la imagen de las entradas sin thumbnail:

Con la casilla "Expandir plantillas de artilugios" activada, símplemente busca la siguiente URL y reemplázala por tu imagen personalizada:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuZUr241J7arM4AVL0V6P0lPpR4zhEY7PVIT6teiHYV5aa4wyLLsp17Mym3fw-fcgtDpHZqEcuJxDsQ7t0bTAK5gOqO5BavzUpFlbaSGHP4QqGg6YG7wUdDP4p7ejbWriphPWGsMW5BLoD/s1600/no-disponible.png

Modificar el tamaño de la imagen en miniatura y límite en el resúmen:

Si deseas modificar el tamaño de la imagen de cada post, entonces busca el siguiente código:

.post .thumbnail {
float:right;
width:72px;
height:72px;
padding:4px;
box-shadow:0 0 5px #999;
border:1px solid #FFF;
}

Modifica el tamaño de los valores width y height. También deberás modificar el valor destacado en el siguiente código:

<script type='text/javascript'>document.write(redimthumb(&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;,&quot;<data:post.thumbnailUrl/>&quot;,150));</script>

Para aumentar o disminuir la cantidad de carácteres de cada resúmen, entonces modifica el valor numérico destacado en el siguiente código:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>
$(document).ready(function() {
      $(&quot;.summary&quot;).text(function(index, text) {
            return text.substr(0, 520) +&#39;...&#39;;
      });
});
</script>
</b:if>

Nota: Para corregir el ancho del resúmen en caso de usar una imagen muy grande o muy pequeña, entonces busca el siguiente código y modifícalo a tu antojo:

.summary {
width:620px;
float:left;
}

Recuerda que puedes modificar, compartir y subir esta plantilla en donde quieras, siempre y cuando incluyas un enlace al sitio original.