|
CONSIDERAÇÕES INICIAIS |
Nesse tutorial, confira como adicionar uma caixa de texto com botão para
copiar o conteúdo interno, facilitando o compartilhamento de mensagens, informações de contato, códigos HTML, entre outros conteúdos textuais, conforme o exemplo abaixo.
Nesse caixa, ao clicar sobre o botão copiar, o texto da caixa será
copiado diretamente para a área de transferência do internauta. Dessa forma, esse
botão facilita o compartilhamento de conteúdo pois dispensa o uso das tradicionais
funções de selecionar e copiar. Além disso, após o clique no botão, deve ser
exibido na tela do navegador uma mensagem informando que o conteúdo da caixa
foi copiado para a área de transferência.
Esse tutorial é indicado para os blogs que utilizam o tema Awesome Inc.
ou Espetacular Ltda na plataforma do Blogger. Para baixar um modelo no tema Awesome,
clique aqui.
Antes de realizar qualquer um dos procedimentos a seguir, primeiramente
faça um backup do seu blog. Se ocorrer algum problema durante o procedimento, o
blog poderá ser restaurado com o arquivo do backup realizado. Se tiver alguma
dúvida sobre o backup, clique aqui.
|
EXEMPLO DE CAIXA DE SELEÇÃO COM BOTÃO COPIAR |
|
COMO ADICIONAR A CAIXA DE TEXTO NUMA
POSTAGEM NO BLOG? |
Confira como
adicionar a caixa de texto em uma postagem do seu blog em 22 passos:
1º Passo: acesse a página inicial do Blogger.
2º Passo: selecione o nome do seu blog.
3º Passo: acesse a página de edição da postagem desejada.
4º Passo: altere o modo de exibição do conteúdo para visualização em HTML.
Caso não apareça o nome visualização,
clique no ícone de um lápis e selecione o ícone dos sinais <>.
5º Passo: encontre o local que deseja inserir o conteúdo oculto.
6º Passo: clique no local desejado e escreva o código da caixa de texto abaixo:
<div class="code-container">
<textarea
id="codeSnippet" readonly rows="10" cols="50">
CONTEÚDO
</textarea>
<button
onclick="copyCode()">Copiar</button>
</div>
Clique aqui para copiar o código acima.
7º Passo: substitua o trecho CONTEÚDO pelo
texto que deseja disponibilizar na caixa.
Dica: também
é possível personalizar o trecho copiar.
8º Passo: clique em Atualizar.
9º Passo: retorne à página inicial do Blogger.
10º Passo: clique em Tema.
11º Passo: clique na seta ao lado do botão Personalizar
e escolha a opção Editar HTML.
12º Passo: clique em qualquer local dentro do HTML do blog.
13º Passo: no teclado, pressione as teclas CRTL
e F para abrir a caixa de pesquisa
do HTML.
14º Passo: pesquise pelo trecho abaixo:
</body>
Clique aqui para copiar o trecho acima.
15º Passo: clique na frente
desse trecho e pressione a tecla Enter
para inserir uma linha em branco abaixo desse trecho.
16º Passo: abaixo do trecho pesquisado, escreva o código JavaScript abaixo:
<script>
function copyCode() {
const codeSnippet =
document.getElementById("codeSnippet");
codeSnippet.select();
codeSnippet.setSelectionRange(0, 99999); // Para dispositivos móveis
try {
// Copia o texto para a
área de transferência usando a API Clipboard moderna
navigator.clipboard.writeText(codeSnippet.value).then(() => {
alert("Conteúdo
copiado para a área de transferência!");
});
} catch (err) {
document.execCommand("copy");
alert("Código copiado
(método fallback)!");
}
}
</script>
Clique aqui para
copiar o código acima.
Observação: o código acima é uma função JavaScript que ativa a funcionalidade do
botão copiar, permitindo a transferência do conteúdo da caixa de texto para a
área de transferência do internauta.
17º Passo: no teclado, pressione as teclas CRTL
e F para abrir novamente a caixa de
pesquisa do HTML.
18º Passo: pesquise pelo trecho abaixo:
/* Content
Clique aqui para copiar o trecho acima.
19º Passo: clique antes desse
trecho e pressione a tecla Enter
para inserir uma linha em branco acima desse trecho.
20º Passo: acima do trecho pesquisado, escreva o código css abaixo:
.code-container {
font-style: arial;
display: flex;
flex-direction: column;
width: 100%;
margin: 0px;
background:transparent;
background-color:transparent;
}
#codeSnippet {
/* Impede que o usuário edite,
mas permite a seleção e cópia */
background-color: #f3f3f3;
padding: 10px;
border: 1px solid #40a0c8;
border-radius: 4px;
resize: none; /* Impede
redimensionamento manual pelo usuário */
}
button {
margin-top: 10px;
padding: 10px 15px;
background-color: #40a0c8;
color: white;
border: none;
cursor: pointer;
border: 1px solid #40a0c8;
border-radius: 4px;
}
button:hover {
background-color: #2d70b5;
text-shadow: 0px 0px 5px
#ffffff;
}
Clique aqui para copiar o código acima.
Observação: caso não encontre o trecho /*
Content, o código acima pode ser inserido em qualquer linha livre antes da
tag </head>.
21º Passo: clique em visualizar para
conferir se a visualização do blog está correta.
A opção visualizar aparece no ícone do olho no
canto superior direito da tela.
22º Passo: por fim, clique em salvar e
em seguida confira o resultado no seu blog.
A opção salvar aparece no ícone do disquete no
canto superior direito da tela.
Dos três códigos disponibilizados, apenas o primeiro é o código da caixa
de texto, sendo o segundo um código JavaScript para ativar a função do botão
copiar e o terceiro, um código css para personalizar a caixa de texto. Nesse
sentido, o segundo e o terceiro código só precisam ser inseridos no código HTML
do blog uma única vez, enquanto o primeiro será inserido nas postagens, sempre
que houver necessidade de adicionar uma caixa de texto.
No último código, o trecho .code-container { é uma atribuição css para personalizar qualquer elemento do tipo caixa
de texto com a atribuição class="code-container".
Enquanto o trecho #codeSnippet { é uma atribuição css para personalizar qualquer elemento do tipo caixa
de texto com o id="codeSnippet".
Nesse sentido, os valores indicados podem ser personalizados conforme o tema do
blog.
Para alterar a cor da caixa de texto, altere o código hexagonal no
trecho background-color: #f3f3f3; na
qual o código #f3f3f3 corresponde a
cor prata. Para conferir o código de outras cores, clique aqui.
Para alterar a cor do botão, altere o código hexagonal no trecho background-color: #40a0c8; na qual o
código #40a0c8 corresponde a cor azul
escuro. Para conferir o código de outras cores, clique aqui.
Para ativar o
redimensionamento manual da caixa de texto, no trecho resize: none; altere o valor none
para horizontal, vertical ou both.
None: impede
o redimensionamento manual do internauta.
Horizontal: permite o redimensionamento manual apenas na direção horizontal.
Vertical: permite o redimensionamento manual apenas na
direção vertical.
Both: permite o redimensionamento manual em ambas as direções (horizontal e
vertical).
Para remover a
curvatura das bordas das caixas, remova o trecho border-radius: 4px; tanto em #codeSnippet,
quanto em button, ou apenas em um
desses elementos. Para aumentar ou diminuir o tamanho da curvatura da borda,
altere o número 4px para o valor
desejado.
Vale ressaltar que
todas as caixas de textos inseridas com a atribuição class="code-container" e id="codeSnippet" irão
receber a mesma personalização. Para adicionar uma caixa de texto com uma
personalização diferente, deve inserir o último código mais de uma vez,
alterando os termos code-container e
codeSnippet, além de realizar as
alterações necessárias no restante do código. No caso, se a primeira cópia do
último código foi realizada com as atribuições identificadas como class="code-container" e id="codeSnippet", a
segunda cópia pode receber a identificação class="code-container2" e id="codeSnippet2", por exemplo. Dessa forma, se o código da caixa
de texto for definido com as atribuições class="code-container" e id="codeSnippet" será personalizado com os códigos aplicados em .code-container e #codeSnippet. No entanto, se o código da caixa for definido com as atribuições class="code-container2" e id="codeSnippet2"
será personalizado com os códigos aplicados em .code-container2 e #codeSnippet2.
|
COMO ADICIONAR A CAIXA DE TEXTO NUM
WIDGET NO BLOG? |
Para adicionar a
caixa de texto em um widget do blog, deve realizar o mesmo procedimento
anterior, alterando apenas do terceiro ao oitavo passo.
3º Passo: clique em layout.
4º Passo: clique em adicionar um gadget.
5º Passo: na janela seguinte, selecione o widget HTML/JavaScript.
6º Passo: no campo conteúdo, insira o
código da caixa de texto disponibilizado no sexto passo do procedimento
anterior.
Clique aqui para copiar o código da caixa de texto.
7º Passo: substitua o trecho CONTEÚDO
pelo texto que deseja disponibilizar na caixa.
8º Passo: clique em salvar.
|
CONSIDERAÇÕES FINAIS |
Portanto, esse tutorial visou compartilhar um pouco de nossos
conhecimentos sobre a elaboração de uma caixa de texto com botão copiar para
melhorar o compartilhamento de mensagens de texto no blog.
|
TUTORIAIS RELACIONADOS |
|
Por: Santos.
Elaborado em: 28/12/2025. Publicado em: 28/12/2025. Atualizado em: 28/12/2025. Obrigado pela
sua atenção, qualquer dúvida, falha ou sugestão, deixe seu comentário ou
entre em contato conosco. |
Nenhum comentário:
Postar um comentário