Como criar um botão de cópia em suas postagens do Blogspot

Como criar um botão de cópia dentro da sua postagem

Sempre crie uma frase de segurança única para jogos, testnets ou airdrops e evite usar sua carteira principal. Nunca compartilhe suas chaves privadas.

O botão de cópia é extremamente útil para compartilhar links, prompts ou códigos dentro do seu blog. Com ele, o visitante pode copiar rapidamente o conteúdo desejado sem precisar selecionar manualmente.

Você pode inserir este script dentro de um widget do Blogspot e reutilizar o botão em várias postagens, alterando apenas o conteúdo que será copiado.

Dicas adicionais:

Você pode personalizar a cor, tamanho e texto do botão conforme o estilo do seu blog.
Utilize este recurso para fornecer links de afiliados, códigos promocionais ou instruções rápidas aos visitantes.
Lembre-se de sempre informar sobre a responsabilidade individual ao utilizar qualquer conteúdo de investimentos, airdrops ou criptomoedas.
Para conteúdos de vídeo, mantenha sempre o autoplay mudo e habilite legendas automáticas, como mostrado no exemplo acima, para melhor indexação pelo Google Search Console.

Segue o HTML

<div style="background-color: whitesmoke; border-left: 4px solid rgb(66, 133, 244); margin: 20px 0px; padding: 15px; position: relative;">

<button id="btnCopiar" style="background: linear-gradient(135deg, rgb(102, 126, 234) 0%, rgb(118, 75, 162) 100%); border-radius: 8px; border: none; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px; color: white; cursor: pointer; font-size: 14px; font-weight: bold; padding: 10px 20px; position: absolute; right: 10px; top: 10px; transition: 0.3s;">
📋 Copiar Prompt
</button>


<div id="conteudoLinha" style="font-family: monospace; margin-top: 10px;">
https://canalqb.blogspot.com
</div>
</div>

Segue o Script para acionar o botão, eu normalmente deixo em um widget, assim diminui a quantidade de script por post.

<script>
function copiarLinha() {
const texto = document.getElementById('conteudoLinha').innerText;

// Criar elemento temporário para copiar
const elementoTemp = document.createElement('textarea');
elementoTemp.value = texto;
elementoTemp.style.position = 'fixed';
elementoTemp.style.opacity = '0';
document.body.appendChild(elementoTemp);

// Selecionar e copiar
elementoTemp.select();
elementoTemp.setSelectionRange(0, 99999);

try {
document.execCommand('copy');

// Feedback visual
const botao = document.getElementById('btnCopiar');
const textoOriginal = botao.innerHTML;
botao.innerHTML = '✅ Copiado!';
botao.style.background = 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)';

// Voltar ao normal após 2 segundos
setTimeout(function() {
botao.innerHTML = textoOriginal;
botao.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
}, 2000);

} catch (err) {
alert('Erro ao copiar. Por favor, selecione e copie manualmente.');
}

// Remover elemento temporário
document.body.removeChild(elementoTemp);
}

// Efeito hover
const btn = document.getElementById('btnCopiar');
btn.addEventListener('mouseover', function() {
this.style.transform = 'translateY(-2px)';
this.style.boxShadow = '0 6px 12px rgba(0,0,0,0.15)';
});
btn.addEventListener('mouseout', function() {
this.style.transform = 'translateY(0)';
this.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
});

// Associar função ao botão
btn.addEventListener('click', copiarLinha);
</script>