Luego de pasar un tiempo sin publicar trucos para Blogger, vengo a reivindicarme con todos ustedes, en el día de hoy les voy a compartir el espectacular índice por etiquetas que yo usaba en Mil Trucos Blogger y que muchos usuarios me lo habían pedido, espero que les agrade este aporte.

Para usar este índice en sus blogs, solo deben ir a la edición HTML de una pagina y pegar allí el siguiente código:
<style type="text/css">
#tabbed-toc {
margin:0 auto;
background-color:#58ACFA; /*color fondo etiquetas*/
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
overflow:hidden;
position:relative;}
#tabbed-toc .loading {
display:block;
padding:5px 10px;
font:normal bold 10px Arial,Sans-Serif;
color:white;}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0 0;
padding:0 0;
list-style:none;}
#tabbed-toc .toc-tabs {
width:15%;
float:left;}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/13px Arial,Sans-Serif;
height:32px;
overflow:hidden;
text-overflow:ellipsis;
color:#F2F2F2; /* color enlace etiqueta */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;}
#tabbed-toc .toc-tabs li a:hover {
background-color:#6E6E6E; /* background de etiquetas */
color:white;} /* color enlace etiqueta con background */
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#0174DF/* background de la primera etiqueta */
color:white; /* color enlace primera etiqueta con background */
-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
box-shadow:-2px 2px 2px rgba(0,0,0,.5);
position:relative;
z-index:5;
margin:0 -1px 0 0;}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width:85%;
float:right;
background-color:#CEE3F6; /* color separación entre entradas */
border-left:5px solid #81BEF7; /* borde separación entre etiquetas y entradas */
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
-moz-box-shadow:0 0 7px rgba(0,0,0,.7);
box-shadow:0 0 7px rgba(0,0,0,.7);}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Arial,Sans-Serif;}
#tabbed-toc .panel li a {
display:block;
position:relative;
font-weight:bold;
font-size:11px;
color:#6E6E6E;/* color enlace de entradas */
line-height:20px;
height:20px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden;}
#tabbed-toc .panel li:nth-child(even) {
background-color:#A9D0F5;} /* primer color separación entre entradas */
#tabbed-toc .panel li:nth-child(even) {
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li.bold a {
background-color:#333; /* color background de las entradas */
color:white; /* color del enlace con el background de las entradas */
outline:none;}
@media (max-width:700px) {
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none;
display:block;}
#tabbed-toc .toc-tabs li {
display:inline;
float:left;}
#tabbed-toc .toc-content {
border:none;}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;}}
</style>
<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.miltrucosblogger.info/" title="indice">Mil Trucos Blogger</a>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://www.miltrucosblogger.info/", /* url de tu blog */
containerId: "tabbed-toc",
activeTab: 1,//()
showDates:false,
numChars: 200,
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 5,
newText: " - <em style='color:red;'>Nuevo!</em>"
};
</script>
<script src='https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/indice.js
' type='text/javascript'></script>

Ahora deben eliminar lo resaltado en color azul y reemplazarlo por la URL de tu pagina y listo con esto hemos terminado el tutorial de hoy.

Espero que a todos les haya gustado este tutorial, si tienen alguna duda sobre esta entrada no duden en comentarla.

Vía/Amorsevillista

Categorías: Trucos Blogger

23 commentarios

Anonymous · mayo 25, 2014 a las 9:18 pm

Muchas gracias, siempre veía que lo tenías… y esperaba con ansias que lo postearas 😀

    Hayder Juvinao · mayo 26, 2014 a las 2:32 pm

    Gracias por comentar amigo, bueno ya ves que lo he compartido 🙂

    Saludos

Andrés Castañeda López · mayo 26, 2014 a las 12:11 pm

-_- La Misma Mierda¡no explica como se hace solo da el codigo. -_-

    Hayder Juvinao · mayo 26, 2014 a las 2:33 pm

    Andres, por favor comenta con mas respeto, dime que quieres que te explique y con gusto lo hago (p)

Nitro Sonic · mayo 27, 2014 a las 5:33 am

Este comentario ha sido eliminado por un administrador del blog.

Localiza Recursos Sociales · mayo 27, 2014 a las 9:13 am

Lo he implementado como dices y da error.Qué hice mal?Puedes verlo aquí
http://localizarecursos.blogspot.com.es/p/indice.html

    Hayder Juvinao · mayo 27, 2014 a las 8:07 pm

    Amigo pero no puedo revisar porque tienes bloqueado el clic derecho, como pusiste la URL de tu blog?

    Saludos

    Localiza Recursos Sociales · mayo 27, 2014 a las 10:02 pm

    Vaya.puse
    localizarecursos.blogspot.com.es
    Es lo que tenia que poner ? No?
    Gracias

Localiza Recursos Sociales · mayo 28, 2014 a las 9:44 am

Ya funciona estupendamente. Gracias

Accionglobal kike · mayo 28, 2014 a las 8:22 pm

Gracias por compartir el código, he observado que no muestra todas las entradas de mi blog, ¿se podría arreglar de alguna manera, o hay límite de fecha de las entradas más antiguas?

Saludos y gracias de nuevo por tu tiempo.

http://accionglobalxkiketrucker.blogspot.com/p/tabbed-toc-margin0-autobackground.html

Juan Oviedo · junio 1, 2014 a las 6:32 pm

En mi blog solo sale cargando, o como hago para que funcione correctamente?

http://laesquinadenaruto.blogspot.com/p/tabbed-toc-margin0-autobackground.html

    Hayder Juvinao · junio 8, 2014 a las 9:50 pm

    Amigo pero pusiste la URL de tu blog en el script?

    Juan Oviedo · junio 9, 2014 a las 5:59 pm

    Si señor!

    Juan Oviedo · junio 9, 2014 a las 6:03 pm

    Perdón, creo que sí había equivocado al modificar la url de mi blog, gracias por tu atención y genial el script 🙂

Anonymous · junio 14, 2014 a las 12:46 am

hola, gracias por el indice, ¿Hya alguna forma de escoger las etiquetas que se muestran?

Natsuo Kara Effector · julio 28, 2014 a las 7:39 pm

Muchas gracias lo use en mi blog
http://karaeffector.blogspot.com
Muchas gracias por compartirlo

Anonymous · agosto 9, 2014 a las 4:32 pm

amigo el script alojado en googledrive no jala

Ouróboros x · febrero 6, 2015 a las 6:12 am

Ya no sirve ese indice. ¿Qué pudo pasar Juvinao?

    Hayder Juvinao · febrero 6, 2015 a las 8:44 pm

    Amigo el script fue eliminado de Google Drive que fue donde lo alojé y se me olvidó guardarlo en mi PC, a mi me tocó recurrir a otro indice ;-(

    Saludos

    Ouróboros x · febrero 10, 2015 a las 4:17 am

    ¿Te lo borraron a ti? Pensé que Google Drive no borraba nada, por cierto, puedo alojar en Google Drive los CSS para que me aligeren la carga del blog? o ¿cómo es eso? Tienes algún tutorial? para echarle un vistazo.

    Saludos 😀

    Hayder Juvinao · febrero 10, 2015 a las 8:28 pm

    Amigo al parecer es un error temporal porque ya el indice carga de nuevo, no te recomiendo alojar el CSS en un host externo porque en vez de aligerar la carga va hacer que se demore más la carga.

    Saludos

Anonymous · febrero 7, 2015 a las 12:30 am

Buenas noches mi pregunta es distinta al tema. Como puedo poner un fondo a mi footer, por mas que busco mucho no lo encuentro ;(( gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *