Adicionar a Função Copiar de um Modo Fácil (copy to clipboard)

Olá! Postei para vocês há algum tempo sobre como personalizar a tag <pre> do Blogger que permite que você deixe uma área com códigos diferenciada, e também sobre como usar syntax highlighter, incluindo opções para copiar e imprimir códigos. Ah! E aquela extensão para navegador para copiar códigos dos sites que você definir, CodeCopy.

Hoje mostro uma outra forma que encontrei no codepen de Shaik Maqsood, para quem curte compartilhar códigos em seu blog, adicionando a função copiar para a área de transferência em determinado conteúdo com texto; unindo a alguns códigos que vi em templates que usei aqui no blog e outros que cito ao longo da postagem consegui esse resultado aqui.

Ao passar o mouse sobre a palavra copiaa, aparece o mini aviso de que depois que clicar em copiar basta colar onde quiser (Ctrl+V). Isso é um tooltip feito com css, já postei aqui.

Enfim, para usar essa caixinha com função copiar, vá até o HTML da postagem (ou alguma área que aceite html) e cole isso:

<script>
function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}
</script>


<style>
#codebox{
    background-color: #fff;
    background-image: -webkit-linear-gradient(rgba(249, 131, 131, 0.05) 50%, transparent 50%, transparent);
    background-image: -moz-linear-gradient(rgba(249, 131, 131, 0.05) 50%, transparent 50%, transparent);
    background-image: -ms-linear-gradient(rgba(249, 131, 131, 0.05) 50%, transparent 50%, transparent);
    background-image: -o-linear-gradient(rgba(249, 131, 131, 0.05) 50%, transparent 50%, transparent);
    background-image: linear-gradient(rgba(249, 131, 131, 0.05) 50%, transparent 50%, transparent);
    -webkit-background-size: 100% 38px;
    -moz-background-size: 100% 38px;
    background-size: 100% 38px;
    line-height: 20px;
 height: 200px;
    color: #ffc3c3;
    position: relative;
    padding: 0 5px;
    margin: 5px 0 10px;
    overflow: hidden;
    word-wrap: normal;
    white-space: pre;
    font-size: 16px;
}

copia
{
  border-radius:8px;
  padding:10px;
  font-size:14px;
  font-family: 'delius', sans-serif;
  height:50px;
  cursor:pointer;
  background:#fff5f5;
  color: #f9c;
}

copia:hover{background: pink; color:white;}

/*tooltip*/
[data-wenk]:after {
    position: absolute;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    display: none;
    font-size: 12px;
 font-family: 'Delius', cursive;
    border-radius: 10px;
    content: attr(data-wenk);
    padding: 8px;
    color: #f9c;
    width: 150px;
    line-height: 20px;
    text-align: center;
    z-index: 1;
    pointer-events: none;
    display: block;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .3s;
    transition: all .3s;
    bottom: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, 10px);
            transform: translate(-50%, 10px)
}
[data-wenk]:after {
    opacity: 0
}
[data-wenk]:hover {
    overflow: visible
}
[data-wenk]:hover:after {
    display: block;
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%, -10px);
            transform: translate(-50%, -10px)
}




</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<center>
  <copia onclick="copyToClipboard('#p1')"> <span data-wenk="Clique em copiar depois cole em algum lugar">Copiaaa!</span></copia>
</center>
  <div id="codebox">
<p id="p1">o que vai ser copiado</p>
  </div>

Em que:
background-color: #fff; - cor da linha branca;
background-image: -webkit-linear-gradient(rgba(249, 131, 131, 0.05) 50%, transparent 50%, transparent); - cor da linha colorida/rosa;
line-height: 20px; - distância entre uma linha e outra;
height: 200px; - altura da caixinha na postagem, para não ficar grande demais e ocupar muito espaço;
color: #ffc3c3; - cor do texto da caixinha;
font-family: 'delius', sans-serif; - fonte, no caso seria 'delius', cursive, mas isso é só um exemplo, mudem a fonte como preferir :3
background:#fff5f5; e color: #f9c cor do plano de fundo e do texto 'Copiar';
copia:hover{background: pink; color:white;}- cor de Copiar quando passar o ponteiro do mouse.

Se você já usa Jquery (<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>), não precisa repetir com o que está no código.
Mude 'Clique em copiar depois cole em algum lugar' para o texto que quer que apareça no tooltip, e Copiaaa! para um texto como Copiar, Copy...

o que vai ser copiado = aí você troca pelo texto ou código que será compartilhado. Se for um código, pode usar o site Parse para converter tudo em html e depois substituir; é mais recomendado para CSS.

E é isso. Espero que lhes seja útil :3

Imagem dos coelhinhos: weheartit.com

0 Comentários

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

Reino Kawaii