- Desde
- 11 Oct 2015
- Mensajes
- 1.271
Hola betas, la verdad no sabía cómo titular este tutorial, pero básicamente lo que voy a enseñar a hacer es una página de salida para los links externos. como se ve en la siguiente imagen, pero con un estilo muy similar al estilo del acortador de ouo.io. en su momento yo use esto cuando tenia mis primeras paginas en blogger. Actualmente ya no lo uso asi que se los comparto.
Cabe recalcar que esto se puede adaptar a cualquier web, si tienes al de conocimiento en html y css.
Bien, sin mas rodeos les explico.
1.- Primero lo que haremos sera crear un página nueva en blogger y en modo HTML agregaremos la plantilla, que es la que lleva básicamente el texto de saliendo, y la publicidad. Puedes modificar a gusto ese texto, y la imagen <img> la reemplazas con un anuncio de juicyads por ejemplo. guardas con el nombre que quieras, yo lo dejare en saliendo. para que a los enlaces les salga. "saliendo.html"
2.- Ahora vamos a crear un gadget, en diseño de tipo html/javascript y vamos a pegar los estilos de la plantilla.
3.- Ahora vamos a agregar el script y adaptarlo (Al final les dejare el script completo, aqui solo explicare que editar), el script hará que los enlaces externos se actualicen por una url que los redirigirá a la página de salida.
Editaremos esta parte del script con la url de la página que creamos. Esta parte del código se encargará de reemplazar los enlaces que tengan la clase "saliendo",
por lo que es importante, que en los enlaces que queramos que salga esta página le agregamos esta clase, ejemplo:
<a class="saliendo" href="https://www.forobeta.com/" id="saliendo">forobeta</a>,
Ahora el script convertirá el enlace a algo similar a esto:
<a class="saliendo" href="https://miblog.blogspot.com/p/saliendo.html?url=akdgasKGDSA" id="saliendo">forobeta</a>,
Aqui editaremos la variable base, con la url de la pagina que creamos.
4.- Ahora el código a partir de aquí se encargara de obtener los enlaces y poner un contador y luego habilitar el botón para poder continuar.
En esta parte del codigo solo hay que reemplazar "saliendo.html?url=" con la pagina que creaste, mas "?url=". ejemplo: "mipagina.html?url="
Bien, aqui les dejo el codigo completo, también lo agregan en un gadget html/javascript.
y para finalizar, aquí les dejo un demo funcionando. Deja una reacción si te gusto xd
Cabe recalcar que esto se puede adaptar a cualquier web, si tienes al de conocimiento en html y css.
Bien, sin mas rodeos les explico.
1.- Primero lo que haremos sera crear un página nueva en blogger y en modo HTML agregaremos la plantilla, que es la que lleva básicamente el texto de saliendo, y la publicidad. Puedes modificar a gusto ese texto, y la imagen <img> la reemplazas con un anuncio de juicyads por ejemplo. guardas con el nombre que quieras, yo lo dejare en saliendo. para que a los enlaces les salga. "saliendo.html"
HTML:
<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 mi web.com Espera unos segundos para continuar</p>
<br>
<img alt="Resultado de imagen para anuncio" class="irc_mi" height="122" src="https://thumbs.dreamstime.com/z/anuncio-de-la-harina-de-avena-de-la-fresa-91760528.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>2.- Ahora vamos a crear un gadget, en diseño de tipo html/javascript y vamos a pegar los estilos de la plantilla.
HTML:
<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>3.- Ahora vamos a agregar el script y adaptarlo (Al final les dejare el script completo, aqui solo explicare que editar), el script hará que los enlaces externos se actualicen por una url que los redirigirá a la página de salida.
Editaremos esta parte del script con la url de la página que creamos. Esta parte del código se encargará de reemplazar los enlaces que tengan la clase "saliendo",
por lo que es importante, que en los enlaces que queramos que salga esta página le agregamos esta clase, ejemplo:
<a class="saliendo" href="https://www.forobeta.com/" id="saliendo">forobeta</a>,
Ahora el script convertirá el enlace a algo similar a esto:
<a class="saliendo" href="https://miblog.blogspot.com/p/saliendo.html?url=akdgasKGDSA" id="saliendo">forobeta</a>,
Aqui editaremos la variable base, con la url de la pagina que creamos.
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));
}4.- Ahora el código a partir de aquí se encargara de obtener los enlaces y poner un contador y luego habilitar el botón para poder continuar.
En esta parte del codigo solo hay que reemplazar "saliendo.html?url=" con la pagina que creaste, mas "?url=". ejemplo: "mipagina.html?url="
JavaScript:
/*
--- 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();
}Bien, aqui les dejo el codigo completo, también lo agregan en un gadget html/javascript.
HTML:
<script type="text/javascript">
/* Aqui vamos a remplazar la url por la pagina que creamos.
*/
var base ="https://reaccionesmx.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;
}
/**
https://forobeta.com/members/stron.150907/
**/
</script>y para finalizar, aquí les dejo un demo funcionando. Deja una reacción si te gusto xd
DEMO
Última edición:
