Como adicionar um clique duplo para copiar o pre-conteúdo no Blogger

Olá! Bem-vindo ao Blog VTrick, tudo beleza? 😁

Se você postar artigos relacionados à codificação em seu blog, talvez tenha usado o Marcador de sintaxe para fornecer códigos aos visitantes. Se você deseja facilitar para seus visitantes a cópia de seu conteúdo para a área de transferência, leia este artigo.

Neste artigo, vamos adicionar o Clique duas vezes para copiar o conteúdo em qualquer site do Blogger. Isso ajudará seus visitantes a copiar o conteúdo da tag <pre> .

Eles podem simplesmente clicar duas vezes no Syntax Highlighter para copiar seu conteúdo para a área de transferência, eles não precisam mais selecionar os códigos e copiar.

Tabela de Conteúdo

Como adicionar um clique duplo para copiar o conteúdo?
Termos de uso
Conclusão

Como adicionar um clique duplo para copiar o conteúdo?

Adicionar clique duplo para copiar conteúdo prévio ao site do Blogger não exigirá muito conhecimento sobre HTML, CSS ou JS porque já o projetei para você. O que você precisa fazer é implementar os códigos no lugar certo em seu XML de tema do Blogger.

Importante! Antes de começarmos a adicionar códigos em XML, recomendo que você faça um backup do seu tema atual. Por acaso, se ocorrer algum problema, você poderá restaurá-lo posteriormente.

Passo 1: Primeiro de tudo, faça login no seu Painel do Blogger

Passo 2: No Painel do Blogger, clique em Tema .

Passo 3: Clique no ícone de seta para baixo ao lado do botão 'personalizar'.

Passo 4: Clique em Editar HTML , você será redirecionado para a página de edição.

Etapa 5: Agora pesquise o código ]]></b:skin> e cole os seguintes códigos CSS logo acima dele.

Nota: Se o seu modelo tiver um recurso de modo escuro, e se você quiser uma cor diferente quando estiver no modo escuro, poderá personalizar os códigos conforme sua necessidade. Cada modelo pode ter uma classe de modo escuro diferente, portanto, ajuste-a, você pode substituir a classe marcada pela classe de modo escuro do modelo..

/* Toast Notification by VTrick */
.tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
@media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
.darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}

Nota: Você pode adicionar o seguinte CSS logo abaixo do CSS acima se estiver usando a versão mais recente do Median UI, Fletro Pro ou iMagz Template. São ótimos modelo projetados pela Jago Desain.

.pre:not(.tb):hover::before{content:'Clique duas vezes para copiar | </>'}
.pre:not(.tb).html:hover::before{content:'Clique duas vezes para copiar | .html'}
.pre:not(.tb).css:hover::before{content:'Clique duas vezes para copiar | .css'}
.pre:not(.tb).js:hover::before{content:'Clique duas vezes para copiar | .js'}

Passo 6: Cole o seguinte HTML logo abaixo da tag de nome <body>. Se você não o encontrar, provavelmente já foi analisado, o que é <body>.

<!--[ Toast Notification by VTrick ]-->
<div id='toastNotif' class='tNtf'></div>.

Passo 7: Agora adicione os seguintes códigos Javascript logo acima da tag de nome </body>.. Se você não o encontrar, provavelmente já foi analisado, o que é </body>.

<b:if cond='data:view.isSingleItem'>
   <script>/*<![CDATA[*/ /* Script de cópia de conteúdo  VTrick */ for(var preClick=document.getElementsByTagName("pre"),i=0;i<preClick.length;i++)preClick[ i].addEventListener("dblclick",function(){var e=getSelection(),o=document.createRange();o.selectNodeContents(this),e.removeAllRanges(),e.addRange(o),document. execCommand("copy"),e.removeAllRanges(),document.querySelector("#toastNotif").innerHTML="<span>Copiado para a área de transferência!</span>"},!1); /*]]>*/</script>
</b:se>

Etapa 8: por fim, salve as alterações

Agora como escrever esses códigos de sintaxe em suas postagens? É o que vamos mostrar abaixo, e não se esqueça de analisar os seus códigos antes para que eles apareçam para serem copiados.

Formato de Escrita

<pre><code>Seu_Código_Aqui</code></pre>.

Formato de escrita da sintaxe para a versão mais recente da Median UI, modelo Fletro Pro, e iMagz. Todos da Jago Desain.

<div class='pre html notranslate' > 
<pre>Seu_Código_Aqui</pre> 
</div>

Termos de uso

Se você quiser usar este Copiar pré-conteúdo em seu site, por favor, não remova os atributos dos códigos, ele não ficará visível em seu site.

Se você deseja reescrever um artigo neste Copiar pré-conteúdo usando estes códigos, você deve adicionar uma Referência com link visível e clicável redirecionando para o nosso site:. https://vtrick-plus.blogspot.com/ Se você reescrever sem Referência, Ações Legais serão tomadas.

Conclusão

Trata-se de adicionar a cópia de conteúdo anterior ao site do Blogger. Espero que você aproveite este artigo. Por favor, compartilhe este artigo.

E se você estiver enfrentando problemas em qualquer seção ou tiver alguma dúvida, pergunte-nos na caixa de comentários. Obrigada!