10/02/2015

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:

<div id='followers1-wrapper'>

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

<div id='Followers1-wrapper'>
<div style='margin-right:2px;'>
<script type="text/javascript">
[...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.

Imagem obtida na web/ Candy LLand


Agora é só salvar! Fiz algumas imagens para vocês utilizarem para fazer o tutorial. 

Modelo 1



Os modelos não ficaram bonitos é mais para usarem como exemplo ao utilizarem o tutorial. É só isso beijinhos lindos!

22 comentários:

  1. Eu estou ótimo kk, adorei o tutorial nunca tinha visto um tutorial ensinando como personalizar o '' seguidores '' desse modo, obrigado <3.

    ResponderExcluir
  2. Estava desesperada por esse tutorial, eu acho ele perfeito, o gadget padrão é muito feinho, já salvei em meus favoritos >3<
    Espero ansiosamente pelo layout novo, adoro lays simples!

    ♥ Abraços |  www.h-oneypie.com

    ResponderExcluir
  3. O tutorial ficou ótimo, tudo bem explicadinho e fácil, como eu gosto haha
    || Diamonds On Galaxy ||

    ResponderExcluir
  4. Ooh, já conhecia esse tutorial <3 eu acho o padrão do blogger muito feio, não gosto muito dessa cor azul dele. Eu sempre uso esse tutorial.
    Os modelos ficaram perfeitos Wendy, eu irei baixar o 2 modelo depois >u<
    Parabéns pelas postagens, beijos.

    ResponderExcluir
  5. Esse tuto é mega útil *u* sem contar que é tão lindo <333
    Beeijos!
    - Alguns Rabiscos

    ResponderExcluir
  6. Lembra quando deu aqueles bug nos seguidores do blogger? eu tentei colocar com esse botão e aparecendo os seguidores mas não consegui, sério, só dava erro e eu só conseguia deixar o botão. Eu adorei o tuto, esses modelos são muuito fofo e se combinasse com meu lay eu usaria com certeza, irei até favoritar, tudo muito bem explicado.

    Beijos ❤
    www.p-perfectsthings.com | Quietly Pink

    ResponderExcluir
    Respostas
    1. Lembro sim! Foi muito ruim, néh? Era uma luta. rs Obrigada por gostar e favoritar.

      Excluir
  7. adoreiii o tuto, fica muito bonito >.< muito melhor do que o original, acho ele muito "feinho"
    adoreii seu lay, tá de parabéns seu blog tá LINDO!!
    Dá uma passadinha no meu blog? e se gostar segue? já estou seguindo seu cantinho :)
    aceita afiliação tbm flor?
    kissus u3u
    http://girlzofunicornland.blogspot.com.br

    ResponderExcluir
  8. Eu resolvi substituir de vez esse seguidores por aquele botão único (que tenho quase certeza de ter achado por aqui ou a partir daqui) então... arigatou!
    Also... esses botõezinhos são mesmo muito fofos >oo<
    Finalmente essa área feiosa ta começando a ficar bonitinha~
    meu sonho poder personaliza-la por completo <3

    Nee... Ta rolando uma mega comemoração de aniversário do meu blog, com awards, sorteio e concursos e muitos prêmios! Sinta-se a vontade pra vir festejar comigo!
    kissu kissu

    My Dear...

    ResponderExcluir
  9. Nossa que simples... eu devia ter pensado nisso kkkk eu estava louca para fazer isso uma vez no meu blog acabou que nem deu T.T mass thanks pelo tutorial !

    ResponderExcluir
  10. lay novo :3 sério?
    AMEI O TUTORIAL , perfeito, HIPER ÚTIL. mas eu prefiro deixar a sidebar dos seguidores normais mesmo xoxo ~

    http://euamotutoriais.blogspot.com.br/

    ResponderExcluir
  11. nice post. I love your blog.


    Hi! would you like to follow each other? If you follow me, please let me know.
    I will follow you back for sure. thank you so much! =D

    TOM AND TINS

    ResponderExcluir
    Respostas
    1. Thank you for liking my blog.

      Excluir
  12. Adorei o tutorial. Pena que não encontrei antes. E amei seu blog *-*Encontrei ele hoje. Seguindo.

    Lobotomizar | bloglobotomizar.blogspot.com

    ResponderExcluir
  13. Olá :)
    Obrigada pelo tutorial :)
    Mas já fiz tudo quatro vezes e aparece o botão e opção "seguir blog", mas não aparecem as fotos dos seguidores :(
    Não sei o que estou a fazer mal, pois segui os passos tudo certinho.

    ResponderExcluir
    Respostas
    1. Oi linda! Essa que é a tenção do tutorial, fazer a caixinha tomar menos espaço ficando somente o botão. Também tem como deixar com os vatares (fotinhos) mas é outro tutorial que ainda vou trazer aqui para o blog.

      Excluir
  14. por favor me ajuda o meu fica dando corrija erros este formulário

    ResponderExcluir
    Respostas
    1. Se o blog estiver no privado fica como erro nos formulários, assim que abrir ele aparece

      Excluir
  15. Tutorial ótimo. Seu blog é lindo! Estou Iniciando na blogosfera. Segue meu blog?
    e-raquel.blogspot.com.br

    Desde já agradeço.

    ResponderExcluir
    Respostas
    1. Obrigada por gostar. Farei uma visita se eu gostar sigo sim =3

      Excluir