Documentación ACORTADOR

GUÍA DE CONFIGURACIÓN - ACORTADOR DE ENLACES

Lista de códigos y configuraciones principales de la plantilla Blogger Acortador de Enlaces. Sigue estos pasos para implementar los elementos correctamente y evitar errores de funcionamiento.

1. Configuración de Menú y Video Tutorial

Para configurar el menú simple de 2 enlaces, dirígete en tu panel a Diseño / Botones de menú. Agrega el siguiente código HTML, reemplaza las URL por las de tus propios enlaces y renombra los botones según tu preferencia:

  1. Ingresa a Diseño y ubica la sección Botones de menú.
  2. Copia y pega el código CSS/HTML adjunto a continuación.
  3. Reemplaza los enlaces href="..." con las páginas de tu propio sitio.

Video Tutorial de Configuración

banner

Código para Botones de Menú:

<style>
  .menu-botones-container {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
  }
  .btn-menu-custom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background-color: #8a0e0d; /* Color de fondo base (puedes cambiarlo) */
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: none;
    cursor: pointer;
  }
  .btn-menu-custom:hover {
    background-color: #1abc9c; /* Color al pasar el cursor */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  }
  .btn-menu-custom i {
    font-size: 16px;
  }
</style>

<div class="menu-botones-container">
  <!-- Botón Nosotros -->
  <a href="https://acortadortutos.blogspot.com/p/formulario-de-contactos.html" class="btn-menu-custom" id="btn-abrir-popup">
    <i class="fa fa-user-circle"></i> Nosotros
  </a>

  <!-- Botón Blog -->
  <a href="https://tutorialesgratisdeinternet.blogspot.com/2024/10/crear-un-blog-acortador-de-enlaces-en.html" class="btn-menu-custom" id="btn-abrir-popup1">
    <i class="fa fa-sign-in"></i> Blog
  </a>
</div>

2. Configurar Copyright y Tiempo de Carga

Ajusta el texto de derechos reservados y el contador de tiempo de espera para el acortador:

  • Texto Copyright: Entra a Diseño / Texto Copyright. Agrega tu enlace URL en la etiqueta href="ENLACE-URL" reemplazando la URL de tu página principal y renombrando el texto.
  • Aumentar Tiempo de Carga Acortador: Entra a Tema / Editar HTML y busca la línea timerSeconds:30. Reemplaza el número 30 por la cantidad de segundos que deseas definir para la cuenta regresiva.
Icono Acortador

Código HTML de Copyright:

<div>  
@Copyright <script type='text/javascript'>var creditsyear =  new Date();document.write(creditsyear.getFullYear());</script>  
<a href="ENLACE-URL"> Acortador Tutos </a> <i class='fa fa-heart' style='color: red;'/>
</i></div>

3. Editar Enlaces de Redes Sociales

Dirígete a Tema / Editar HTML, busca la lista de redes sociales y reemplaza el texto TU_ENLACE por los enlaces de tus perfiles oficiales. Reemplaza también el número 0000000000000 por la ID de tu blog de Blogger.

Plantilla Blogger Acortador de Enlaces URL
SUGERENCIA: Si no deseas utilizar alguna red social en particular, solo debes eliminar la línea de código <li class='...'>...</li> correspondiente.

Código para Redes Sociales:

<ul>
  <li class='fb-item'>
    <a href='TU_ENLACE_DE_FACEBOOK' rel='nofollow noopener' target='_blank' title='Síguenos en Facebook'><i class='fa fa-facebook fa-fw'/><span class='inv'/></a>
  </li>
  <li class='twitter-item'>
    <a href='TU_ENLACE_DE_TWITTER' rel='nofollow noopener' target='_blank' title='Síguenos en Twitter'><i class='fa fa-twitter fa-fw'/><span class='inv'/></a>
  </li>
  <li class='instagram-item'>
    <a href='TU_ENLACE_DE_INSTAGRAM' rel='nofollow noopener' target='_blank' title='Síguenos en Instagram'><i class='fa fa-instagram fa-fw'/><span class='inv'/></a>
  </li>
  <li class='youtube-item'>
    <a href='TU_ENLACE_DE_YOUTUBE' rel='nofollow noopener' target='_blank' title='Síguenos en Youtube'><i class='fa fa-youtube fa-fw'/><span class='inv'/></a>
  </li>
  <li class='whatsapp-item'>
    <a href='TU_ENLACE_DE_WHATSAPP' rel='nofollow noopener' target='_blank' title='Escríbenos por WhatsApp'><i class='fa fa-whatsapp fa-fw'/><span class='inv'/></a>
  </li>
  <li class='rss-item'>
    <a href='https://www.blogger.com/follow.g?blogID=0000000000000' rel='nofollow noopener' target='_blank' title='Síguenos en Blogger'><i class='fa fa-rss fa-fw'/><span class='inv'/></a>
  </li>
</ul>

4. Códigos HTML para Entradas y Páginas

Para activar el sistema del acortador en una publicación, debes pegar alguno de estos dos códigos en la sección Vista HTML al crear o editar una entrada en Blogger.

4.1 Opción 1: Diseño solo botones con publicidad (Sin texto)

Ideal para una interfaz limpia centrada únicamente en anuncios y botones de enlace:

<!-- COLOQUE SUS ANUNCIOS TIPO BANNER AQUÍ -->

<br/>
<!-- BOTÓN PRIMARIO -->
<div id="timer"></div>
<div class="text-center">
  <button id='getlink' class='btn bt-success hidden' disabled=''>Obtener Enlace</button>
</div>
<br/>

<!-- COLOQUE SUS ANUNCIOS TIPO TEXTO Y/O BANNER AQUÍ -->

<!-- BOTÓN SECUNDARIO -->
<a class="click-a" href=" # " target="_blank">
  <div class="text-center">
    <button id='gotolink' class='btn bt-success hidden' disabled=''>Ir al Enlace</button>
    <div style='margin:auto;display:inline-block'>
      <span class="click-ads"> Descargar</span>
    </div>
  </div>
</a>
<br/>

<!-- COLOQUE SUS ANUNCIOS TIPO BANNER AQUÍ -->

4.2 Opción 2: Diseño con botones, publicidad y texto variado

Recomendado si necesitas añadir contenido de texto o artículos informativos entre los anuncios y los botones de descarga:

<!-- COLOQUE SUS ANUNCIOS TIPO BANNER AQUÍ -->

<br/>
<!-- BOTÓN PRIMARIO -->
<div id="timer"></div>
<div class="text-center">
  <button id='getlink' class='btn bt-success hidden' disabled=''>Obtener Enlace</button>
  <!-- iklan -->
</div><br/>

<!-- COLOQUE SUS ANUNCIOS TIPO TEXTO Y/O BANNER AQUÍ -->
Los textos narrativos son relatos que siguen cuentan una serie de hechos que tienen lugar en un ambiente y un período de tiempo determinados. Ese relato puede ser real o ficticio. La secuencia en la que se dan los hechos narrados puede ser lineal; en flash-back (recordando hechos pasados), in media res (cuando inicia en la mitad de la historia) o en flash-foward (si empieza por el final). La estructura, normal, del texto narrativo es la siguiente: -Introducción, donde se introduce al lector en el ambiente y la época, y se le presentan los personajes principales. -Nudo, donde se plantea el problema o principal asunto del texto. -Desenlace, la parte donde se resuelve el conflicto. El rol de los personajes, así como el del propio narrador, puede variar según los deseos del autor. Por otra parte, hay personajes principales y secundarios. De igual modo, hay narradores en primera, segunda o tercera persona.<br/>
Los textos narrativos son relatos que siguen cuentan una serie de hechos que tienen lugar en un ambiente y un período de tiempo determinados. Ese relato puede ser real o ficticio. La secuencia en la que se dan los hechos narrados puede ser lineal; en flash-back (recordando hechos pasados), in media res (cuando inicia en la mitad de la historia) o en flash-foward (si empieza por el final). La estructura, normal, del texto narrativo es la siguiente: -Introducción, donde se introduce al lector en el ambiente y la época, y se le presentan los personajes principales. -Nudo, donde se plantea el problema o principal asunto del texto. -Desenlace, la parte donde se resuelve el conflicto. El rol de los personajes, así como el del propio narrador, puede variar según los deseos del autor. Por otra parte, hay personajes principales y secundarios. De igual modo, hay narradores en primera, segunda o tercera persona.

<!-- BOTÓN SECUNDARIO -->
<a class="click-a" href="URLdePUBLICIDAD" target="_blank">
  <div class="text-center">
    <button id='gotolink' class='btn bt-success hidden' disabled=''>Ir al Enlace</button>
    <div style='margin:auto;display:inline-block'>
      <!-- iklan -->
      <span class="click-ads"> Descargar</span>
    </div>
  </div>
</a><br/>

<!-- COLOQUE SUS ANUNCIOS TIPO BANNER AQUÍ -->

❓ ¿Tienes preguntas o algún problema con tu compra? Si detectas algún tipo de falla o error en su funcionamiento, envía un mensaje desde nuestra sección de Contactos y te responderemos a la brevedad. ¡Mucho éxito en tu nuevo proyecto para monetizar con el acortador de enlaces en Blogger!

COMENTARIOS