Como fazer mini-stats.

Hi people! Gostaram do post de ontem? Pela primeira vez eu postei sobre um filme! *O*, mas não se acostumem, não vou continuar.

Então, o post de hoje vai ensinar a fazer um mini-stats igual aquele ali ó ___-->

Que tal? Bem, adivinhem? O código foi feito Todinho por mim! Ah! Orgulho define.

Então, GO?

Primeiro, vamos abrir sua área da postagem, lá que vamos incorporar o código, é o seguinte, a primeira coisa é escolher a imagem do topo, melhor se for gif, como gifs são mais complicados de achar, fiz um seleção para vocês:

     

   

   

Resumindo: Tudo acaba em pizza! kkk

   

Essas foram as mais legais que eu achei. Selecione uma, cole na área do post e pronto, parte de cima concluída  agora, vem o texto, nele, use várias cores e contorns com sublinhados, riscados, itálicos e negrito. Depois, vem os gadgets, no meu tem os botões sociais, o "seguidores" e a barra de pesquisa, vou ensinar a colocar os 03.

Começando com: Botões sociais.

Bem, acesse aqui para mapear sua imagem, tem vários icones sociais, monte seu menu no Photoscape ou aqui. Aqui tem alguns icons que você pode usar.

Agora, pra parte dos seguidores.

Pra criar o gadget se seguir é muito simples. Vá ao na postagem, selecione a imagem (com clique) e aperte em "Link", lá coloque isso: http://www.blogger.com/follow-blog.g?blogID=SEU ID e coloque a sua imagem. 

Pra saber o ID do blog é fácil, vá no seu layout e na parte de editar, tem um código lá em cima na barrinha de pesquisa:

Print by: Candy Land

É esse código que vai usar.

Trouxe algumas imagens para você usar lá do CandyLland:

 

 

Essas tão ótimas, agora, vamos colocar a caixa de busca. A mais simples de todas, achada também no Candy Land.

<!-- INICIO WIDGET DE PESQUIZA PERSONALIZADA BY CANDYLLAND --> <div class='search'> <form action='/search' method='get'> <fieldset><input name='q' placeholder='Pesquise aqui' type='text' value=''/><button type='submit'>GO</button> </fieldset> </form> <style> /**** RESET ****/ * { border: 0; outline: 0; font-size: 100%; font-family: inherit; vertical-align: baseline; margin: 0; padding: 0; font-weight: 400; } /**** SEARCH ****/ .search { width:90%; margin-left:9px; margin-top:15px; margin-bottom:-18px; display:inline-block; zoom:1; *display:inline; border:solid 1px #ddd; padding:3px 5px; border-radius:2em; box-shadow:0 1px 0px rgba(0,0,0,.1); background: #f1f1f1; background:-webkit-gradient(linear, left top, left bottom,from(#fff),to(#ededed)); background:-moz-linear-gradient(top, #fff, #ededed); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed'); -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed') } /**** BOTAO ****/ .search button { border:0 !important; float:right; background:#f9b; cursor:pointer; color:#fff; padding:0 5px 2px 5px; height:26px;margin-left:-20px; border-radius:25px; box-shadow:0 0 2px #aaa; background:-webkit-gradient(linear, left top, left bottom, from(#e2c7a4), to(#876e59)); background:-moz-linear-gradient(top, #f9b, #ff1499); text-shadow:0 -1px #aaa } /**** BOTAO HOVER ****/ .search button:hover { background:#ff1490; background:-webkit-gradient(linear, left top, left bottom, from(#ff1490), to(#f9b)); background:-moz-linear-gradient(top, #ff1490, #f9b) } /**** CAIXA DE TEXTO ****/ .search input { border:0 !important; float:left; padding:6px 10px; width:78%; border-radius:15px; background:#fff; box-shadow:inset 0 1px 3px #ccc; text-align:center; cursor:text; color:#777; font:italic 12px georgia; text-shadow:0 1px #fff } </style> </div><div class='clear'></div> <!-- FIM SEARCH [candylland.blogspot.com] -->

Aí, é só juntar esses elementos na sua postagem, mudar a aba para HTML e copiar o código e colar nm gadget.
Pronto!