Tutorial - Como colocar Estatísticas Personalizadas

Oin leitores, tudo bom? Bom, sei que estou sumida, pouco não muito sumida, é que ta tendo uma votação ai no Twitter, e eu to muito focada nisso, mais eu decidi tirar um tempinho pra postar aqui no Blog!
Eu não sabia muito o que postar, então fui procurar algo legal, fui responder os comentários e achei esse blog, fui ver as postagens pra me dar uma inspirada e achei um post muito legal, ensinando a por a Gadget de Status, então eu coloquei no meu, só que ela veio com algumas coisas bugadas, o icon que fica no canto não estava funcionando, então eu resolvi reescrever o Tutorial dando os créditos necessários claro. 

Então vamos ao Tutorial! Se quiser aprender, clique em Mais Informações. 
Vá em Editar Html e pesquise (CTRL+F) por ]]></b:skin> e depois que encontrar, cole o seguinte a cima:

* -------------- WISHLIST || THINGS TO YOU! -------------- */

.WISHLIST {

DISPLAY: BLOCK; BACKGROUND-COLOR: TRANSPARENT;/* NÃO ALTERE ! */

BORDER-BOTTOM-WIDTH: 1PX;

BORDER-BOTTOM-STYLE: SOLID;

BORDER-BOTTOM-COLOR: #CCC; /* COR DA LINHA QUE FICA ABAIXO */

PADDING-TOP: 1PX;

PADDING-BOTTOM: 1PX;

PADDING-RIGHT: 2PX;

PADDING-LEFT: 2PX; MARGIN-RIGHT: 2PX;

}

.WISHLIST:HOVER {

BACKGROUND: 

PADDING-TOP: 1PX;

PADDING-BOTTOM: 1PX;

PADDING-RIGHT: 2PX;

PADDING-LEFT: 2PX; MARGIN-RIGHT: 2PX;

}

.WISHLIST:HOVER {

BACKGROUND: #F9F9F9;/* COR DA WISHLIST AO PASSA O MOUSE */

}

/* -------------- CÓDIGO WISHLIST -------------- */

}

}

/* -------------- CÓDIGO WISHLIST -------------- */

} /* -------------- CÓDIGO WISHLIST -------------- */

Depois disso, faça as devidas substituições:

Substitua o #ccc pela sua cor de Preferência, mais claro que combine com seu Layout. Ah mais eu não sei qual o código da minha cor. Calma! Vou deixar uma tabela de cores com todos os tons que possam combinar com o Layout de vocês, clicando aqui!

Substitua esse #F9F9F9 também pela cor que combine com o seu Layout, não a mesma que você usou a cima, uns tons mais claros ou mais escuros, se você não sabe o que significa, calma de novo! Vou te explicar! Toda vez que a pessoa passar o mouse sobre uma das linhas a "Wishlist" vai ativar, e ele vai ficar com a cor que você definiu! Use as cores da tabela que eu passei pra vocês ai em cima!

Bom, depois disso salve as atualizações, mais não acabou! Se você entrar no seu Blog, suas Estatísticas ainda não estarão no blog! Então vamos para a 2° e última etapa, e ai sim ela estará lá! 

Depois da 1° etapa concluida vamos ir em Layout e depois Adicionar uma Gadget, depois vamos procurar por Java HTML/Script e vamos colar isso dentro da caixa: 

<DIV CLASS="WISHLIST"><IMG SRC="Link da Imagem aqui" STYLE="FONT-SIZE: 100%;" /> NOME: <B>NOME DO SEU BLOG</B></DIV>

<DIV CLASS="WISHLIST"><IMG SRC="LINK DA IMAGEM AQUI" STYLE="FONT-SIZE: 100%;" /> SIGLA: <B>SIGLA DO SEU BLOG</B></DIV>

<DIV CLASS="WISHLIST"><IMG SRC="LINK DA IMAGEM AQUI" STYLE="FONT-SIZE: 100%;" /> DONA: <B>SEU NOME</B></DIV>

<DIV CLASS="WISHLIST"><IMG SRC="LINK DA IMAGEM AQUI" STYLE="FONT-SIZE: 100%;" /> VERSÃO: <B>VERSÃO DO LAYOUT</B></DIV>

<DIV CLASS="WISHLIST"><IMG SRC="LINK DA IMAGEM AQUI" STYLE="FONT-SIZE: 100%;" /> META: <B>META DO BLOG</B></DIV>

<DIV CLASS="WISHLIST"><IMG SRC="LINK DA IMAGEM AQUI" STYLE="FONT-SIZE: 100%;" /> ONLINE DESDE: <B>DATA DA CRIAÇÃO DO BLOG</B></DIV>

Depois disso, vamos fazer as modificações necessárias. Se vocês forem comparar essa 2° etapa com a do Blog que eu peguei, o Html está modificado, eu fiz modificações simples e que não mudara em nada do resultado final, apenas irá ajudar muito vocês!

Não vou narrar a 2° etapa inteira, como fiz na primeira, até porque você vai fazer a mesma coisa em todos! Vou usar a 1° linha de exemplo. 

No link da imagem, você vai colocar obviamente o link da imagem que você vai querer que fique do lado, porém, tem que ser do tamanho do Favicon, eu não vou deixar nenhum link porque isso serve pra blogs, tanto masculino como feminino. É só procurar no Google "Favicons tal" que vai aparecer milhares, depois de escolher seu primeiro favicon clique com o botão direito sobre a imagem e abre ela em uma nova guia, copie o link dela e cole no goo.gl, vocês podem usar outros, mais eu prefiro esse porque, não vai precisar salvar no computador o favicon, não tem que se cadastrar e é bem rapido, clique aqui para abrir ele. 
Depois de encurta-lo, coloque o link ai, e depois modifique com a informação que se pede, "nome do seu blog" ai você põe o nome dele (avá). Depois de fazer isso com todas as linhas, salve e veja como fica! 

Espero que tenha ajudado vocês, demorei muito pra escrever, pois explicar por texto é um pouco mais complicado, então não copie, e se copiar credite como eu fiz! Se tiverem duvidas é só comentar e eu respondo o mais rápido possível. Se quiser tutorias só pedir, e eu ensino a vocês. Beijos, e até o Próximo Post!