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
vtrick-criativo-blogger-template

Shortcodes

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.


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.


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.


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.


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>

{contactForm}

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;
  }

Postar um comentário

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

Atualizar