Miroku97
Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
- Desde
- 12 Feb 2021
- Mensajes
- 210
El resultado o lo que deseo compartir personalmente es el siguiente diseño:
Este sería mi primer tutorial como aporte al foro. No soy muy conocedor del tema, por lo que igual me he basado en un proyecto externo; por tanto igual este tutorial es para principiantes o novatos, de parte de otro novato.
En primer lugar, para que esto funcione hay que colocar el script, puede en el html de la plantilla o como gadget:
Entonces allí colocaremos el siguiente código SCRIPT:
Entonces como se darán cuenta hay unos "id". No habrá inconvenientes mientras que se use una vez por cada entrada, pero si usamos el código para copir más de un elemento en una misma entrada; no funcionará como se espera. Entonces si queremos poner varias cosas para copiar en una misma entrada, hay que volver a ingresar el código aquel, en otro script (gadget), y cambiar los id con otro nombre.
Ahora, una vez ya puesto el script que hará funcionar el copiado, solo nos falta el html. El código base html es el siguiente:
Es decir, que lo que pongamos dentro del <span> en cuanto al identificador determinado, en este caso "enlace": se copiará mediante el uso o accionar del botón que también tendrá un identificador (en este caso "copiador"), mismo que podemos diseñarlo al gusto propio o colocarle otro texto dentro, en vez de "copiar".
Por ejemplo, este es un diseño que al menos para mi se me hizo conveniente, para lo que sería un blog de descargas ya sea de programas, películas o series, que lleven contraseña para algo:
El código HTML de aquello es el siguiente:
Si desean pueden ponerle entre <div></div>
Por otra parte el CÓDIGO CSS es el siguiente:
Como dije al inicio, pueden diseñarlo como deseen; pero ese es el diseño que adapté para mi, si lo desean de otra forma está a su creatividad o cambios rápidos puede ser el color de la fuente o fondo.
Adicionalmente, como he mencionado por el principio; en caso de que quisieran usar esto para algunos links dentro de una misma entrada, ya saben que tienen que colocar el código del script tantas veces se repita la misma función en una misma entrada; pero como el estilo y html que les compartí, no iba orientado para eso, les dejaré otra adaptación más semejante a la idea original del proyecto, el cual si cuenta como "enlace" y "copiar"; entonces podría ser también "enlace2" y "copiar2", etc.
Esos irían en un gadget distinto, respectivamente. Si desearon otro enlace más (osea para una misma entrada), tal como ya he repetido durante todo esta redacción, solo se cambia los "id"; y esto solo si en verdad van a utilizar esta función más de una vez en la misma entrada; si lo usan una sola vez en distintas entradas, no hay problema, copiará lo que esté en el <span>.
Bueno sigamos, con el HTML de la entrada:
El CSS puede ser el mismo del proyecto general que puse al inicio o igual pueden hacer uso del siguiente, donde solo quité unos cuantos estilos, y sumé el otro identificador extra, si tuvieran otro pues igual sería la misma dinámica.
El resultado sería el siguiente:
Recuerden que pueden darle su propio diseño: mejores bordes, fuentes, colores, etc..tomen en cuenta todo lo mencionado anteriormente.
¿Cómo se vería esto en el redactor del blogger?
Si yo pude de alguna forma utilizar esto, cualquiera puede, dale una ojeada e inténtalo.
Bueno creo que eso sería todo, espero sirva de algo, y se haya comprendido; los más expertos o verdaderos webmaster betas, podrían sacar más provecho o incluso tener diseños muchos mejores, por tanto igual invito a que compartan sus botones de copiado!.
Este sería mi primer tutorial como aporte al foro. No soy muy conocedor del tema, por lo que igual me he basado en un proyecto externo; por tanto igual este tutorial es para principiantes o novatos, de parte de otro novato.
Mismo que pueden ver cómo modificarlo, personalmente como lo que buscaba era un botón que copiara un determinado texto en línea, y de alguna forma mostrara que se copió el texto con éxito, me vino bien aquella publicación.
Pero bueno, esa es otra historia, continuemos a lo que ibamos.No está demás igual para los más aventureros dejarles otras opciones como sería el uso de ClipBoard.js, pero para eso les dejaré un artículo igual externo que muestra más a detalle, aunque sin los estilos:
Copiar texto o código al portapapeles usando ClipBoard.js
Como asignarle a un botón u otro elemento HTML la función de copiar contenido dentro de un cuadro de texto (textarea), un bloque DIV o dentro de un PREnorfipc.com
En primer lugar, para que esto funcione hay que colocar el script, puede en el html de la plantilla o como gadget:
Entonces allí colocaremos el siguiente código SCRIPT:
JavaScript:
var boton = document.getElementById("copiador");
boton.addEventListener("click", copiarAlPortapapeles, false);
function copiarAlPortapapeles() {
var enlace = document.getElementById("enlace");
var inputFalso = document.createElement("input");
inputFalso.setAttribute("value", enlace.innerHTML);
document.body.appendChild(inputFalso);
inputFalso.select();
document.execCommand("copy");
document.body.removeChild(inputFalso);
alert("Copiado al portapapeles!");
}Entonces como se darán cuenta hay unos "id". No habrá inconvenientes mientras que se use una vez por cada entrada, pero si usamos el código para copir más de un elemento en una misma entrada; no funcionará como se espera. Entonces si queremos poner varias cosas para copiar en una misma entrada, hay que volver a ingresar el código aquel, en otro script (gadget), y cambiar los id con otro nombre.
Ahora, una vez ya puesto el script que hará funcionar el copiado, solo nos falta el html. El código base html es el siguiente:
HTML:
<span id="enlace">abcd0123</span>
<button id="copiador"> Copiar</button>Es decir, que lo que pongamos dentro del <span> en cuanto al identificador determinado, en este caso "enlace": se copiará mediante el uso o accionar del botón que también tendrá un identificador (en este caso "copiador"), mismo que podemos diseñarlo al gusto propio o colocarle otro texto dentro, en vez de "copiar".
El "id=enlace", lo que queremos que se copie; y en css podemos darle estilos, porque si lo hacemos en línea puede haber un poco de inconvenientes.
Por ejemplo, este es un diseño que al menos para mi se me hizo conveniente, para lo que sería un blog de descargas ya sea de programas, películas o series, que lleven contraseña para algo:
El código HTML de aquello es el siguiente:
HTML:
<b>Contraseña:</b> <span id="enlace">abcd1234</span>
<button id="copiador"> Copiar <i class="fa fa-files-o" aria-hidden="true"></i></button>Por otra parte el CÓDIGO CSS es el siguiente:
CSS:
span#enlace {
color: #900707;
font-weight: bold
}
button#copiador {
background-color:#F20000
color: white;
border: none;
padding: 8px;
font-size: 1.2em;
font: bold 90% monospace;
display: inline-block;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
cursor: pointer;
}
button#copiador:hover {
color: white;
background-color: #CC0000;
}Como dije al inicio, pueden diseñarlo como deseen; pero ese es el diseño que adapté para mi, si lo desean de otra forma está a su creatividad o cambios rápidos puede ser el color de la fuente o fondo.
Adicionalmente, como he mencionado por el principio; en caso de que quisieran usar esto para algunos links dentro de una misma entrada, ya saben que tienen que colocar el código del script tantas veces se repita la misma función en una misma entrada; pero como el estilo y html que les compartí, no iba orientado para eso, les dejaré otra adaptación más semejante a la idea original del proyecto, el cual si cuenta como "enlace" y "copiar"; entonces podría ser también "enlace2" y "copiar2", etc.
JavaScript:
var boton = document.getElementById("copiador");
boton.addEventListener("click", copiarAlPortapapeles, false);
function copiarAlPortapapeles() {
var enlace = document.getElementById("enlace");
var inputFalso = document.createElement("input");
inputFalso.setAttribute("value", enlace.innerHTML);
document.body.appendChild(inputFalso);
inputFalso.select();
document.execCommand("copy");
document.body.removeChild(inputFalso);
alert("Copiado al portapales!");
}
JavaScript:
var boton = document.getElementById("copiador2");
boton.addEventListener("click", copiarAlPortapapeles, false);
function copiarAlPortapapeles() {
var enlace = document.getElementById("enlace2");
var inputFalso = document.createElement("input");
inputFalso.setAttribute("value", enlace.innerHTML);
document.body.appendChild(inputFalso);
inputFalso.select();
document.execCommand("copy");
document.body.removeChild(inputFalso);
alert("ya se ha copiado");
}Esos irían en un gadget distinto, respectivamente. Si desearon otro enlace más (osea para una misma entrada), tal como ya he repetido durante todo esta redacción, solo se cambia los "id"; y esto solo si en verdad van a utilizar esta función más de una vez en la misma entrada; si lo usan una sola vez en distintas entradas, no hay problema, copiará lo que esté en el <span>.
Bueno sigamos, con el HTML de la entrada:
HTML:
<div id="contenedor">
<div><span><br /></span></div><div>
<span id="enlace">Enlace 1</span>
<button id="copiador"> Copiar</button>
</div>
</div>
<br>
<div id="contenedor"><div><span id="enlace2">Enlace 2</span>
<button id="copiador2"> Copiar</button>
</div>
</div>El CSS puede ser el mismo del proyecto general que puse al inicio o igual pueden hacer uso del siguiente, donde solo quité unos cuantos estilos, y sumé el otro identificador extra, si tuvieran otro pues igual sería la misma dinámica.
CSS:
body {
background-color: #2c3e50;
}
#contenedor,#contenedor2 {
margin: 0px auto;
display: flex;
}
#contenedor> div {
display: flex;
}
span#enlace, #enlace2 {
color: white;
font-size: 1.3em;
padding: 9px 14px;
background-color: #2980b9;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
button#copiador,#copiador2 {
background-color: #d35400;
color: white;
border: none;
padding: 10px;
font-size: 1.2em;
display: inline-block;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
cursor: pointer;
}
button#copiador:hover, button#copiador2:hover{
background-color: #e67e22;
}El resultado sería el siguiente:
Recuerden que pueden darle su propio diseño: mejores bordes, fuentes, colores, etc..tomen en cuenta todo lo mencionado anteriormente.
¿Cómo se vería esto en el redactor del blogger?
Si yo pude de alguna forma utilizar esto, cualquiera puede, dale una ojeada e inténtalo.
Bueno creo que eso sería todo, espero sirva de algo, y se haya comprendido; los más expertos o verdaderos webmaster betas, podrían sacar más provecho o incluso tener diseños muchos mejores, por tanto igual invito a que compartan sus botones de copiado!.
Última edición:
