Elegante box de mensagens com abas para Blogger

Olá e bem-vindo ao Mult-focos. Trazemos neste artigo um elegante box de mensagens para Blogger. Na realidade este widget pode ser usado para mensagens e outras utilizações, por exemplo, postar códigos desde que você os converta, é só usar a imaginação.

Animação 3D usando puro CSS3

Veja um demo clicando no botão abaixo ou em Result no Box de códigos.

DEMO
Como adicionar no seu blog 

• Copie o código CSS do Box de códigos 
• Vá ao painel do Blogger->modelo->editar HTML->use Ctrl+F e localize:]]></b:skin>
• Acima desta tag copie e cole o código CSS do box de códigos abaixo. 

Próximo passo

• Ir para o painel do blogger->layout 
• Clique em Adicionar um Gadget. 
• Na janela Adicionar um gadget->HTML/JavaScript. 
• Copie o código JS abaixo e cole-o dentro da caixa de conteúdo. 
• Salvar o gadget. Arraste o gadget e reposicione-o onde você quer mostrá-lo. 
• Clique no botão Salve (canto superior direito). 

Configurações

•  No próprio código tem as explicações necessárias, preste atenção em: AQUI A 1º LETRA DO TEXTO para ficar igual ao exemplo do demo e também na ordem dos títulos e mensagens. 

Isto é tudo.

<div id="multwrap">

 <a href="javascript:navigate_tabs('a','first-tab');" class="buttons" id="first-tab">Verdade</a> 

<a href="javascript:navigate_tabs('b','second-tab');" class="buttons" id="second-tab">Bilhete</a>

<a href="javascript:navigate_tabs('c','third-tab');" class="buttons" id="third-tab">Solidão</a>

   <br clear="all" />

      <div id="multitab" align="center">

          <div class="a"><em>U</em>m pedaço de pão comido em paz é melhor do que um banquete comido com ansiedade.  </div>

          <div class="b"><em>S</em>e tu me amas, ama-me baixinho
Não o grites de cima dos telhados
Deixa em paz os passarinhos
Deixa em paz a mim!
Se me queres,
enfim,
tem de ser bem devagarinho, Amada,
que a vida é breve, e o amor mais breve ainda... </div>

          <div class="c"><em>A</em> solidão é o fundo último da condição humana. O homem é o único ser que se sente só e que procura um outro. </div>

</div> </div>

</div>

See the Pen Elegante box de mensagens para Blogger by Mairink (@Oemes) on CodePen.

---

---