Agregar Caja de Interlinking Manual para Blogger

Hola Blogueros, desde hace un tiempo muchos de ustedes me estuvieron preguntando como podían poner las cajas de interlinking que ven en la web, pero para Blogger. Finalmente logre desarrollador dichas cajas a través de código HTML y CSS para que ustedes puedan utilizar las cajas de interlinking en su blog de Blogger de forma manual.

Si eres nuevo quizás tengas algunas dudas sobre varios términos, así que a continuación te las responderé:

Tabla de Contenido 📋

¿Qué es el Interlinking?
Insertar Caja de Interlinking en Blogger

¿Qué es el Interlinking?

El interlinking web tecnicamente es el enlazado interno de varios artículos entre si de una web. Por ejemplo mostramos una recomendación de leer un articulo dentro de otro, para no hacernos bolas te dejare una imagen como ejemplo.

Este seria un Ejemplo de cada de Interlinking

En otras palabras recomendamos a los usuarios leer un articulo que les puede interesar mientras que el usuario esta leyendo un articulo relacionado.

Insertar Caja de Interlinking en Blogger

Las cajas de interlinking se divide en 2 partes que técnicamente seria el código HTML (diseño) y el codigo css (estilos).

Codigo CSS

Recuerda que el código css lo debes ingresar despues del <body> en tu plantilla de Blogger de forma correcta.

<style>
        
        div#interlinking{
    background: #7f8c8d;
    height: 80px;
    top: 0;
    display: flex;
    align-items: center;
        margin: 5px;
}
div#interlinking div#etiqueta {
    border-bottom: 0 solid #fff;
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    display: inline-block;
    width: auto;
    font-family: 'Mulish', sans-serif;
padding-left: 18px;
}

div#interlinking div#articulo{
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: 'Mulish', sans-serif;
    display: inline-block;
    width: auto;
}
a#enlace_interlinking{
    color: #e6e6e6;
    text-decoration: none;

}

div#interlinking .ctaButton{

    background-color: transparent;
    color: #000000;
    width: 80px;
    min-height: 80px;
    background: url(https://imparteconocimientos.com/wp-content/plugins/intelly-related-posts/assets/images/simple-arrow.png)no-repeat;
    position: absolute;
    right: 0;
    margin: 8px;
}

div#interlinking:hover{
    background: #d35400;
}

        </style>

Codigo HTML

Este código se ingresara dentro de los artículos que desees poner el interlinking, recuerda que debes modificarlo en formato html.

<a href="ENLACE" id="enlace_interlinking"><div id="interlinking"><div id="etiqueta">Te Recomendamos:</div>&nbsp; <div id="articulo">TITULO DE LA ENTRADA</div><div class="ctaButton"></div></div></a>

Recuerda modificar las siguientes partes resaltadas en negritas por los datos necesarios como el enlace y el titulo de la entrada.

Nota: Si tienes alguna duda o pregunta no olvides dejármelo en los comentarios :') saludos.