Mil Trucos Blogger

Espectacular índice por etiquetas para Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

23 Comentarios

  1. Anonymous Anonymous
    Mayo 25, 2014    

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

    • Mayo 26, 2014    

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

      Saludos

  2. Mayo 26, 2014    

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

    • Mayo 26, 2014    

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

  3. Mayo 27, 2014    

    Este comentario ha sido eliminado por un administrador del blog.

  4. Mayo 27, 2014    

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

    • Mayo 27, 2014    

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

      Saludos

    • Mayo 27, 2014    

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

  5. Mayo 28, 2014    

    Ya funciona estupendamente. Gracias

  6. Mayo 28, 2014    

    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

  7. Junio 1, 2014    

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

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

    • Junio 8, 2014    

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

    • Junio 9, 2014    

      Si señor!

    • Junio 9, 2014    

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

  8. Anonymous Anonymous
    Junio 14, 2014    

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

  9. Julio 28, 2014    

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

  10. Anonymous Anonymous
    Agosto 9, 2014    

    amigo el script alojado en googledrive no jala

  11. Febrero 6, 2015    

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

    • Febrero 6, 2015    

      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

    • Febrero 10, 2015    

      ¿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 😀

    • Febrero 10, 2015    

      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

  12. Anonymous Anonymous
    Febrero 7, 2015    

    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 *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo