Tutorial: Índice por etiquetas para Blogger con un diseño espectacular

  • Autor Autor Juvinao
  • Fecha de inicio Fecha de inicio
Juvinao

Juvinao

1
Xi
Programador
Verificación en dos pasos activada
Suscripción a IA
En el día de hoy voy a compartir un espectacular índice por etiquetas para Blogger, creo que es de los mejores que hay en la actualidad.

El diseño es genial y con algo de CSS se puede adaptar a cualquier gusto :welcoming:

Espectacular+indice+Blogger.png

DEMO

Para usar este índice en sus blogs, solo deben ir a la edición HTML de una pagina estática 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😛ointer;}
#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>

Las partes personalizables están resaltadas en negrita y color verde, esto es todo por el día de hoy y espero que les haya gustado a todos. :encouragement:

Si tienen dudas o preguntas, por favor comentarlas que con mucho gusto les ayudare a resolverlas 😉

Créditos a Amor Sevillista y Mil Trucos Blogger
 
Última edición:
Perdon pero va en el head o en el body o en b:skin. ¿dónde se coloca el código?
 
Gracias

Enviado desde mi Haier HW-W910 mediante Tapatalk
 
Muy bien por resaltar las partes editables. Eso ayuda mucho a los que no somos tan hábiles para encontrar esas cosas.
 
Buen post, deberías explicar un Poco mas, pero igual lo apruebo xD
 
el titulo mas adecuado para esto seria digamos espectacular mapa del sitio :witless:
 
a Favoritos :encouragement: buen tutorial
 
Atrás
Arriba