Mostrar/Ocultar Links en Blogger de manera Sencilla

La presente guía muestra en detalle como ocultar y desmembrar links de los distintos servicios de hosting como Mega, Zippyshare, 1Fichier, Uploaded, 4shared, etc. Para luego armarlos y mostrarlos en pantallas y así de este modo ocultarlos en paginas web, Blogger y demás de una manera sencilla para protegerlos. También es valido para servicios que acortan URLs para generar pagos, entre otros.

De esta manera queda explícito que el siguiente documento se fomenta con fines educativos sobre los lenguajes HTML, CSS y JavaScript.

Para el caso concreto, estas técnicas están aplicadas a Blogger en el desarrollo de un blog. Para ello insertar el siguiente código HTML en su respectiva entrada en modo de edición HTML:

<button class="download" onclick="joinURL()">Ver/Ocultar links</button>
<p id="linkArea"></p>
<script>
var clic = 1;
function joinURL() {
    /*
     * Service (host)
     */
    var service = "http://mega.co.nz/";
    /*
     * The Files
     */
    var file1 = "#!SARAZAfile1.rar";
    var file2 = "#!SARAZAfile2.rar";
    /*
     * The Download Links
     */
    var link1 = '<a href="'.concat(service, file1, '" target="_blank">Archivo1.rar</a><br />');
    var link2 = '<a href="'.concat(service, file2, '" target="_blank">Archivo2.rar</a><br />');
    /*
     * Listed Links
     */
    var dURI = ''.concat(link1, link2);

    if(clic==1){
      document.getElementById('linkArea').style.display='block';
      document.getElementById("linkArea").innerHTML = dURI;
      clic = clic + 1;
    } else{
      document.getElementById('linkArea').style.display='none';
      clic = 1;
    }
}
</script>

Se procede a explicar las distintas partes del código, ya que es una mezcla de HTML, CSS3 y JavaScript.

El primer elemento <button> es una etiqueta del tipo botón que cumplirá la función de ejecutar un script (programado en JavaScript) que hará la magia. Solo tiene 2 atributos importantes, la clase CSS que tendrá los estilos del botón llamada "download" (no se entrará en detalles sobre las propiedades CSS) y el atributo onclick que se encargará de llamar a la función joinURL que hará el resto de cosas.

Además también se añadido otro elemento <p> con un ID llamado "linkArea" que es la zona donde aparecerán los enlaces a los archivos que queremos descargar. La función JavaScript dejará los enlaces sobre este elemento.

Antes de explicar el script y la función joinURL se hará una breve explicación sobre como está compuesto un enlace o link. El mismo siempre cuenta de 2 partes que varían de servicio a servicio. Por tomar como ejemplo a MEGA, podemos observar su estructura de la siguiente manera:

Se puede apreciar en la imagen como esta compuesto un link de MEGA. Primero aparece el servicio propiamente dicho, esto es: https://mega.nz/ y seguidamente el Hash del archivo que queremos descargar desde ese servicio de hosting, que sería: #!C1YSQJ6Y!7Jy9HDJAtAAZ74DCU2Ybey7Qla3YfKbB3W7Kzle09WQ


Funcion JavaScript

Ni bien empezar el script se declara una variable entera llamada clic que se le asigna el valor 1 (tener en cuenta esto, se explicará luego).

A continuación se declara cada elemento que compondrá los distintos enlaces como el servicio, los archivos, los links y el conjunto de links. Como bien explicamos anteriormente, la variable del servicio contendrá la parte de la URL que corresponde al servicio de hosting (que en caso de que todos los enlaces sean del mismo servicio de hosting, la variable service se declara una sola vez).

Luego se declaran las distintas variables para los diferentes archivos que contendrán el hash correspondiente a cada archivo.

Inmediatamente se arman los links de descargas concatenando con la funcion concat() cada parte del enlace, para así armar cada elemento <a> de descarga con sus respectivas URL.

Y finalmente solo se concatenan en la variable dURI todos los links de descargas (esta variable seria el contenedor final que se mostrará u ocultará en el elemento <p> con ID linkArea).  

Y por ultimo, se hace la lógica para que al hacer clic se muestren los enlaces y al hacer clic nuevamente se oculten. El ultimo bloque de código:

Demuestra que si hacemos clic en el botón que declaramos en un principio, como el script le asigna el valor 1 a la variable clic cumple con la condición del IF y lo que hace es cambiar la propiedad de la clase CSS linkArea (que debe estar en "display: none") e insertar el contenido de dURI (que anteriormente se armó) en el elemento con ID linkArea. Además también incrementa en 1 el valor de la variable clic quedando con valor 2.

Si volvemos a hacer clic en el botón, como la variable clic vale 2 no cumple con la condición del IF y sale por el else y lo único que hace es ocultar el contenido de linkArea y dejar la variable clic nuevamente con el valor 1 para que si de nuevo hacemos clic se muestren los links.




Las propiedades CSS que tengo yo aplicadas son:

  .download {
    background: #d93434;
    background-image: -webkit-linear-gradient(top, #d93434, #b82b2b);
    background-image: -moz-linear-gradient(top, #d93434, #b82b2b);
    background-image: -ms-linear-gradient(top, #d93434, #b82b2b);
    background-image: -o-linear-gradient(top, #d93434, #b82b2b);
    background-image: linear-gradient(to bottom, #d93434, #b82b2b);
    -webkit-border-radius: 6;
    -moz-border-radius: 6;
    border-radius: 6px;
    text-shadow: 1px 1px 3px #4a4a4a;
    color: #ffffff;
    font-size: 14px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
  }
  .download:hover {
    background: #fc3c3c;
    background-image: -webkit-linear-gradient(top, #fc3c3c, #d93434);
    background-image: -moz-linear-gradient(top, #fc3c3c, #d93434);
    background-image: -ms-linear-gradient(top, #fc3c3c, #d93434);
    background-image: -o-linear-gradient(top, #fc3c3c, #d93434);
    background-image: linear-gradient(to bottom, #fc3c3c, #d93434);
    text-decoration: none;
  }
  #linkArea {
  width: auto;
  margin: 6px auto;
    padding: 8px;
  height: auto;
    display: none;
  background: #dbdbdb;
    border: 1px solid #cacaca;
  box-shadow: 0px 0px 3px #D8D8D8;
  transition: height 1s;
  }

Quedando el siguiente resultado como ejemplo: