Decodificar y Codificar Base64 en/para Blogger

¿Cómo Decodificar y Codificar en Bas64 para blogger?

Bueno a mis seguidores en este tutorial les he traído el codigo de codificacion y decodificacion en base64 para blogger valga la redundancia ya que por mas que estuve buscando en internet u/o otros blogs relacionados a este tema solo hablan y comentan sobre codificacion y decodificacion para IMÁGENES pero yo decía: " NO!, yo necesito es para textos o links o por el estilo y no mas para solo imágenes".

 Así que me puse a investigar e investigar y lo encontré lo optimice a mi gusto para que funcione correctamente, bueno ya descubriendo eso quiero compartirle este MegaTutorial.

Introducción:

Pero te estarás preguntando ¿Qué es ese tal Base64?

En mis palabras seria:

Ocultar el contenido de encriptrándolo, o aun mas Criptografia un texto y ocultar su contenido para los intrusos 

---

Pero para un termino mas definido por San Google Con San Wikipedia seria:

Base 64 es un sistema de numeración posicional que usa 64 como base. Es la mayor potencia de dos que puede ser representada usando únicamente los caracteres imprimibles de ASCII. Esto ha propiciado su uso para codificación de correos electrónicos, PGP y otras aplicaciones. Todas las variantes famosas que se conocen con el nombre de Base64 usan el rango de caracteres A-Z, a-z y 0-9 en este orden para los primeros 62 dígitos, pero los símbolos escogidos para los últimos dos dígitos varían considerablemente de unas a otras. Otros métodos de codificación como UUEncode y las últimas versiones de binhex usan un conjunto diferente de 64 caracteres para representar 6 dígitos binarios, pero estos nunca son llamados Base64.

Wikipedia

---

Bueno pero creo que aun no entiendes o alguno no entiende en este caso te daré un ejemplo:

Codificacion:

1. Tomamos un texto cualquiera o un código el de tu preferencia en mi caso sera: "Hola mundo!".
2. Vamos a nuestro codificador y decodificador pegaremos ese texto en la parte donde dice "Codigo_Txt"
3. Presionamos el botón "Codificar"
4. En la parte inferior donde decía "Resultado" te dará nuestro nuevo texto en Base64; el cual seria: "SG9sYSBtdW5kbyE=".

---

Decodificar:

1. Tomamos el texto ya Codificado en este caso tomaremos el anterior: "SG9sYSBtdW5kbyE="
2. Vamos a nuestro codificador y decodificador pegaremos ese texto en la parte donde dice "Codigo_Txt"
3. Presionamos el botón "Decodificar"
4. En la parte inferior donde decía "Resultado" te dará nuestro nuevo texto en Base64; el cual seria: "Hola mundo!".

---

Como vemos es bastante sencillo ( Bueno los ejemplos :v JAJA ). Asi que comencemos sin tanta cháchara.

Instrucciones:

1. Vas a crear una nueva PAGINA en blogger para ello vas a (Blogger.com/Paginas/Pagina Nueva)
   
   Pero si quieres por medio de un link Copia y Pega esta Url en la Barra de Direccion:
   
    https://www.blogger.com/blogger.g?blogID=XXXXXX#editor/target=page
   
   Donde las XXXXXX son el Id de tu Blog.
   
   
2. Copia y pega el siguiente codigo:(este codigo es el SCRIPT de Base64 Con el cual Decodificaremos Y codificaremos "Mejor dicho este codigo lo es TODO para este tutorial"
   
   
   

   Código:

   $('#d a').each(function() {<br />this.href += '?a=text';<br />})<br /><br />function mavs() {<br />var x = document.getElementById("data").value;<br />var k = base64_encode(x);<br />document.getElementById("d").innerHTML = k;<br /><br />}<br /><br />function mavsde() {<br />var x = document.getElementById("data").value;<br />var k = base64_decode(x);<br />document.getElementById("d").innerHTML = k;<br /><br />}<br /><br />function base64_decode(data) {<br />var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';<br />var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,<br />ac = 0,<br />dec = '',<br />tmp_arr = [];<br /><br />if (!data) {<br />return data;<br />}<br /><br />data += '';<br /><br />do {<br />// unpack four hexets into three octets using index points in b64<br />h1 = b64.indexOf(data.charAt(i++));<br />h2 = b64.indexOf(data.charAt(i++));<br />h3 = b64.indexOf(data.charAt(i++));<br />h4 = b64.indexOf(data.charAt(i++));<br /><br />bits = h1 << 18 | h2 << 12 | h3 << 6 | h4; o1 = bits >> 16 & 0xff;<br />o2 = bits >> 8 & 0xff;<br />o3 = bits & 0xff;<br /><br />if (h3 == 64) {<br />tmp_arr[ac++] = String.fromCharCode(o1);<br />} else if (h4 == 64) {<br />tmp_arr[ac++] = String.fromCharCode(o1, o2);<br />} else {<br />tmp_arr[ac++] = String.fromCharCode(o1, o2, o3);<br />}<br />} while (i < data.length); dec = tmp_arr.join(''); return decodeURIComponent(escape(dec.replace(/\0+$/, ''))); } function base64_encode(data) { var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='; var o1, o2, o3, h1, h2, h3, h4, bits, i = 0, ac = 0, enc = '', tmp_arr = []; if (!data) { return data; } data = unescape(encodeURIComponent(data)); do { // pack three octets into four hexets o1 = data.charCodeAt(i++); o2 = data.charCodeAt(i++); o3 = data.charCodeAt(i++); bits = o1 << 16 | o2 << 8 | o3; h1 = bits >> 18 & 0x3f;<br />h2 = bits >> 12 & 0x3f;<br />h3 = bits >> 6 & 0x3f;<br />h4 = bits & 0x3f;<br /><br />// use hexets to index into b64, and append result to encoded string<br />tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);<br />} while (i < data.length); enc = tmp_arr.join(''); var r = data.length % 3; return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3); }
   Este código se selecciona solo así que lo único que debes hacer es presionar Ctrl + C
   
   Este codigo lo pones con el CData del Java script osea:
   
   <script type='text/javascript'>//<![CDATA[
   
   CODIGO
   
   //]]></script>
   
   El CODIGO Lo cambias por el Codigo encerrado anteriormente.
   
   
3. Hay pegamos este codigo (Este código Es la base donde realizaremos Todas nuestras Codificaciones/Decodificaciones):
   
   

   ---

   Código:

   <center><div class="mavsss"><div class="mavss"><input type="text" id="data" value="Codigo_Txt" /><button onclick="mavs()">Codificar</button><button onclick="mavsde()">Decodificar</button></div><textarea id="d">Resultado</textarea></div></center><br />
   Este código se selecciona solo así que lo único que debes hacer es presionar Ctrl + C

   ---

   Puedes cambiar "<p id="d">Resultado</p>" por
   
   
4. Para añadirle estilo y un Flouw Violento: usaremos el CSS de Mavster ;):
   
   

   Código:

   .mavsss{background-color:#1dc2de;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em;border-top-left-radius:.5em;border-top-right-radius:.5em;border:0;box-shadow:rgba(0,0,0,0.498039) 0 5px 10px;color:white;font-family:inherit;font-style:inherit;line-height:21px;margin:20px -15px;padding:1em;text-align:center;vertical-align:baseline}.mavss{background-color:white;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em;border-top-left-radius:.5em;border-top-right-radius:.5em;border:0;box-shadow:rgba(0,0,0,0.498039) 0 5px 10px;font-family:inherit;font-style:inherit;line-height:21px;margin:1em auto;padding:1em;text-align:center;vertical-align:baseline;color:black}.button,.button:visited,button,input[type="submit"],input[type="reset"],input[type="button"]{font-family:'Montserrat'!important;font-weight:700!important;background:#f64b39;color:#fff;display:inline-block;text-decoration:none;letter-spacing:0;padding:12px 20px;margin-bottom:18px;border:0;cursor:pointer;height:auto;text-transform:uppercase;letter-spacing:2px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;transition:all .2s ease-in-out;border-radius:3px}.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover{background:#14d0d6;color:#fff}.button:active,button:active,input[type="submit"]:active,input[type="reset"]:active,input[type="button"]:active{background:#11abb0;color:#fff}.button.full-width,button.full-width,input[type="submit"].full-width,input[type="reset"].full-width,input[type="button"].full-width{width:100%;padding-left:0!important;padding-right:0!important;text-align:center}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}form{margin-bottom:24px}fieldset{margin-bottom:24px}input[type="text"],input[type="password"],input[type="email"],textarea,select{display:block;padding:18px 15px;margin:0 0 24px 0;border:0;outline:0;vertical-align:middle;min-width:96.5%;max-width:100%;font-size:15px;line-height:24px;color:#647373;background:#d3d9d9;border-radius:3px}input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,textarea:focus{color:#b3b7bc;background-color:#383d41}textarea{min-height:220px}label,legend{font:16px/24px 'opensans-bold',sans-serif;margin:12px 0;color:#3d4145;display:block}label span,legend span{color:#8b9798;font-family:'Open Sans',!important;font:14px/24px}input[type="checkbox"],input[type="radio"]{font-size:15px;color:#3d4145}input[type="checkbox"]{display:inline}.row{width:96%;max-width:1008px;margin:0 auto}.ie .row{width:1000px}.narrow .row{max-width:980px}.row .row{width:auto;max-width:none;margin:0 -18px}.row:before,.row:after{content:" ";display:table}.row:after{clear:both}.column,.columns{position:relative;padding:0 18px;min-height:1px;float:left}.column.centered,.columns.centered{float:none;margin:0 auto}.row.collapsed>.column,.row.collapsed>.columns,.column.collapsed,.columns.collapsed{padding:0}[class*="column"]+[class*="column"]:last-child{float:right}[class*="column"]+[class*="column"].end{float:right}.row .one{width:8.33333%}.row .two{width:16.66667%}.row .three{width:25%}.row .four{width:33.33333%}.row .five{width:41.66667%}.row .six{width:50%}.row .seven{width:58.33333%}.row .eight{width:66.66667%}.row .nine{width:75%}.row .ten{width:83.33333%}.row .eleven{width:91.66667%}.row .twelve{width:100%}.row .offset-1{margin-left:8.33333%}.row .offset-2{margin-left:16.66667%}.row .offset-3{margin-left:25%}.row .offset-4{margin-left:33.33333%}.row .offset-5{margin-left:41.66667%}.row .offset-6{margin-left:50%}.row .offset-7{margin-left:58.33333%}.row .offset-8{margin-left:66.66667%}.row .offset-9{margin-left:75%}.row .offset-10{margin-left:83.33333%}.row .offset-11{margin-left:91.66667%}.row .push-1{left:8.33333%}.row .pull-1{right:8.33333%}.row .push-2{left:16.66667%}.row .pull-2{right:16.66667%}.row .push-3{left:25%}.row .pull-3{right:25%}.row .push-4{left:33.33333%}.row .pull-4{right:33.33333%}.row .push-5{left:41.66667%}.row .pull-5{right:41.66667%}.row .push-6{left:50%}.row .pull-6{right:50%}.row .push-7{left:58.33333%}.row .pull-7{right:58.33333%}.row .push-8{left:66.66667%}.row .pull-8{right:66.66667%}.row .push-9{left:75%}.row .pull-9{right:75%}.row .push-10{left:83.33333%}.row .pull-10{right:83.33333%}.row .push-11{left:91.66667%}.row .pull-11{right:91.66667%}.bgrid-sixths [class*="column"]{width:16.66667%}.bgrid-quarters [class*="column"]{width:25%}.bgrid-thirds [class*="column"]{width:33.33333%}.bgrid-halves [class*="column"]{width:50%}[class*="bgrid"] [class*="column"]+[class*="column"]:last-child{float:left}.first{clear:left}.s-first{clear:none}@media only screen and (max-width:900px){.s-bgrid-sixths [class*="column"]{width:16.66667%}.s-bgrid-quarters [class*="column"]{width:25%}.s-bgrid-thirds [class*="column"]{width:33.33333%}.s-bgrid-halves [class*="column"]{width:50%}.first{clear:none}.s-first{clear:left}}@media only screen and (max-width:767px){.row{width:480px;margin:0 auto;padding:0}.column,.columns{width:auto!important;float:none;margin-left:0;margin-right:0;padding:0 30px}.row .row{width:auto;max-width:none;margin:0 -30px}[class*="column"]+[class*="column"]:last-child{float:none}[class*="bgrid"] [class*="column"]+[class*="column"]:last-child{float:none}.row .offset-1{margin-left:0}.row .offset-2{margin-left:0}.row .offset-3{margin-left:0}.row .offset-4{margin-left:0}.row .offset-5{margin-left:0}.row .offset-6{margin-left:0}.row .offset-7{margin-left:0}.row .offset-8{margin-left:0}.row .offset-9{margin-left:0}.row .offset-10{margin-left:0}.row .offset-11{margin-left:0}}@media only screen and (max-width:480px){.row{width:auto}}@media screen and (min-width:1200px){.wide .row{max-width:1180px}}.cf:before,.cf:after{content:" ";display:table}.cf:after{clear:both}.remove-bottom{margin-bottom:0!important}.half-bottom{margin-bottom:12px!important}.add-bottom{margin-bottom:24px!important}.no-border{border:0}.text-center{text-align:center!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.pull-left{float:left!important}.pull-right{float:right!important}.align-center{margin-left:auto!important;margin-right:auto!important;text-align:center!important}
   Este código se selecciona solo así que lo único que debes hacer es presionar Ctrl + C
   
   Este codigo lo añades en un Style :
   
   <style type='text/css'>CODIGO</style>
   
   Y donde Dice CODIGO Cámbialo por el Código encerrado anteriormente.
   
   

---

---

Links de Descargas:

Clave: https://yolo-mavster.blogspot.com

 <hr/><center style="color:black"> <h2 class="text-3d" style="background:#f64b39;width:58%;height:30px;position:relative;border-radius:10px;top:9px;margin:0!important"> Código:</h2> <textarea readonly="readonly" onclick="this.focus();this.select()" id="CopyTxt" rows="3" cols="80" oncopy="log('Copied!')" oncut="log('Cut blocked!');return false" style="clear:both;border-bottom:3px solid #00c8bd;border-top:3px solid #558abb"><style type='text/css'> .mavsss{background-color:#1dc2de;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em;border-top-left-radius:.5em;border-top-right-radius:.5em;border:0;box-shadow:rgba(0,0,0,0.498039) 0 5px 10px;color:white;font-family:inherit;font-style:inherit;line-height:21px;margin:20px -15px;padding:1em;text-align:center;vertical-align:baseline}.mavss{background-color:white;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em;border-top-left-radius:.5em;border-top-right-radius:.5em;border:0;box-shadow:rgba(0,0,0,0.498039) 0 5px 10px;font-family:inherit;font-style:inherit;line-height:21px;margin:1em auto;padding:1em;text-align:center;vertical-align:baseline;color:black}.button,.button:visited,button,input[type=&quot;submit&quot;],input[type=&quot;reset&quot;],input[type=&quot;button&quot;]{font-family:'Montserrat'!important;font-weight:700!important;background:#f64b39;color:#fff;display:inline-block;text-decoration:none;letter-spacing:0;padding:12px 20px;margin-bottom:18px;border:0;cursor:pointer;height:auto;text-transform:uppercase;letter-spacing:2px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;transition:all .2s ease-in-out;border-radius:3px}.button:hover,button:hover,input[type=&quot;submit&quot;]:hover,input[type=&quot;reset&quot;]:hover,input[type=&quot;button&quot;]:hover{background:#14d0d6;color:#fff}.button:active,button:active,input[type=&quot;submit&quot;]:active,input[type=&quot;reset&quot;]:active,input[type=&quot;button&quot;]:active{background:#11abb0;color:#fff}.button.full-width,button.full-width,input[type=&quot;submit&quot;].full-width,input[type=&quot;reset&quot;].full-width,input[type=&quot;button&quot;].full-width{width:100%;padding-left:0!important;padding-right:0!important;text-align:center}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}form{margin-bottom:24px}fieldset{margin-bottom:24px}input[type=&quot;text&quot;],input[type=&quot;password&quot;],input[type=&quot;email&quot;],textarea,select{display:block;padding:18px 15px;margin:0 0 24px 0;border:0;outline:0;vertical-align:middle;min-width:96.5%;max-width:100%;font-size:15px;line-height:24px;color:#647373;background:#d3d9d9;border-radius:3px}input[type=&quot;text&quot;]:focus,input[type=&quot;password&quot;]:focus,input[type=&quot;email&quot;]:focus,textarea:focus{color:#b3b7bc;background-color:#383d41}textarea{min-height:220px}label,legend{font:16px/24px 'opensans-bold',sans-serif;margin:12px 0;color:#3d4145;display:block}label span,legend span{color:#8b9798;font-family:'Open Sans',!important;font:14px/24px}input[type=&quot;checkbox&quot;],input[type=&quot;radio&quot;]{font-size:15px;color:#3d4145}input[type=&quot;checkbox&quot;]{display:inline}.row{width:96%;max-width:1008px;margin:0 auto}.ie .row{width:1000px}.narrow .row{max-width:980px}.row .row{width:auto;max-width:none;margin:0 -18px}.row:before,.row:after{content:&quot; &quot;;display:table}.row:after{clear:both}.column,.columns{position:relative;padding:0 18px;min-height:1px;float:left}.column.centered,.columns.centered{float:none;margin:0 auto}.row.collapsed&gt;.column,.row.collapsed&gt;.columns,.column.collapsed,.columns.collapsed{padding:0}[class*=&quot;column&quot;]+[class*=&quot;column&quot;]:last-child{float:right}[class*=&quot;column&quot;]+[class*=&quot;column&quot;].end{float:right}.row .one{width:8.33333%}.row .two{width:16.66667%}.row .three{width:25%}.row .four{width:33.33333%}.row .five{width:41.66667%}.row .six{width:50%}.row .seven{width:58.33333%}.row .eight{width:66.66667%}.row .nine{width:75%}.row .ten{width:83.33333%}.row .eleven{width:91.66667%}.row .twelve{width:100%}.row .offset-1{margin-left:8.33333%}.row .offset-2{margin-left:16.66667%}.row .offset-3{margin-left:25%}.row .offset-4{margin-left:33.33333%}.row .offset-5{margin-left:41.66667%}.row .offset-6{margin-left:50%}.row .offset-7{margin-left:58.33333%}.row .offset-8{margin-left:66.66667%}.row .offset-9{margin-left:75%}.row .offset-10{margin-left:83.33333%}.row .offset-11{margin-left:91.66667%}.row .push-1{left:8.33333%}.row .pull-1{right:8.33333%}.row .push-2{left:16.66667%}.row .pull-2{right:16.66667%}.row .push-3{left:25%}.row .pull-3{right:25%}.row .push-4{left:33.33333%}.row .pull-4{right:33.33333%}.row .push-5{left:41.66667%}.row .pull-5{right:41.66667%}.row .push-6{left:50%}.row .pull-6{right:50%}.row .push-7{left:58.33333%}.row .pull-7{right:58.33333%}.row .push-8{left:66.66667%}.row .pull-8{right:66.66667%}.row .push-9{left:75%}.row .pull-9{right:75%}.row .push-10{left:83.33333%}.row .pull-10{right:83.33333%}.row .push-11{left:91.66667%}.row .pull-11{right:91.66667%}.bgrid-sixths [class*=&quot;column&quot;]{width:16.66667%}.bgrid-quarters [class*=&quot;column&quot;]{width:25%}.bgrid-thirds [class*=&quot;column&quot;]{width:33.33333%}.bgrid-halves [class*=&quot;column&quot;]{width:50%}[class*=&quot;bgrid&quot;] [class*=&quot;column&quot;]+[class*=&quot;column&quot;]:last-child{float:left}.first{clear:left}.s-first{clear:none}@media only screen and (max-width:900px){.s-bgrid-sixths [class*=&quot;column&quot;]{width:16.66667%}.s-bgrid-quarters [class*=&quot;column&quot;]{width:25%}.s-bgrid-thirds [class*=&quot;column&quot;]{width:33.33333%}.s-bgrid-halves [class*=&quot;column&quot;]{width:50%}.first{clear:none}.s-first{clear:left}}@media only screen and (max-width:767px){.row{width:480px;margin:0 auto;padding:0}.column,.columns{width:auto!important;float:none;margin-left:0;margin-right:0;padding:0 30px}.row .row{width:auto;max-width:none;margin:0 -30px}[class*=&quot;column&quot;]+[class*=&quot;column&quot;]:last-child{float:none}[class*=&quot;bgrid&quot;] [class*=&quot;column&quot;]+[class*=&quot;column&quot;]:last-child{float:none}.row .offset-1{margin-left:0}.row .offset-2{margin-left:0}.row .offset-3{margin-left:0}.row .offset-4{margin-left:0}.row .offset-5{margin-left:0}.row .offset-6{margin-left:0}.row .offset-7{margin-left:0}.row .offset-8{margin-left:0}.row .offset-9{margin-left:0}.row .offset-10{margin-left:0}.row .offset-11{margin-left:0}}@media only screen and (max-width:480px){.row{width:auto}}@media screen and (min-width:1200px){.wide .row{max-width:1180px}}.cf:before,.cf:after{content:&quot; &quot;;display:table}.cf:after{clear:both}.remove-bottom{margin-bottom:0!important}.half-bottom{margin-bottom:12px!important}.add-bottom{margin-bottom:24px!important}.no-border{border:0}.text-center{text-align:center!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.pull-left{float:left!important}.pull-right{float:right!important}.align-center{margin-left:auto!important;margin-right:auto!important;text-align:center!important} </style> <center>   <div class="mavsss">     <div class="mavss">       <input type="text" id="data" value="Codigo_Txt" />       <button onclick="mavs()">Codificar</button>       <button onclick="mavsde()">Decodificar</button>     </div>     <textarea id="d">Resultado</textarea>   </div> </center> <script type='text/javascript'> //<![CDATA[ $('#d a').each(function() {   this.href += '?a=text'; })  function mavs() {   var x = document.getElementById("data").value;   var k = base64_encode(x);   document.getElementById("d").innerHTML = k;  }  function mavsde() {   var x = document.getElementById("data").value;   var k = base64_decode(x);   document.getElementById("d").innerHTML = k;  }  function base64_decode(data) {   var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';   var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,     ac = 0,     dec = '',     tmp_arr = [];    if (!data) {     return data;   }    data += '';    do {     // unpack four hexets into three octets using index points in b64     h1 = b64.indexOf(data.charAt(i++));     h2 = b64.indexOf(data.charAt(i++));     h3 = b64.indexOf(data.charAt(i++));     h4 = b64.indexOf(data.charAt(i++));      bits = h1 << 18 | h2 << 12 | h3 << 6 | h4;      o1 = bits >> 16 & 0xff;     o2 = bits >> 8 & 0xff;     o3 = bits & 0xff;      if (h3 == 64) {       tmp_arr[ac++] = String.fromCharCode(o1);     } else if (h4 == 64) {       tmp_arr[ac++] = String.fromCharCode(o1, o2);     } else {       tmp_arr[ac++] = String.fromCharCode(o1, o2, o3);     }   } while (i < data.length);    dec = tmp_arr.join('');    return decodeURIComponent(escape(dec.replace(/\0+$/, ''))); }  function base64_encode(data) {   var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';   var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,     ac = 0,     enc = '',     tmp_arr = [];    if (!data) {     return data;   }    data = unescape(encodeURIComponent(data));    do {     // pack three octets into four hexets     o1 = data.charCodeAt(i++);     o2 = data.charCodeAt(i++);     o3 = data.charCodeAt(i++);      bits = o1 << 16 | o2 << 8 | o3;      h1 = bits >> 18 & 0x3f;     h2 = bits >> 12 & 0x3f;     h3 = bits >> 6 & 0x3f;     h4 = bits & 0x3f;      // use hexets to index into b64, and append result to encoded string     tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);   } while (i < data.length);    enc = tmp_arr.join('');    var r = data.length % 3;    return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3); } //]]></script> </textarea><div id="mavsCopy" style="display:none;position:relative;top:-55px;background:white!important"> Este código se selecciona solo así que lo único que debes hacer es presionar <kbd>Ctrl</kbd> + <kbd>C</kbd></div> </center> <hr/> <br/><!-- Boton --> <a  href="https://yolo-mavster.blogspot.com/p/code-mavs.html" class="button animated"  style="background: #f64b39; color: white !important;" target="_blank">DEMO</a>