21 de janeiro: 13. Maratona CSS: Botão do gadget de seguidores personalizado [blogger]

Yo minna-san, como estão? Sei que devo mil e uma desculpas por estar a quase três semanas sem postar, mas tive muitos contra tempos. Já estou preparando o novo layout do blog. Yeeee!!!! Está aquele meu estilo simples e careca, mas espero que gostem. Lindos eu não esqueci do grupo nem to tutorial de como criar um layout avançado, okay? Apenas estou sem tempo de arrumar as coisas... logo ajeito tudo. Hoje trago um tutorial do estilo dois em um.

Vou mostrar como personalizar o botão do gadget de seguidores do blog, este tutorial foi pedido a um bom tempo, peço desculpas pela demora. Ele parece um cadinho grande mais é bem pequeno é fácil de executar, em cinco minutos você coloca ele em seu blog. Qualquer dúvida é só perguntar, certo? Vocês podem ver o exemplo do tutorial logo abaixo.

Para começar nosso tutorial você tem que ter um gadget de seguidores, caso não tenha siga o mini tutorial abaixo:

*Vá ate Layout >>Adicionar um Gadget>> Então procure pelo Seguidores do blogger. Como mostro na imagem em baixo:

Selecione o Gadget escolhido e depois clique no botão salvar.

1. Agora abra a pagina inicial de seu blog. Abriu? Agora clique no segundo botão do mouse. Assim que clicar vai aparecer uma tipo de aba, procure pela opção Código-fonte, pode aparecer também como Exibir código fonte da pagina, dependendo do navegador que utiliza.

Uma nova janelinha igual um pop-up vai abrir se você estiver no navegador Mozilla se estiver no Chrome vai abrir uma janela em outra aba. Nesta janela ative o atalho de busca é procure por:

Copie do inicio do código até o </script>, veja abaixo um pequeno exemplo:

[...outros códigos...]

locale: 'pt_BR' },

skin);

</script>

Você vai copiar toda essa parte e separa-la em um bloco. Não pude colar todo o código aqui como exemplo, pois é comprido e não adiantaria copiar pois o ID de cada blog é diferente.

2. Agora vá ate seu Layout novamente é adicione um novo gadget de HTML/JAVASCRIPT. Dentro dele cole o código que separou e salve. Após isso abra novamente a pagina inicial de seu blog é veja se entrou um segundo gadget de seguidores e exclua o primeiro gadget de seguidores adicionado, deixando apenas o de código.

3. Abra o gadget de afiliados (o de código fonte) e acima de todo o código cole este:

<div style="position: absolute; margin-top: 0px; left: 4px;"><a href="http://www.blogger.com/follow-blog.g?blogID=NUMERO DE ID DO BLOG" target="_blank"><img src="IMAGEM URL" /></a>
</div>

Coloque uma imagem que cubra toda a largura do botão de altura a largura. Assim terá mais chances de ficar certinho, ou e preferir da largura da sidebar.

Não sabe o número de ID do seu blog? É fácil! Escolha o blog qual quer saber o ID, não importa a pagina que esteja o ID aparece em todas as paginas do blog. Depois de abrir clique na barra de endereço e localize a palavra ID= depois dela terá uma sequencia de numerações, esse é o ID do seu blog. Cada blog que você cria tem seu próprio número de ID exclusivo.