domingo, 12 de julho de 2015

Adicionar Tabs content Pure CSS no Blogger

pure-css-tabs-content-for-blogger

Hoje vamos mostrar como adicionar tabelas css de conteúdo para seu blogger isso é muito facil e fica muito bonito no seu blogger com um layout profissional você pode categorizar o seu conteúdo para o blogger isso é muito bom para ser adicionado no layout do blogger bem como no seu próprio post  para adicionar siga os passos abaixo.


1 Faça login no blogger criar novo post  ao lado de escrever clique em html como mostra a figura abaixo.
html-post-valid-css3-htlm5

apos clicar em html copie o codigo abaixo e cole dentro do post 


<link href="https://googledrive.com/host/0ByNodV_m9cVLVDV1eEkyNVBITTg/" rel="stylesheet" type="text/css"/>
<div class="tabbed-view">
  <form>
    <div class="tab-container orange">
      <label class="tab-label">
        <input checked="checked" class="tab-radio" name="page" type="radio" value="page5" />
      </label>
      <br />
      <h2 class="tab">
        Titulo tab one
      </h2>
      <article class="tab-page" id="page5">
        Tab 1 Conteudo escreva aqui
      </article>
     
     
      <label class="tab-label">
        <input class="tab-radio" name="page" type="radio" value="page6" />
        <h2 class="tab">
                  Titulo tab two
        </h2>
        <article class="tab-page" id="page6">
                Tab 2 Conteúdo escreva aqui
        </article>
       
      </label>
     
     
      <label class="tab-label">
        <input class="tab-radio" name="page" type="radio" value="page7" />
        <h2 class="tab">
                  Titulo tab three
        </h2>
        <article class="tab-page" id="page7">
                  Tab 2 Conteúdo escreva aqui
        </article>
       
      </label>
     
      <label class="tab-label">
        <input class="tab-radio" name="page" type="radio" value="page8" />
        <h2 class="tab">
        Tab 4 Titulo
        </h2>
        <article class="tab-page" id="page8">
                  Tab 4 conteúdo escreva aqui
        </article>
       
      </label>
     
    </div>
  </form>
</div>


Nota: no primeiro tab você vai editar o texto que deseja aparecer e o segundo você escreve o seu conteúdo. tabs 

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner