La semana pasada explique qué es un índice o tabla de contenidos, su estructura y las diferentes tablas de contenidos que he encontrado para Blogger. Hoy voy a empezar una serie de posts para mostrarte como instalar una de estas tablas en nuestro blog y cómo personalizarla a tu gusto con códigos CSS. La idea es hacerlo todo paso a paso, y por eso se alargará un poco.La tabla de contenidos que vamos a usar es la de Bloggerprofessionals.com, que es una de las pocas que podemos personalizar. Las podemos personalizar gracias a que nos dan un código CSS con los selectores de la tabla de contenidos. Pero empecemos por la instalación.
1. Entra en el editor de Blogger. Vas a la pestaña Páginas y creas una página en blanco.
2. En la página abre el editor de HTML y pega el siguiente código Script.
<div id="toc"><script type="text/javascript" src="http://bloggerprofessionals.googlecode.com/files/MyTOC.js"></script>
<script src="http://www.bloggerprofessionals.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
3. La URL que está en azul la tienes que cambiar por la dirección de tu blog de Blogger, por ejemplo: www.miblog.blogspot.com
4. Personalizar. El número que está en rojo es la cantidad de entradas máximas que queremos que salgan. Si cambias el número 9999 a 100, saldrán sólo las últimas 100 que has publicado. Si no quieres límites déjalo como está.
5. Guarda la página. Perfecto, ya tienes una tabla de contenidos del blog, pero ahora vamos a embellecerlo con código CSS.
6. Tienes que entrar a la plantilla del blog (guardate una copia por si acaso) y buscar la zona del código CSS, que es la que va entre <skin> y </skin>. Es bastante fácil de identificar con el nuevo editor ya que es una zona en que todo el código está en azul. Yo lo que hago es pegarlo casi al final, antes del CSS para la plantilla para móviles, justo antes de un sitio que pone.
/* Mobile
----------------------------------------------- */
7. Una vez localizado el sitio, pega lo siguiente.
/* Indice de contenidos TOC
----------------------------------------------- */
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
8. Guardas la nueva plantilla. Comprueba que la tabla de contenidos es ahora tal y como puedes ver en la imagen de arriba, con unos bonitos degradados y las etiquetas en letras de color blanco. Es una presentación muy cuidada que utiliza CSS3, pero como es posible que estos colores no peguen mucho con el diseño de tu blog, en los próximos post vamos a aprender como personalizar su aspecto con CSS.
Para mañana el tutorial de como cambiar los colores de la tabla de contenidos y el tamaño de las letras, pero si alguien quiere ir probando dejo una pequeña aclaración de los 7 selectores que se utilizan.
SELECTORES
#toc / Es el selector de toda la tabla de contenidos.
.labl / Es el selector de la barra de las categorías.
.labl a. / Es el selector del enlace de cada categoría.
.new / Es el selector de grupo de las palabras ¡New!
.postname / Es el selector de grupo de los nombres de los posts
.postname li / Es el selector individual de los nombres de los posts
0 comentarios:
Publicar un comentario