ShortCodes

A maioria desses recursos só podem ser usados no modo Visualização em HTML, nem você pode alternar para o modo Visualização 'Escrever" ao usar alguns desses recursos.

Na visualização do editor de postagem, clique no ícone no canto inferior direito do título
Duas opções aparecerão: exibição HTML e exibição de escrita
Selecione <> Visualização HTML

Nota: O HTML nativo do Blogger é, o melhor para ser amigável com SEO

Botões padrões

Padrão Preview Download Link Carrinho Mais Info

<a class="button" href="https://vtrick-plus.blogspot.com/" target="_blank">Padrão</a>
<a class="button preview" href="https://vtrick-plus.blogspot.com/" target="_blank">Preview</a>
<a class="button download" href="https://vtrick-plus.blogspot.com/" target="_blank">Download</a>
<a class="button link" href="https://vtrick-plus.blogspot.com/" target="_blank">Link</a>
<a class="button cart" href="https://vtrick-plus.blogspot.com/" target="_blank">Carrinho</a>
<a class="button share" href="https://vtrick-plus.blogspot.com/" target="_blank">Compartilhar</a>
<a class="button info" href="https://vtrick-plus.blogspot.com/" target="_blank">Mais Info</a>

link externo

Notifica os usuários se o link levará a outro site.

Exemplo_de_link_externo
Exemplo_de_link_alt

<a class='extL' href='#' rel='noreferrer' target='_blank'>Exemplo_de_link_externo</a>
<a class='extL alt' href='#' rel='noreferrer' target='_blank'>Exemplo_link_alt</a>

Botões Coloridos

Padrão Preview Download Link Carrinho Mais Info Preview

Formato de escrita

<a class="button green" href="https://vtrick-plus.blogspot.com/" target="_blank">Padrão</a>
<a class="button preview red" href="https://vtrick-plus.blogspot.com/" target="_blank">Preview</a>
<a class="button download yellow" href="https://vtrick-plus.blogspot.com/" target="_blank">Download</a>
<a class="button link purple" href="https://vtrick-plus.blogspot.com/" target="_blank">Link</a>
<a class="button cart blue" href="https://vtrick-plus.blogspot.com/" target="_blank">Carrinho</a>
<a class="button share orange" href="https://vtrick-plus.blogspot.com/" target="_blank">Compartilhar</a>
<a class="button info dark" href="https://vtrick-plus.blogspot.com/" target="_blank">Mais Info</a>
<a class="button white preview" href="https://vtrick-plus.blogspot.com/" target="_blank">Preview</a>

Botões especiais

Download WhatsApp Link Contato Telegram Instagram Carrinho

Formato de escrita

<a class="button blue" href="#" target="_blank"><i class="bi bi-cloud-arrow-down-fill" style="font-size:17px"></i> Download</a>
<a class="button green" href="#" target="_blank"><i class="bi bi-whatsapp" style="font-size:16px"></i> WhatsApp</a>
<a class="button white" href="#" target="_blank"><i class="bi bi-box-arrow-up-right" style="font-size:16px"></i> Link</a> 
<a class="button purple" href="#" target="_blank"><i class="bi bi-envelope" style="font-size:16px"></i> Contato</a> 
<a class="button blue" href="#" target="_blank"><i class="bi bi-telegram" style="font-size:16px"></i> Telegram</a> 
<a class="button dark" href="#" target="_blank"><i class="bi bi-instagram" style="font-size:16px"></i> Instagram</a> 
<a class="button orange" href="#" target="_blank"><i class="bi bi-cart" style="font-size:16px"></i> Carrinho</a>

Botões de download

Lorem Ipsum é show VTrick Blogger Criativo VTrick Manual do Usuário.pdf VTrick Diownload Grátis.zip VTrick Download do Video VTrick Código Fonte

Formato de esxrita

<a class="dl" href="https://vtrick-plus.blogspot.com/#" target="_blank">Lorem Ipsum é show</a>
<a class="dl" file-size="Light, Fast & Creative" href="https://vtrick-plus.blogspot.com/#" target="_blank">VTrick Blogger Criativo</a>
<a class="dl pdf" file-size="6.0 MB" href="https://vtrick-plus.blogspot.com/#pdf" target="_blank">VTrick Manual do Usuário</a>
<a class="dl zip" file-size="5.34 MB" href="https://vtrick-plus.blogspot.com/#zip" target="_blank">VTrick Diownload Grátis.zip</a>
<a class="dl media" file-size="326.1 MB" href="https://vtrick-plus.blogspot.com/#media" target="_blank">VTrick Download do Video</a>
<a class="dl code" file-size="324.3 KB" href="https://vtrick-plus.blogspot.com/#code" target="_blank">VTrick Código Fonte</a>

Caixa de download de contagem regressiva

Se você estiver fornecendo qualquer arquivo em seu site para download, esta caixa de download será útil para você. Alguns sites mostram uma contagem regressiva antes de iniciar o download ou redirecionar para o destino final.

cidade_mini.webp Imagem 255kb 1280×720 .webp

Formato de escrita

<!--[ Caixa de download de contagem regressiva ]-->
<div class='dldCo' id='download1'>
  <div class='dldBx'>
    <div class='dldTp'>
      <div class='dldIm' data-text='.png' style='background-image:url(imagem_url_aqui)'>
        <svg class='dldSv' viewBox='0 0 34 34'>
          <circle class='b' cx='17' cy='17' r='15.92' />
          <circle class='c dldPg' cx='17' cy='17' r='15.92' />
        </svg>
      </div>
      <div class='dldIn'>
        <span data-text='Nome'>Música_Wallpaper.png</span>
        <span data-text='Categoria'>Música</span>
        <span data-text='Tamanho'>3.05MB</span>
        <span data-text='Resolução'>1920×1080</span>
        <span data-text='Extensão'>.png</span>
      </div>
    </div>
    <button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
    <button class='dldBt dldRt'><svg viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
  </div>
  <div class='dldSl'>
    <div class='dldMe'></div>
  </div>
</div>

Bloco de notas

Este recurso serve para adicionar informações importantes, frases de advertência ou frases de destaque, existem alguns estilos que você pode tentar, incluindo:

Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.

Nota: Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.

Aviso: Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.

Formato de escrita

<blockquote class='check'>Lorem Ipsum...</blockquote>
<blockquote class='flag'>Lorem Ipsum...</blockquote>
<blockquote class='warn'>Lorem Ipsum...</blockquote>
<blockquote class='alert'>Lorem Ipsum...</blockquote>
<blockquote class='star'>Lorem Ipsum...</blockquote>

<p class="note">Lorem Ipsum is <b>not simply random text</b>. It has roots in a piece of classical test link here too Latin literature from <u>45 BC</u>, making it over 2000 years old.</p>

<p class="note wr">Lorem Ipsum is <b>not simply random text</b>. It has roots in a piece of classical test link here too Latin literature from <u>45 BC</u>, making it over 2000 years old.</p>

Tabela

Primeiro nome	Sobrenome	Email
John	Doe	john@examplo.com
Mary	Moe	mary@examplo.com
July	Dooley	july@examplo.com

Código da Tabela

<table> 
  <thead>
<tr>   
  <th>Primeiro nome</th> 
  <th>Sobrenome</th> 
  <th>Email</th>  
    </tr>
</thead>  
  <tbody>
<tr>     
  <td>John</td>   
  <td>Doe</td>    
  <td>john@examplo.com</td>  
    </tr>
<tr>    
  <td>Mary</td>   
  <td>Moe</td>   
  <td>mary@examplo.com</td>   
    </tr>
<tr>    
  <td>July</td>      
  <td>Dooley</td>     
  <td>july@examplo.com</td>
    </tr>
</tbody> 
</table>

Formulário de Contato

É só criar uma página de contato e colocar o código abaixo em negrito na página ou, postagem. A melhor forma de criar está página é, copiar e, colar o código abaixo em <> Visualizão em HTML e, salvar.

<b>{contactForm}</b>

Caixa de código

Código <pre> simples

Default PRE
$("#main-nav #s").focus(function());

Sintaxe do Codebox desenvolvida pelo Prism

Sintaxe da caixa de código com parâmetro: lang="js"

<pre lang="js">$("#main-nav #s").blur(function()...</pre>

👉 Resulto:

$("#main-nav #s").blur(function() {
if (0 === this.value.length) this.value = c;
});
$("#main-nav #s").focus(function() {
if (this.value === c) this.value = "";
});

Sintaxe da caixa de código com parâmetro simples: lang=""

<pre lang="">$("#main-nav #s").blur(function()...</pre>

Resultado:

$("#main-nav #s").blur(function() {
if (0 === this.value.length) this.value = c;
});
$("#main-nav #s").focus(function() {
if (this.value === c) this.value = "";
});

Sintaxe da caixa de código com parâmetro: lang="css"

.bi::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  }

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

Instale o modelo básico do Blogger

VTrick – Criativo Blogger Template v1.9.1

Adicionando widget de aviso de consentimento de cookie responsivo ao Blogger

Como criar um gerador de QR Code usando HTML, CSS e JavaScript

ShortCodes

Botões padrões

link externo

Botões Coloridos

Botões especiais

Botões de download

Caixa de download de contagem regressiva

Bloco de notas

Tabela

Formulário de Contato

Caixa de código

Postar um comentário

VTrick – Criativo Blogger Template v1.9.1

Como fazer Widget de oferta com contagem regressiva para o Blogger

Como adicionar anúncios LazyLoad do Google Adsense para Blog

Adicionando widget de aviso de consentimento de cookie responsivo ao Blogger

Como adicionar um widget sem conexão com a Internet ao Blogger