Layout: Pink Minimal (Instruções Básicas)

        Layout Free: Pink Minimal [PREVIEW]

Download

Este é um post especialmente para bloggers iniciantes, sem nenhum tipo de conhecimento por como usar absolutamente nada, desde blockquotes a menus do próprio layout. Se você sabe disso apenas ignore.

        Como usar: 

• Blockquote
• Leia Mais e Marcadores
• Menu de status do blog
• Menu de tags
• Menu Deslizante
• Não altere a cor das palavras ou links nos posts, o html se encarrega disso automaticamente

         *Para ir diretamente até um dos tópicos pesquise-o com ctrl + f

         No post anterior, você conferiu algumas das possibilidades de personalização de letras e texto que esse layout disponibiliza, mas e agora, como eu faço para usa-los? Segue aqui um passo a passo para você , blogueiro iniciante, que deseja uma solução simples para obter uma interface tão bonita e organizada quanto a de um veterano.

         Usar o blockquote: Além das opções de formatação básicas de texto que o próprio blogger disponibiliza como por exemplo negrito, itálico e sublinhado, há também o blockquote, que é exatamente o que o nome sugere, uma quote, essa que pode estar dentro de uma caixa em hover, ter uma cor diferente, uma linha na lateral, uma fonte menor, aí dependo do que quem fez o layout pôs no HTML.

Exemplo de blockquote

         Para fazê-lo você vai clicar em 'HTML', botão este que encontra-se na lateral esquerda dos posts (enquanto vocês os faz) (clique nas imagens para amplia-las)

        E coloque o texto desejado entre <blockquote> o seu testo vem aqui </blockquote>

        Usar o "Leia Mais" ou "Continue Lendo" e Marcadores/Tags: Clique no botão indicado. Ao lado (lateral direita) destacam-se os marcadores, que são tags, essas que aparecem no fim do post (como você mesmo pode conferir olhando no fim desse post, os links rosa de "teste" e "tutorial", funcionam exatamente como tags de facebook e instagram mas dentro do seu blog, ajuda a organizar melhor as coisas, você pode também adicionar seus marcadores ao blog, como o menu no terceiro gadget da live preview desse template. Existem menus específicos para tags que você pode criar em html (o layout pink minimal já disponibiliza desse menu, como você pode conferir abaixo procurando com ctrl + f  por "Menu de Tags"

        Menu de Status:  O menu que, no segundo gadget da live preview (x)

        Clique nas chaves que ficam ali no cantinho do gadget, uma janela pop-up será aberta e lá estará todo o código HTML do menu (fora é claro aquilo que é necessário estar dentro do HTML do blog)

        Dentro do HTML você pode observar que o texto que aparece no gagdet está lá, não com a mesma fonte ou cor, mas lá, você altera o que estiver nesses gadgets da forma que quiser. Aqui segue o código para adicionar esse menu de status do blog caso você tenha se interessado.

*Na página inicial do blogger clique no nome do seu blog, na lateral esquerda um pouco embaixo da página você verá escrito 'layout', vá até lá e siga as intruções de acordo com Layout > Adicionar novo gadget > HTML/JavaScript > Cole o código abaixo no pop-up que abrirá e altere de acordo com suas informações.

<div class="wishlist">
<img src="http://static.tumblr.com/nxhlvyi/VXXlggo1h/2m7uqlt.gif" style="font-size: 100%;" /> Nome: <b>NOME DO SEU BLOG AQUI</b></div>
<div class="wishlist">
<img src="http://static.tumblr.com/nxhlvyi/VXXlggo1h/2m7uqlt.gif" style="font-size: 100%;" /> Quem?: <b>SEU NOME.</b>PEQUENA INTRODUÇÃO SOBRE VOCÊ (caso não queira apenas apague isso)</div>
<div class="wishlist">
<img src="http://static.tumblr.com/nxhlvyi/VXXlggo1h/2m7uqlt.gif" style="font-size: 100%;" /> Versão: <b>1.0 Pink Minimal</b></div>
<div class="wishlist">
<img src="http://static.tumblr.com/nxhlvyi/VXXlggo1h/2m7uqlt.gif" style="font-size: 100%;" /> Online desde: <b>DATA DE CRIAÇÃO DO SEU BLOG</b></div>

   
       Menu de Tags: Esse menu é para as suas tags, ou ainda para suas páginas, aquelas abas que você deve ter visto em tal blog que te levam para uma página separada com tal conteúdo, vamos adicionar isso de forma mais minimalista (como sempre minha proposta e a de um layout básico e minimalista, sempre lembrem disso por favor)

*Adicione novamente um gadget de HTML/JavaScript porém, dessa vez, cole o seguinte código.

<div class='lado-esquerdo'>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="http://livelayprvws.blogspot.com.br/search/label/Teste"><div id="menu-tags-dois-isa">Teste</div></a>
</div>
<div class='lado-direito'>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
</div>

*Caso você queira menos tags no menu: Apague o primeiro <a href="Link"><div id="menu-tags-dois-isa">NOME</div></a> de cima e o de baixo também (o menu fica desigual se você apagar apenas um)

      Menu Deslizante: (último gadget da live preview) É um menu descomplicado e fofo, na minha opinião, poupa espaço e você pode colocar quantas abas quiser:

      Adicione outro gadget de HTML com o seguindo código:

<link href="http://naah-oliver.zip.net/menu2.css" media="screen" rel="stylesheet" type="text/css"></link> <script src="http://poisonedapple.awardspace.us/tabber.js" type="text/javascript"></script><br />
<div>
<br /></div>
<center>
<div class="tabber">
<div class="tabbertab" title="TÍTULO DA 1° ABA">
<br />
<br />
TEXTO DA 1° ABA</div>
<div class="tabbertab" title="TÍTULO DA 2° ABA">
<br />
<br />
<center>
TEXTO DA 2° ABA</center>
<br /></div>
<div class="tabbertab" title="TÍTULO DA 3° ABA">
<br />
<br />
<i>TEXTO DA 3° ABA</i><br />
<center>
<i><br /></i></center>
</div>
</div>
</center>

       *Para adicionar uma imagem dentro de uma das abas:  <img src="URL DA IMAGEM" />
       *Para adicionar um link dentro de uma das abas: <a href="LINK" >NOME DO LINK</a>
       *Link em imagem dentro de uma das abas:  <a href="LINK" ><img src="URL DA IMAGEM" /></a>