Como criar um codebox elegante para postagens de blog

porWallace Fernandes • • 5 minutos de leitura
0

Se você já forneceu códigos para seus visitantes, deve ter precisado de um Codebox. É por isso que neste artigo vamos criar um Codebox estiloso.

Criar uma caixa de código com os botões Copiar e modo escuro (DarkMode) para o blogger (Blogspot) 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 do Tema do Blogger. Vejamos esta demonstração.

Codebox-para-postagens-do-blog
© Vtrick Design | Codebox para postagens do blog

Codebox com botões Copy e Dark Mode

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.

Etapa 1: Primeiro, faça login no 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 e você será redirecionado para a página de edição.

Adicionando Códigos de Notificação Toast

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

/* Toast Notification by Vtrick Design */
.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)}

Observe que já usamos os códigos CSS acima em postagens anteriores. Se você já o adicionou em seu XML de tema, pule esta etapa e siga as próximas etapas.

Além disso, se o seu tema já tiver uma notificação do sistema, pule as etapas 6 e 7, mas certifique-se de combinar a classe de notificação do sistema com o CSS da notificação do sistema do tema.

Passo 6: Cole o seguinte HTML e Javascript logo abaixo para <body> marcar. Se você não o encontrar, provavelmente já foi analisado, o que é &lt;body&gt;.

<div id='tstNtf' class='tNtf'></div>
<script>
  /*<![CDATA[*/
  /* Toast */ function toast(e){var tNotif = document.getElementById('tstNtf'); if (tNotif != null && e){tNotif.innerHTML = '<span>' + e + '</span>'}};
  /*]]>*/
</script>

Adicionando Códigos Codebox

Passo 7: Pesquise o código ]]></b:skin> e cole os seguintes códigos CSS logo acima dele.

/* Codebox by Vtrick */
.cBx{-webkit-tap-highlight-color:transparent;background:#f1f3f4;position:relative;padding-top:30px;border:1px solid #dadce0;border-radius:5px;margin:40px 0}
.cBx pre{display:block;position:relative;font-family:monospace;font-size:13px;line-height:1.6em;hyphens:none;overflow:auto;direction:ltr;white-space:pre;background:transparent;padding:0 15px 15px;margin:0}
.cBx pre::before, .cBx pre::after{display:none}
.cBxT{position:absolute;right:0;top:0;padding:10px 10px 0 0}
.cBxT button{position:relative;background:transparent;outline:none;border:none;cursor:pointer;padding:0;margin:0;width:20px;height:20px;display:inline-flex;justify-content:center;align-items:center}
.cBxT button:not(:last-child){margin-right:10px}
.cBxT button svg{width:20px;height:20px;fill:none!important;stroke:#000 !important;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
body.cDrk .cBxT button .moon, body:not(.cDrk) .cBxT button .sun, .cBx.copied button .copy, .cBx:not(.copied) button .check{display:none}
.cBxT button span{display:block;position:absolute;bottom:calc(20px + 10px);right:-10px;background:#252526;color:#fff;white-space:nowrap;font-size:11px;line-height:1rem;padding:4px 6px;border-radius:3px;opacity:0;visibility:hidden;transition:all .2s ease}
.cBxT button:hover span{opacity:1;visibility:visible;bottom:calc(20px + 20px)}
.cBxT button span::before{content:'';position:absolute;bottom:-3px;right:15px;width:8px;height:8px;background:inherit;border-radius:2px;transform:rotate(45deg)}
.cDrk .cBx{background:#283142;color:#fffdfc}
.cDrk .cBx pre{color:#eceff1}
.cDrk .cBxT button svg{stroke:#fff !important}

Passo 8: Cole o seguinte Javascript logo acima da tag </body>. Se você não o encontrar, provavelmente já foi analisado, o que é &lt;/body&gt;.

<script>
  /*<![CDATA[*/
  /* Codebox */
  (() => {
    /* config */
    var config = {
      copyText: 'Copy to Clipboard',
      copiedText: 'Copied to Clipboard',
      lightText: 'Switch to Light',
      darkText: 'Switch to Dark',
      copiedToast: 'Copied to Clipboard!'
    }
    /* main scripts */
    var cBox = document.querySelectorAll(".cBx");
    var dBdy = document.getElementsByTagName('body')[0];
    localStorage.getItem('CODE_MODE') === 'dark' ? dBdy.classList.add('cDrk') : dBdy.classList.remove('cDrk');
    for (var i = 0; i < cBox.length; i++){
      let c = cBox[i];
      c.setAttribute('data-code', i);
      c.insertAdjacentHTML("afterbegin", "<div class='cBxT'><button onclick='codeDark()'><svg class='line sun' viewBox='0 0 24 24'><circle cx='12' cy='12' r='5'></circle><line x1='12' y1='1' x2='12' y2='3'></line><line x1='12' y1='21' x2='12' y2='23'></line><line x1='4.22' y1='4.22' x2='5.64' y2='5.64'></line><line x1='18.36' y1='18.36' x2='19.78' y2='19.78'></line><line x1='1' y1='12' x2='3' y2='12'></line><line x1='21' y1='12' x2='23' y2='12'></line><line x1='4.22' y1='19.78' x2='5.64' y2='18.36'></line><line x1='18.36' y1='5.64' x2='19.78' y2='4.22'></line></svg><svg class='line moon' viewBox='0 0 24 24'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'></path></svg><span class='moon'>" + (config.darkText ? config.darkText : 'Dark Theme') + "</span><span class='sun'>" + (config.lightText ? config.lightText : 'Light Theme') + "</span></button><button onclick='codeCopy(" + i + ")'><svg class='line copy' viewBox='0 0 24 24'><rect x='9' y='9' width='13' height='13' rx='2' ry='2'></rect><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'></path></svg><svg class='line check' viewBox='0 0 24 24'><polyline points='9 11 12 14 22 4'></polyline><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'></path></svg><span class='copy'>" + (config.copyText ? config.copyText : 'Copy') + "</span><span class='check'>" + (config.copiedText ? config.copiedText : 'Copied') + "</span></button></div>");
    }
    window.codeDark = () => {
      localStorage.setItem("CODE_MODE", "dark" === localStorage.getItem("CODE_MODE") ? "light" : "dark");
      localStorage.getItem("CODE_MODE") === "dark" ? dBdy.classList.add("cDrk") : dBdy.classList.remove("cDrk");
    }
    window.codeCopy = (index) => {
      if (index !== undefined) {
        let el = document.querySelector(".cBx[data-code='" + index + "']");
        if (el !== null){
          let pre = el.querySelector('pre');
          if (pre !== null){
            var e = getSelection(),
                t = document.createRange();
            e.removeAllRanges();
            t.selectNodeContents(pre);
            e.addRange(t);
            document.execCommand("copy");
            e.removeAllRanges();
            el.classList.add('copied');
            toast(config.copiedToast ? config.copiedToast : 'Copied to clipboard');
            setTimeout(() => {
              el.classList.remove('copied');
            }, 2000)
          }
        }
      }
    }
  })()
  /*]]>*/
</script>

Isso é feito! Agora use os seguintes códigos HTML em suas postagens de blog por meio da visualização HTML onde você quiser adicionar o Codebox.

<div class='cBx'>
  <pre>&lt;!--[ Code Box 1 ]--&gt;</pre>
</div>

<div class='cBx'>
  <pre>&lt;!--[ Code Box 2 ]--&gt;</pre>
</div>

<div class='cBx'>
  <pre>&lt;!--[ Code Box 3 ]--&gt;</pre>
</div>

Termos de uso

Se você quiser usar este Codebox em suas postagens, 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 Codebox usando estes códigos, você deve adicionar uma Referência com link visível e clicável redirecionando para o nosso site: www.vtrickplus.eu.org/ Se você reescrever sem Referência, Ações Legais serão tomadas.

Conclusão

Isso é tudo sobre como criar o Codebox para postagens de blog. 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. Obrigado!

4.8 / 1649 cotações
Wallace Fernandes

Vietrick Plus é um webblog pessoal que opera desde 25 de dezembro de 2019 que é operado e desenvolvido pelo fundador Le Hoa. VTrick é, um Template, Rápido, Leve e, Criativo.

Postar um comentário

Por favor, não compartilhe nenhum dado sensível ou pessoal aqui.

Postagem Anterior Próxima Postagem
Atualizar