"Estimado visitante... He querido compartir contigo en este blog, lo que para mi en alguna ocasión me ha sido muy útil. A todos los bloggers que han contribuido a enriquecer mi experiencia y conocimiento como blogger, "muchas gracias"

Crear una tabla de contenidos (Etiquetas) en Blogger con unos simples pasos | por Luis Chavez

 Aprender como crear una tabla de contenidos en Blogger con unos simples paso

Aprender como crear una tabla de contenidos en Blogger con unos simples pasos
Blogger sigue realizando algunos cambios importantes en su plataforma web, como diseñador web veo las cosas aun más fáciles y divertidas al momento de crear Plantillas, gadgets entre un sin fin de trucos para Blogger.
   
En este post aprenderán a crear una tabla de contenido con unos simples pasos, solo debe seguir las instrucciones de este tutorial. La tabla de contenido o mapa del sitio puede ubicarlo en una entrada o en una pagina de Blogger.
Luis Chavez autor de este post

A continuación puede ver su demostración en el siguiente blog de demos


Aprende ¿Cómo crear una tabla de contenido o SITEMAP en Blogger?


Instrucciones

1.- Abrir Blogger.com

2.- Un clic en Páginas

Aprender como crear una tabla de contenidos en Blogger con unos simples pasos



3.- Un clic en Nueva Página

Aprender como crear una tabla de contenidos en Blogger con unos simples pasos

4.- Active la casilla en Modo HTML

Aprender como crear una tabla de contenidos en Blogger con unos simples pasos

5.- Inserte el siguiente código

<div class="tabla-contenidos">
  <div class="text-tabla">
  Bienvenidos al mapa del sitio web, gracias por visitarnos..   
  </div>
<div id="tabla-cont"><span class="loading">Cargando...</span></div></div>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "https://tema-g.blogspot.com/", // Dirección de su Blog URL
    containerId: "tabla-cont",
    activeTab: 1, 
    showDates: false, 
    showSummaries: false,
    numChars: 200, 
    showThumbnails: false, 
    thumbSize: 40, 
    noThumb: "https://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", 
    monthNames: [ 
        "Enero",
        "Febrero",
        "Marzo",
        "Abril",
        "Mayo",
        "Junio",
        "Julio",
        "Agosto",
        "Septiembre",
        "Octubre",
        "Noviembre",
        "Diciembre"
    ],
    newTabLink: true, 
    maxResults: 99999, 
    preload: 0, 
    sortAlphabetically: true, 
    showNew: 7, 
    newText: " - <em style='color:blue;'>Nuevo!</em>" 
};
</script>
<script type="text/javascript" src="https://cdn.statically.io/gh/Ayudadeblogger/tabla-contenido/main/tabla-cont.js"></script>
<style>
  .tabla-contenidos {
    background-color: #f9bb2d;;
    max-width: 100%;
    border-radius: 12px;
    padding: 16px 24px;
    position: relative;
}
  .text-tabla {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    letter-spacing: -.5px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: Google Sans,arial,sans-serif;
    letter-spacing: .1px;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    text-align: center;
}
  #tabla-cont {
  margin:0 auto;
  background-color:#fff;
  -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;
  color:#333;
    padding: 14px;
    border-radius: 8px;
}

#tabla-cont .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 10px Arial,Sans-Serif;
  color:white;
}

#tabla-cont ul,
#tabla-cont ol,
#tabla-cont li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}

#tabla-cont .toc-tabs {
  width:30%;
  float:left;
}

#tabla-cont .toc-tabs li a {
  display:block;
  font:normal bold 12px/28px Arial,Sans-Serif;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#222;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}

#tabla-cont .toc-tabs li a:hover {
  background-color:#3f51b5;
  color:white;
}

#tabla-cont .toc-tabs li a.active-tab {
  background-color:#3f51b5;
  color:white;
  -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;
  border-bottom: 4px solid #000;
}

#tabla-cont .toc-content,
#tabla-cont .divider-layer {
  width:70%;
  float:right;
  background-color:white;
  border-left:5px solid #3f51b5;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

#tabla-cont .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);
}

#tabla-cont .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Arial,Sans-Serif;
}

#tabla-cont .panel li a {
    display: block;
    position: relative;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
    outline: none;
    overflow: hidden;
    padding: 17px;
    color: #222;
}

#tabla-cont .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}

#tabla-cont .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #3f51b5;
  overflow:hidden;
}

#tabla-cont .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}

#tabla-cont .panel li:nth-child(even) {
}

#tabla-cont .panel li a:hover,
#tabla-cont .panel li a:focus,
#tabla-cont .panel li a:hover time,
#tabla-cont .panel li.bold a {
box-shadow: 5px 5px 25px 0px rgb(46 61 73 / 20%);
    border-radius: 0.375rem;
    transition: all 0.3s ease;
  outline:none;
}

#tabla-cont .panel li.bold a:hover,
#tabla-cont .panel li.bold a:hover time {
  background-color:#222;
}

@media (max-width:700px) {

  #tabla-cont .toc-tabs,
  #tabla-cont .toc-content {
    float:left;
    width:100%;
    display:block;
  }
  #tabla-cont .toc-tabs li {
    display:inline;
    float:left;
  }

  #tabla-cont .toc-content {
    border:none;
  }
  #tabla-cont .divider-layer,
  #tabla-cont .panel li time {
    display:none;
  }
}
  </style>
6.- Realice los siguiente cambios:

Elimine la dirección URL que esta marcado de color naranja, remplace por la dirección URL de su blog de Blogger

https://tema-g.blogspot.com/

7.- Eso es todo, un clic en Publicar

Es momento de visitar su nueva pagina de tabla de contenidos de su blog de Blogger
¿Necesitas ayuda? La encontrarás en el blog de Luis Chavez autor de este post

Read more...
, 0 comments
Labels: , , , , ,

Gadget de Etiquetas en un Scroll Box

Este truco es perfecto para cuando tienes un gran número de etiquetas pero no quieres que se oculten como se hace con el truco del menú desplegable que deja oculta todas las etiquetas hasta que el lector desglose el gadget; en cambio aquí dejarás siempre visible las etiquetas y te ahorrarás buen espacio.



Para agregar este truco a tu blog primero debes tener añadido el gadget de etiquetas.

Luego ir a Tema, Editar HTML y justo arriba de:
]]></b:skin>

pega lo siguiente:
#Label1 .widget-content{height:200px; width:auto;overflow:auto;}

Guarda los cambios y listo.

Cobi 4/08/2021
https://milyunacosasutiles.blogspot.com/2020/11/gadget-de-etiquetas-en-un-scroll-box.html

Read more...
, 0 comments
Labels: , , , ,

Gadget de etiquetas con dos columnas



Siguiendo con el tema para principiantes de las etiquetas, hoy vamos a ver un sencillo script que he visto ya por varios blogs para poner el gadget de etiquetas en dos columnas. Este truco le será muy útil a aquellos que tengan muchas etiquetas y se les convierta el Gadget en una lista lateral demasiado larga.

Aquí tenemos el script que deberemos insertar antes de ]]></b:skin> en la edición de HTML:
#Label1 ul li{
float: left;
width: 45%;
}
Hacemos click en "vista previa" para asegurarnos de que todo ha ido bien y guardamos. Voilá! Ya lo tenemos todo hecho!

A mi gusto, me parecía que el tamaño de letra era demasiado pequeño así que hice una pequeña modificación para aumentarla un poco:

#Label1 ul li{
font-size:20px;
float: left;
width: 45%;
}

Solo deberemos cambiar el número en azul por el tamaño de fuente deseada.

http://medioblogger.blogspot.com/2012/05/gadget-de-etiquetas-con-dos-columnas.html

Read more...
, 0 comments
Labels: , , ,

Cambiar el rótulo 'Mostrando entradas con la etiqueta'

En Blogger, cuando se accede a la página de cualquier etiqueta, nos sale en la parte superior un rótulo dentro de un recuadro gris, que nos indica que estamos viendo las entradas filtradas por esa etiqueta y adicionalmente un enlace para volver a la página de Inicio del blog (Mostrar todas las entradas).

Anteriormente vimos otro sistema que consistía en eliminar del todo el widget que genera este mensaje (status-message) y generar uno nuevo con nuestro propio código (Ver: Cabecera para páginas de etiquetas. Secciones del blog). pero lo de hoy será más sencillo porque iremos directamente al código del artilugio para cambiar allí sólo la parte que nos interesa.

Rótulo de páginas de etiquetas



Advierto que quizás no sea perfecto y que en algunas combinaciones de búsquedas + etiquetas + contenido nulo, el mensaje podría no quedar muy ajustado, pero la sencillez del cambio creo que compensa esos problemas menores... si se dieran.


La parte que nos interesa está en un includable que tiene id='status-message', por lo que editando nuestra plantilla HTML, pinchando en cualquier parte de la ventana o recuadro que contiene el código y pulsando CTRL+F, nos será fácil encontrarlo con el buscador interno de código y precisamente esa palabra clave: status-message. Luego sólo es cuestión de pinchar en la flecha a la izquierda si no aparece desplegado.

Nota: No uséis el buscador del navegador que es una de las cosas que he detectado que más problemas os genera.

En la mayoría de plantillas, será la tercera coincidencia encontrada y es inconfundible porque empieza por <b:includable id='status-message'> y no lleva barra de cierre al final (/). Este sería el artilugio original completo (para localizarlo bien y por si queréis revertir los cambios algún día):


<b:includable id='status-message'>
 <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
   <div class='status-msg-body'>
    <data:navMessage/>
   </div>
   <div class='status-msg-border'>
    <div class='status-msg-bg'>
     <div class='status-msg-hidden'><data:navMessage/></div>
    </div>
   </div>
  </div>
  <div style='clear: both;'/>
 </b:if>
</b:includable>


Lo que hay que cambiar es justo lo que he marcado en verde y lo que ahí escribamos será lo que saldrá dentro del recuadro gris. Podría ser un simple texto como "Mostrando entradas filtradas", pero también podemos usar algunos truquillos para que se vean datos adicionales.


Por ejemplo, la magia la hace en el siguiente caso las dos data que veis, que son respectivamente para mostrar la etiqueta seleccionada o la palabra insertada en un buscador interno básico.

Poniendo las dos, si una no existe porque estamos en página de etiquetas y no de búsqueda o viceversa, simplemente se mostrará una sí y la otra no. Adicionalmente he puesto un enlace para mostrar todas las entradas (con destino la página inicial) a similitud de lo que hace el artilugio original.

El resultado sería algo así como así como "Mostrando las recetas de pasta. Mostrar todas las entradas.".

Mostrando las recetas de <b><data:blog.searchLabel/><data:blog.searchQuery/></b>. <a expr:href='data:blog.homepageUrl'>Mostrar todas las entradas.</a>

Otra cosa útil sería ver el número de entradas como resultado del filtrado ("Viendo 5 artículos sobre libros"), para lo cual echamos mano de data:numPosts:

Viendo <data:numPosts/> artículos sobre <b><data:blog.searchQuery/><data:blog.searchLabel/></b>


Y ahora que conocemos esa variable que nos muestra el número de entradas ¿por qué no mostrar un rótulo distinto cuando se acaban? En este caso se vería el rótulo estándar y cuando avanzamos por recientes/antiguas, al llegar al final nos enseñaría un mensaje de que no hay más artículos para ver.

<b:if cond='data:numPosts == 0'>
 No hay más artículos sobre <b><data:blog.searchLabel/><data:blog.searchQuery/></b>.
<b:else/>
 Mostrando los artículos sobre <b><data:blog.searchLabel/><data:blog.searchQuery/></b>. <a expr:href='data:blog.homepageUrl'>Mostrar todas las entradas</a>.    
</b:if>


Por último, todo lo visto junto: condición para cuando no hay entradas y número de entradas junto con el nombre de la etiqueta o la palabra tecleada en el buscador, más un enlace al inicio:

<b:if cond='data:numPosts == 0'>
 No hay más artículos sobre <b><data:blog.searchLabel/><data:blog.searchQuery/></b>.
<b:else/>
  Mostrando <data:numPosts/> artículos sobre <b><data:blog.searchLabel/><data:blog.searchQuery/></b>. <a expr:href='data:blog.homepageUrl'>Mostrar todas las entradas.</a>    
</b:if>


Como es costumbre, en estos enlaces podéis ver la cosa funcionando: 1 y 2.

Creo que con esto quedará bastante completito, pero es que tampoco se me ocurría ninguna variante más ;)


Eso... eso... eso es todo amigos
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Otros enlaces:


Fuente: https://www.oloblogger.com/2013/11/cambiar-mostrando-entradas-status.html

Read more...
, 0 comments
Labels: , , , , ,

Etiquetas divididas en cuatro columnas encima del pié del blog

Tras haber publicado el truco para tener las etiquetas, las entradas y los enlaces de la sidebar en dos columnas, me quedé con ganas de crear otro truco similar.
Ayer por la tarde tuve el suficiente tiempo para inventar el interesante procedimiento de incluir nada más y nada menos que cuatro columnas de etiquetas encima del footer (pié del blog)...


Diseño>edición HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y encima añade estos bloques de CSS:

#etiquetasbloque {
width:870px;
text-align:left;
margin:0 auto 10px;
line-height: 1.6em;
clear:both;
padding-top: 12px;
}

.etiqueta {
color: #000000;
line-height: 1.5em;
}

.etiqueta .widget {
padding:0 0 1.5em;
margin:0 .4em 1.5em .4em;
}

.etiqueta ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.etiqueta ul li {
float:left;
list-style-type: none;
width:20%;
margin: 0 0 5px;
background: transparent url(http://www.iconfinder.net/data/icons/silk2/bullet_green.png) no-repeat left center;
padding-left: 15px;
}

.etiqueta:hover {
color: #999999;
}

Ahora busca esta línea:

<div id='footer-wrapper'>

Y encima agrega lo siguiente:

<div id='etiquetasbloque'>
<b:section class='etiqueta' id='etiqueta'>
<b:widget id='Label112' locked='false' title='Etiquetas' type='Label'>
</b:widget>
</b:section>
</div>

Con este paso finalizamos el truco. Puedes ver el resultado en vista previa.

Guarda cambios para terminar.
9/9/09

Contenido similar:


Jaime Trujillo Escobedo
Canovu



http://elbalcondejaime.blogspot.com/2009/09/etiquetas-divididas-en-cuatro-columnas.html

Read more...
, 0 comments
Labels: , , , , , , , ,
Suscribirse a: Entradas (Atom)
"Estimado visitante... He querido compartir contigo en este blog, lo que para mi en alguna ocasión me ha sido muy útil. A todos los bloggers que han contribuido a enriquecer mi experiencia y conocimiento como blogger, "muchas gracias"

  © Link Web Blog Links Bloggers by Facebook LWB 2012

Back to TOP- Volver al principio - pulsa para SUBIR