26 mayo 2022 - 26 mayo

Colocar índice en Blogger - [ CÓDIGO ] (Solucionado)

Tener un blog es una gran manera de hacer llegar nuestro contenido a muchas personas que están buscando la información o datos que estam...

Tener un blog es una gran manera de hacer llegar nuestro contenido a muchas personas que están buscando la información o datos que estamos escribiendo nosotros.

Pero si bien podemos tener un blog conocido y contar con muchas visitas, puede que estemos perdiendo mucho tráfico si nuestro sitio de contenido no cuenta con un índice que le ofrezca al usuario artículos que pueden llegar a interesarle.

Crear índice para Blogger

¿Qué es un índice?

Un índice es un resúmen del contenido que vamos a ver en un artículo, por ejemplo, si estamos en un post sobre autos nuestro índice podría tener secciones como: "¿qué es un auto? ¿cuando surgieron los autos? ¿qué tipos de autos hay?" etc...

¿Para qué sirve un índice?

Un índice sirve basicamente para orientar al lector y darle la opción de ir directamente a la parte del post que le interese leer. Generalmente vienen en forma de enlaces que el usuario puede presionar y de esa manera irá directamente a ese apartado del artículo.

¿Qué tipos de índices existen?

Existen dos tipos de índices en un artículo y son los siguientes:

Índice interno: este tipo de vinculo logra que el usuario pueda recorrer el mismo artículo que está leyendo, y le permitirá navegar entre los distintos encabezados o titulos que contenga el post.

Índice externo: le ofrece al usuario artículos ajenos al post que está leyendo pero que guardan relevancia con el tema abordado, por ejemplo si nuestro contenido es sobre "cómo ganar dinero online", entonces podríamos mostrarle al usuario otros artículos que hayamos redactado como por ejemplo "formas de ganar dinero online", "páginas que pagan por completar encuestas", etc...

Importancia de los enlaces

Imagina estar leyendo un artículo y te salga una sugerencia de un artículo que te interesa incluso más que la entrada que estás leyendo en ese momento, ¿le harías click? claro que sí!, el usuario que visita nuestro sitio pasa exactamente la misma situación, por ello veremos como implementar un menú automático de enlaces externos en nuestras entradas que muestre determinados artículos que pueden llegar a ser de interés para nuestro lector.

Cómo colocar un índice de entradas en Blogger

Cuando somos redactores de un blog, es sumamente importante ofrecerle al usuario la opción de leer otros artículos que puedan serle de interés, ya que esto a su vez logrará mantener una retención de público en nuestro sitio.

Iremos paso por paso ya que primero deberemos configurarlo para que sea acorde a nuestro sitio y muestre nuestras propias entradas.

Veamos como quedará nuestro índice a continuación, solo como ejemplo ya que podrás modificarlo 100% con saber algo básico de CSS.

Quizás te interese

Implementación del código Script para nuestro índice

Lo primero que haremos será copiar en nuestra entrada (usando el formato HTML) el siguiente fragmento de código.



  <br/>

  <center><strong>Quizás te interese</strong></center>

  <div id="all-post" class="all-post"></div>

  <script>

  var conf = {

   sortBy:   'datenewest',  // forma en que se muestran las artículos publicados

   lastPost: 5,            // últimos post (10) a los que les pongo una marca

   date:     0,             // 0:no aparece la fecha de publicación | 1:mostramos la fecha de publicación

   newPost: 'Nuevo!!',      // texto o marca que aparece en los últimos artículos

   newtab:   1              // 0:abre link en la misma ventana | 1:abre link en ventana nueva

  }

  </script>

  <script src='https://cdn.jsdelivr.net/gh/jmacuna/index-blogger@master/index-blogger.js'></script>

  <script src='https://TUSITIO.blogspot.com/feeds/posts/default?max-results=5&alt=json-in-script&callback=loadtoc'></script>

  <br/>

Una vez que copiemos el código en nuetra entrada deberemos modificar la palabra "TUSITIO" por nuestro sitio de Blogger actual ya que sino, no funcionará.

Veremos en la sección donde dice "var conf" que podemos configurar distintas opciones en nuestro índice, cada una tendrá a su lado su descripción, y a continuación te dejo las opciones que puedes usar en algunas de ellas.

sortBy: Se refiere a la forma en la que mostrará nuestras entradas en el índice y las opciones que tienes disponibles son:

orderlabel: ordena alfabéticamente por Categorías
titleasc: ordena alfabéticamente por Título del Post (de A a Z)
titledesc: ordena alfabéticamente por Título del Post (de Z a A)
dateoldest: ordena el Título del Post por fecha de publicación (del más antiguo al más reciente)
datenewest: ordena el Título del Post por fecha de publicación (del más reciente al más antiguo).

Un dato importante a conocer es que si prestamos atención al texto que copiamos anteriormente (código) podremos observar en el último script que en su URL hay una parte que dice "max-results=5", ese número indicará la cantidad de entradas que se mostrarán en el índice.

estilos ccs entradas recomendadas blogger

Con estilos se ve más bonito!

Nuestro script ya debería ser 100% funcional, pero seguramente no te agradará como se ve, ya que hasta el momento no tiene ningún estilo configurado y eso hace que se vea espantoso.

Por ello veamos como configurar el css de nuestro índice de entradas para Blogger.

Empezaremos copiando el siguiente código CSS que nos brindará los estilos y logrará que se vea más lindo todo.

.all-post ol{
 		list-style-type: none;
		}
	.all-post li a{
        text-decoration:none;
        padding:0 2px;
        color:#445;
        font-size:1rem
      	}
    .all-post a:visited{
     color:#445;
     text-decoration:none
    	}
    .all-post li:hover a{
     outline:0;
     text-decoration:none;
     color:#eee
    	}
    .all-post li{
      background:#eee;
      padding:.5rem 1rem;
      border-bottom:1px solid #c5c5c5
    	}
	.all-post li strong{
      color: #ff6600;
      font-family: Charcoal, sans-serif;
      font-size: 1rem;
      letter-spacing: 2px;
      margin-left: 5px;
		}
    .all-post li:nth-child(){
      background-color:#f5f5f5;
      border-bottom:1px solid #b5b5b5
    	}
    .all-post li:hover{
     background:#1680c6
    	}
    .all-post {
      margin:3px auto;
      font-size:1rem;
      font-weight:400;
      letter-spacing:1px
    	}
    .all-post ol li strong em{
      font-style:italic;
      color:#d24f18
    	}
    .all-post p a{
      margin:0 0 10px 0;
      padding:10px;
      color: #fff;
      font-size:1rem;
      line-height:16px;
      font-family:'Oswald',sans-serif;
      font-weight:normal;
      text-decoration:none;
      outline:1px dashed #98abb9;
      outline-offset:-2px;
      background-color:#1680c6;
      -webkit-box-shadow:2px 2px 2px #000;
      -moz-box-shadow:2px 2px 2px #000;
      box-shadow:2px 2px 2px #000
    	}

Una vez lo hayamos copiado nos dirigiremos al HTML de nuestro blog, para ello iremos a "Tema", presionaremos la solapa y elegiremos "modificar HTML".

Ya que te encuentres en el código de tu blog, pegarás el código CSS donde sea que tengas los estilos de tu sitio, generalmente entre las etiquetas "STYLE" o "SKIN" si usas las oficiales de Blogger.

Conclusión

Si realizaste correctamente todos los pasos anteriores ya deberías poder ver correctamente el índice en tu entrada, ten en cuenta que este método puedes colocarlo en una entrada de blogger o bien en una página independiente.

Dejame tu comentario si te sirvió este artículo y no olvides compartirlo que me ayudas muchísimo!