» » Indice con Estilo para el blog

Indice con Estilo para el blog


Indice, Tabla de Contenidos o Sitemap (mapa del sitio)
Un indice en tu blog hará que se vea mas organizado, sirve para mostrar el título de todas nuestras publicaciones en una sola página,(de ahí el nombre de tabla de contenidos), logrando que el visitante, pueda acceder a una vista previa de todas nuestras entradas y pueda buscar lo que necesita, mientras mira todo lo que tenemos para ofrecerle.

En una entrada anterior esplique como agregar un Indice para Blogger. Ahora les mostrare como darle algo de estilo agregándolo código CSS.

Para añadir el truco solo tienen que hacer lo siguiente.
  1. Ir a pagina.
  2. Crean una nueva pagina.
  3. Desactivan los comentarios.
  4. en el HTML de esa pagina.

Pegan lo siguiente:
<div id="indice"><script src="
https://sites.google.com/site/ratosdeblogger/script/indice.js" type="text/javascript"></script>
<script src="http://NOMBRE.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Para darle estilo a nuestro Mapa de contenidos ir a:

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado

En el recuadro pegar el Código CSS:

/*Indice
----------*/
.indice p {
font-family: 'Niconne', cursive;
font-size: 20px; /*--edite fuente--*/
background: #ff6b00; /*--edite fondo--*/
width:80%;
text-decoration:none;
text-align:center;
border-bottom:3px dashed #CCCCCC; /*--edite estilo de borde--*/
}
.indice p a:link{
color:#000; /*--edite link del titulo--*/
text-decoration:none;
text-align:center;
text-transform:uppercase;
}
.indice p a:hover{
color:#fff; /*--edite del link del titulo--*/
}
.indice li {
margin:0;
text-decoration:none;
}
#indice ol li{
list-style-type:none;
margin: 0;
margin-left: 2em;
padding: 0;
color:#000;
background: #cfe2f3;
width: 70%;
font-size: 14px; /*--edite fuente--*/
}

Cambiar NOMBRE: nombre de tu blog de blogger.
En font-family: si no la tienen en su plantilla deben agregar esta tipografía ir a Google Fonts.

Ver el indice sin estilo aquí.


Si te gusta la entrada compártela.

¡Gracias!

Publicar un comentario
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top