Crea tu propia página acortadora de enlaces en Blogger con contador

¡No más acortadores! Aquí te enseñare como puedes tener tu propia página acortadora de enlaces 🚀 en Blogger con un contador y publicidad.

página acortadora enlaces blogger con contador y publicidad

Hoy les traigo una maravilla de internet pocas veces vista, algo con lo que van a mojar sus pantalones al saber que se puede lograr en blogger, es... nada más... ni nada menos... que crear tu propio acortador de enlaces con contador en tu blog ¡con tu URL carajo! y además le puedes agregar publicidad. No lo he probado con adsense sabes lo quisquilloso que es, pero les funcionara con cualquier otro tipo de publicidad en banner o scripts que puedan agregar. Si alguien lo utiliza con Adsense cuentame tu experiencia en los comentarios.

Tutorial para página saliendo con contador y publicidad

Paso 1: Crear la página "Saliendo.html"

Este paso es sencillo crea una nueva página en tu blogger recuerda que el titulo es lo más importante, puedes ponerle exit, salir, saliendo, etc. Como desees agrega en la edición HTML el siguiente código:
<div id="plantilla_exit">
   <div id="contenedor_exit">
      <div style="text-align:center;padding: 10px;">
         <h3 style="margin: 0;">Saliendo...</h3>
         <br>
         <p>Estas saliendo de Nombredetublog Espera unos segundos para continuar</p>
         <br>
         <img alt="Resultado de imagen para anuncio" class="irc_mi" height="122" src="https://image.freepik.com/vector-gratis/plantilla-diseno-banner-cuadrado-cyber-lunes-venta_129460-710.jpg" style="width: 250px;" width="149"><br>
         <div class="contador"><span id="contador_exit">0</span></div>
         <button id="original_link" type="button">Cargando</button>
      </div>
   </div>
</div>
Debes cambiar Nombredetublog obviamente por lo que ahí dice y en el código <img> puedes agregar tu propia imagen publicitario o eliminar todo el código en verde para agregar tu publicidad. Guardas y siguiente paso.

Paso 2: Agregando los estilos CSS

Ahora en la sección Diseño agrega un gadget tipo HTML/Javascript sin titulo y pega el siguiente código:
<style type="text/css">
    #plantilla_exit{
        position: fixed;
        background: rgba(0, 0, 0, 0.95);
        width: 100%;
        height: 100%;
        z-index: 100;
        top: 0px;
        left: 0px;
        display: block;
    }

    #contenedor_exit {
        width: 700px;
        position: relative;
        z-index: 10000;
        height: auto;
        background: #fff;
        margin: 50px auto;
    }

    .original_link {
        text-align: center;
        border: 0;
        padding: 10px;
        background: #00a223;
        color: #fff;
        border-radius: 5px;
        box-shadow: 0px 3px #028e20;
    }

    .contador {
        padding: 23px;
        width: 56px;
        height: 56px;
        margin: 10px auto;
        border-radius: 50%;
        color: #3f4f56;
        box-shadow: 0px 0px 0px 2px #ff5722;
        font-size: xx-large;
    }
@media screen and (max-width: 600px) {
   #contenedor_exit {
        width: 100%;
        margin: 0;
    }
}
    button#original_link {
        text-align: center;
        border: 0;
        padding: 10px;
        background: gray;
        color: #fff;
        border-radius: 5px;
        box-shadow: 0px 3px #615f5f;
    }
</style>
Te recomiendo que muevas este Gadget bajo las entradas del blog o sobre ella, dependiendo del tema que utilices te puede modificar la forma de mostrar el la página saliente.

Paso 3: Agregando el script que hace la magia

En el mismo gadget que agregaron en el paso 2 peguen después de los estilos el siguiente Script:
<script type="text/javascript">

/* Aqui vamos a remplazar la url por la pagina que creamos.
*/
var base ="https://miblog.blogspot.com/p/saliendo.html";

/* Aqui obtenemos todos los links que tienen la clase "saliendo."
  Por eso, es importante agregar el class="saliendo", a los links que queremos
  redirigir a nuestra pagina de salida.
*/
var links = document.querySelectorAll("a.saliendo");
for (i = 0; i < links.length; i++) {
  var link = links[i].getAttribute('href');
  links[i].setAttribute('href', base + "?url=" + btoa(link));
}

/*
--- Apartir de Aqui el codigo sera para la pagina de salida ----

Comprobaremos que estemos en la pagina de salida.
  esto con el fin de evitar que salga el anuncio de "saliendo en todas las paginas"
*/
str = window.location.href;
if (str.indexOf('saliendo.html?url=') > -1){
    document.getElementById('plantilla_exit').style.display = "block";
    contar();
}

/*Creamos el contador y actualizamos el boton de "cargando.." por "continuar"
  cuando este llegue a 0.
*/
  var contador = 5;
function contar() {
  document.getElementById('contador_exit').innerHTML = contador;
  if(contador==0){
      var a = document.getElementById('original_link');
      a.setAttribute('onclick', "window.location.href ='"+ atob(decodeURIComponent(get('url'))) +"'");
      a.innerText = "Continuar";
      a.style.background = "#00a223";
  }else{
      contador-=1;
      setTimeout("contar()",1000);
  }
}

function get(param) {
  var vars = {};
  window.location.href.replace( location.hash, '' ).replace(
    /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
    function( m, key, value ) { // callback
      vars[key] = value !== undefined ? value : '';
    }
  );

  if ( param ) {
    return vars[param] ? vars[param] : null;
  }
  return vars;
}

</script>
Aquí cambiamos los siguiente:
  • Var base: Agrega la url de la página que creaste en el paso 1
  • saliendo.html: Agrega el mismo nombre de la página que creaste en el paso 1 (exit, salir, saliendo, etc)

Paso 4: Agregar los enlaces a tus entradas

Debes agregar los enlaces como siempre, solo que en la edición HTML de tu entrada les agregaras la clase class="saliendo" y el id id="saliendo" quedando algo así:
<a class="saliendo" href="https://www.aprendicesweb.com/" id="saliendo">Dame Clic</a>
Les puedes agregar los target y rel que desees a tu enlace si deseas. Y eso es todo amigos les dejo una DEMO de como funciona:

DEMO página acortadora de enlaces en Blogger

Hasta aquí llega el tutorial pruebenlo en sus web, comenten si les gusto y nos leemos en la siguiente entrada.

Comentarios

Estas cordialmente invitado a compartir tu ideas y comentarios.