25/11/2013

Seguidores personalizados no blog


Yo bunnies, como estão? Nossa amei essa ilustração! Hoje passei por mais uma daquelas confusões por causa do meu tamanho e hoje fui ao Zoológico. Por isso demorei para vir postar  hoje, mas sem mais delongas vamos ao tutorial de hoje? Irei mostrar como personalizar os seguidores. Eu não me lembro a onde eu havia aprendido isso na época, mas vou creditar ao Cherry Bomb pelo código de efeitos.

*Antes de começar o tutorial vocês poderiam fazer uma visita nesse blog: MSMW ele ainda é novinho ficaria muito grata se dessem uma força visitando e comentando. Desde já obrigada a todos que visitarem. <3 Agora sim vamos a postagem!

1. 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.

2. Abra a pagina inicial de seu blog. Após abrir a pagina inicial nela clique no segundo botão do mouse. Assim que clicar vai aparecer uma tipo de aba e você clica em Código-fonte, pode aparecer também como Exibir código fonte da pagina.


3. 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:

Códigos
<div id='Followers1-wrapper'>

Copie toda a área do código ele é por irei mostrar mais ou menos abaixo:

<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 que se encontra lá não adianta copiar aqui porque reduzi o tamanho apenas para ter uma ideia de onde começa é termina.

4. Agora vá ate seu Layout novamente é adicione um novo gadget de HTML/JAVASCRIPT. Dentro dele cole o código que pegou no código de fonte e salve. Após isso abra novamente a pagina inicial de seu blog é veja se entrou um segundo gadget de seguidores. Não haverá diferença nem uma entre eles mas você pode personaliza-los de cor ate algum efeito sutil depois.



Personalização+Explicação:

5. Para personalizar as cores dele procure por esse trechinho dentro do gadget. Coloquei explicando como o que é cada parte pelo menos as mais principais para personalizar.

    skin['FACE_SIZE'] = '32';  - Tamanho dos avatares
    skin['HEIGHT'] = "260";
    skin['TITLE'] = "Seguidores";
    skin['BORDER_COLOR'] = "transparent"; - Cor de borda
    skin['ENDCAP_BG_COLOR'] = "transparent"; - Não mecha
    skin['ENDCAP_TEXT_COLOR'] = "#666666"; - Cor do texto abaixo do botão azul
    skin['ENDCAP_LINK_COLOR'] = "#538cd6"; - Cor do ícone pop-up
    skin['ALTERNATE_BG_COLOR'] = "transparent";
   
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#538cd6"; - Cor do "Fazer login"
    skin['CONTENT_TEXT_COLOR'] = "#666666"; - Cor do "Já é um membro?"
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#538cd6"; - Cor do "Fazer login" após logado
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000000";
    skin['CONTENT_HEADLINE_COLOR'] = "#000000"; - Cor da palavra "Membros"
    skin['FONT_FACE'] = "normal normal 13px \x27Trebuchet MS\x27,Trebuchet,sans-serif"; -Fonte e tamanho
    google.friendconnect.container.setParentUrl("/");
    google.friendconnect.container["renderMembersGadget"](


 Efeito nos seguidores:

6. Você pode colocar várias coisas nos seguidores mas, só vou mostrar como colocar dois efeitos. Opacidade é preto e branco acho que fica bem legal e combina com qualquer layout. Para isso vá dentro do HTML do blog é cole:

Efeito Opacidade:
#Followers1-wrapper {
opacity: 0.2; -webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease; -o-transition: all 2s ease;
transition: all 2s ease; opacity: 1;
-webkit-transition-duration: .90s;
transition-duration: .90s;
margin-bottom: 2px;
}

Efeito preto e branco:
#Followers1-wrapper {
text-decoration: none !important;
-webkit-filter: grayscale(100%);
-webkit-transition-duration: .90s;
margin-bottom: 2px;
}
#Followers1-wrapper:hover {
text-decoration: none !important;
-webkit-filter: grayscale(0%);
-webkit-transition-duration: .90s;
margin-bottom: 2px;
}

Efeito Sépia:
    #Followers1-wrapper {
    text-decoration: none !important;
   -webkit-filter: sepia(100%);
    transition:All 1s ease;
    -webkit-transition:All 1s ease;
   -moz-transition:All 1s ease;
   -o-transition:All 1s ease;
    margin-bottom: 2px;
    }
    #Followers1-wrapper:hover {
    text-decoration: none !important;
   -webkit-filter: sepia(0%);
   transition:All 0.4s ease;
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
   -o-transition:All 1s ease;
    margin-bottom: 2px;
    }

Um detalhe é que esses efeitos não vão funcionar no seguidores padrão do blog, apenas no que colocamos. Porque o padrão é Followers1 já o em código é Followers1-wrapper. Então para funcionar nos seguidores padrão é só remover o -wrapper. Com esse tutorial você pode não só personaliza-lo como também colocar os seguidores no cabeçalho do blog.  Então é só isso por hoje ate mais tarde pessoal.

73 comentários:

  1. O meu gorjete de seguidores parou de funcionar, mas coloquei um bem lindo (:
    -> Simplificando &Always Dreeam

    ResponderExcluir
    Respostas
    1. Puxa Le que ruim... isso já aconteceu comigo mas é fácil de consertar só acaba com todo layout do blog. Mas que bom que consegui colocar um bem lindo! Mas caso esteja interessada em saber o que aconteceu com o gadget padrão é isso: Quando trocamos muito de layouts pode parecer que não mas ainda fica restinho dos anteriores, tanto que as vezes quando colocamos aparece as vezes gadget de um layout anterior ao que estamos removendo, não sei o nome que se da para isso mas é quando ocorre erros no blog. Para isso você precisa criar um novo blog limpinho que nunca tenha sido usado escolha qualquer template do blogger, então copie todo o código do HTML dele é cole no seu blog com erro e salve. Não adianta fazer backup do template antes de fazer a limpeza pós ele terá os erros que queremos nos livrar. Depois de salvo bye bye erros então é só colocar um novo layout. :3

      Excluir
    2. Crédo, ainda bem que isso nunca aconteceu comigo o_O" e espero que nunca aconteça, mas já aconteceu de repetir postagem. Sempre que eu postava repetia a mesma, não sei porque, deletei o blog e criei outro porque eu não usava muito ele de qualquer maneira rs.

      www.elegantment.blogspot.com.br

      Excluir
  2. Caraca... Eu tinha visto este tutorial em VÁRIOS blogs e não foi tão bem explicado quanto foi aqui...
    Parabéns, você tem um bom dom para explicar as coisas <3

    ResponderExcluir
    Respostas
    1. Muito obrigada Hari >3< Que bom que ficou bem explicadinho.

      Excluir
  3. Bom tuto, acho que irei usar o do P&B ><

    htmlandresources.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Faz sim tenho certeza que ficara muito lindo!!!! Obrigada por comentar.

      Excluir
  4. Eu sempre via esse efeito em vários blogs, quer dizer, ainda vejo, mas sempre me questionava como fazer. Adorei o tutorial!

    ~abrações~
    http://vegas--skies.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Hihi entendo olhando assim realmente parece difícil fazer e compreender. Mas ate que é bem fácil e rápido de fazer. Mas obrigada por comentar e gostar do tutorial. <3

      Excluir
  5. Sua diva, obrigada pelo tutorial! ♥ Estava pensando em como certos blogs conseguem personalizar e já procurei tudo que possas imaginar no google e não consegui achar, UAHUSAH' Adorei os efeitos, de verdade e não é que é fácil, fácil? q.

    Confusões por causa do teu tamanho? O que houve? Olha, se és baixinha sejas grata por isso, melhor do que ser altona igual à mim :c

    Um grande beijo,

    Juu-Chan || Nescau com Nutella

    ResponderExcluir
    Respostas
    1. Obrigada Juu-chan. >///< Na época eu também vivia rodando e procurando por esse tutorial havia achado um mas nem explicava direito o que fez eu ficar perdidinha...mas com o tempo fui mexendo e entendendo sozinha. Mas que bom que consegui entender é achar fácil. Hihi também amo esses efeitos dão um charminho muito legal.

      Hhushasuhasu Sim fui pegar uma mercadoria no mercado e estava no alto não tinha ninguém por perto para pedir pra pegar, dai de um pulinho pra pegar e caiu tudo em cima de mim kkkkkkk Eu tenho 1,55 de altura então vamos fazer um seguinte você me da alguns centímetros assim equilibrara o nosso tamanho. Beijinhos linda. <3

      Excluir
  6. Adorei o tutorial^^

    Counting Feelings | counting-feelings.blogspot.com.br

    ResponderExcluir
  7. Adorei o tutorial de personalizar os
    seguidores, mas parece que dar um trabalho...
    quem sabe quando a coragem bater eu tente colocar lá
    no BSMP -HSHHAUHHA.
    Abraços!

    ~> barbieseumundopink.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Hshaushas Yo Babi só parece não é nada trabalhoso. Eu fiz ele em 10 minutos e ainda tirando print e editando, mas espero que faça um dia. :3 Ficara muito bonito! Beijinhos linda.

      Excluir
  8. Adorei o tuto, vou tirar um dia pra personalizar *u* pq sou meio lerda pra essas coisas ~

    www.whatnae.com ♡

    ResponderExcluir
    Respostas
    1. Obrigada, hihi entendo bem faz sim ficara muito bonito.

      Excluir
  9. Anônimo25/11/13

    Hyeeeeeeeeee W-chan!!!!1 Tá muito kawaii o blog meus deuses *33333* É uma coisa com vários efeitos, mas que fica super simples e maravilhoso, amo de montão seu blog!!!!!1
    Mas enfim... tenho uma TAG pra você aqui, se não quiser fazer não precisa:
    http://aozoraao.blogspot.com.br/2013/10/tag-vida-com-gifs.html

    ~Kissus do aozora

    ResponderExcluir
    Respostas
    1. :3 Obrigada Ly, fico feliz que tenha gostado e que goste do blog. Hihi serio de verdade fico muito alegre por isso, a Roh me ajudou na realização desse layout. :3 Assim obrigada para mim não ah problema em responder, em breve irei fazer. ^^

      Excluir
  10. Hahaha eu estou na fotinho dos seguidores :D
    Gostei do tutorial.

    ResponderExcluir
    Respostas
    1. xD Verdade esta sim! Obrigada por gostar e comentar Sunny saudades de você fofa.

      Excluir
  11. Muito divo, os efeitos!! Obrigada mesmo por isso

    http://s2mysecretsmyworld.blogspot.com.br/

    ResponderExcluir
  12. Nossa , amei amei amei amei , nunca personalizei os seguidores com opacidade , deve dicar muito divo , testarei algum dia !!! ⊙ω⊙
    2bjs Bibs from Pandarise

    ResponderExcluir
    Respostas
    1. Que bom que amou. *3* Fica sim pelo menos eu acho que fica. Por chamar atenção mais gente segue xD pelo menos me contaram isso uma vez. Mas testa sim espero que goste.

      Excluir
  13. Mulher, fico um tempo sem entrar no teu blog e tu faz essa mudança radical? Amei o lay *-* A Hyuna é linda e as cores combinaram muito com ela.
    Faz tanto tempo que eu não vou no zoológico, mas depois dessa sua história de vida certeza que eu irei, acho que eu ficaria com muito medo de dar comida para uma girafa, vai que ela se anima e come minha mão '-'
    Eu te amo, sem mais... Já vi esse tuto em tanto lugar, mas nunca consigo fazer T.T Porém agora eu consegui porque tu explicou direitinho. Ele é muito útil e deixa o gadget de seguidores mais bonitinho.

    Lost November // Beijos da Ju

    ResponderExcluir
    Respostas
    1. Hihi Juuu que saudades!!!!!! T.T Porque você sumiu...mas é um prazer reava-la por aqui. Sim eu fiz esse lay com ajuda da Roh estava com o tempo meio curto e não conseguiria fazer tudo sozinha, também achei que as cores combinaram muito com ela. Apesar de mim não ser chegada a rosa gostei muito dos tons usados.

      Hushaushasu eu fiquei com muito medo admito, ainda mas quando ela lambeu nossa deu um arrepio na espinha kkkkkk mas acho que foi sinal de agradecimento.
      >//////////< Nyaaa obrigada fico muito feliz por isso. Eu também tinha essa dificuldade na verdade só achei em um único blog, mas nem explicava direito o que me deixo perdidinha. Então com o tempo fui mexendo e tendendo melhor, então coloquei o que sei. Mas que bom que consegui executar realmente fica bem mais bonito os seguidores personalizados. :3

      Beijinhos Ju ♥

      Excluir
  14. Adorei , fica muito mais bonito personalizado ! Rçrç
    Beijos
    meninachicmc.blogspot.com

    ResponderExcluir
  15. Ah bom saber..gostei muito do personalizado kk' :3
    bjs,loveforhtml.blogspot.com.br(visita?)

    ResponderExcluir
    Respostas
    1. Yo Lai! Hihi que bom, fica muito mais bonito assim.

      Excluir
  16. olá queria saber como vocês fazem isso? http://imm.io/1kVRN deixa o fundo com outra cor?
    Aguardo resposta

    ResponderExcluir
    Respostas
    1. Yo Pri não consegui entender muito bem, você esta pergunto do fundo da postagem ou do blockquote a onde esta os códigos?

      Excluir
  17. Nossa, amei o tuto, acho que vou usar <33

    xoxo || Lovers Of Html ♥

    ResponderExcluir
    Respostas
    1. :3 Obrigada espero que use. Beijinhos fofa~

      Excluir
  18. Que ilustração perfeita *u*
    Muito bom o tutorial, não conhecia esse jeito de personalizar os seguidores Haha' :|
    Aqui, você quer ser minha afiliada, vi que tem algumas vagas ali e queria saber se você me aceita, aceita? (Vergonha Haha' :P)

    D-Resources

    ResponderExcluir
    Respostas
    1. Obrigada Luis :3
      Hehe que bom que pode conhecer aqui. <3 Aceito sim.
      Hihi não precisa ter vergonha, mas aviso lá em seu blog.

      Excluir
  19. vi varios blogs usando o efeito opacidade.....axo super lagal....vou usar no proximo lay vai ficara linndo : )..obrigada pelo tuto

    LP-HTML || bjos >..<
    Louca por HTML

    ResponderExcluir
    Respostas
    1. Uhum ultimamente estão usando bastante. Acho o efeito super lindinho também. Usa sim tenho certeza que vai ficar muito fofo. Não foi nada linda.

      Excluir
  20. OMG QUE TUTO PERFEITO , PRECISAVA
    candytendy.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada linda, fico feliz por ajudar. <3

      Excluir
  21. Depois de personalizado, fica muito fofo :3
    Peach Cream

    ResponderExcluir
    Respostas
    1. Uhum, verdade fica sim. Pena que não coloquei uma imagem mostrando como fica personalizado. Mas obrigada por comentar.

      Excluir
  22. Anônimo27/11/13

    Você não foi a única a amar a ilustração hueheu' eei por que confusões por causa do seu tamanho? Muito alta ou muito baixinha? Awn que fofa dando comidinha pras girafas, a girafa deve ter gostado de ti <3 (quem não gosta leva soco u-u)
    Eu sempre quis usar este efeito, agora você postou *o* é muito lindo ^^

    Beijos || Panther Pink and Blue

    ResponderExcluir
    Respostas
    1. Yo Belly!!!! Hihi que bom que não fui a única. Hushasuh confusões por ser muito baixinha (1,55) fui no mercado e o produto tava no alto, não tinha a quem pedir porque o setor tava vazio nisso dei um pulo para pegar e caiu tudo em cima de mim. kkkk Bom que não quebro nada mas a vergonha me deixo em caquinhos hsuasha Espero que sim *3* porque achei ela uma gracinha. Mas afirmo que fiquei com medo o treinador ainda fico rindo da minha cara. Hihi bem espero que use no seu próximo layout ficara uma gracinha!

      Excluir
  23. Oii me ajuda amiga como vc adicionou um dominio personalizado ? Paga ?

    ResponderExcluir
    Respostas
    1. Yo Carolina ajudo sim. Eu paguei pelo meu e fiz um tutorial explicando como colocar.
      Ele é pago anualmente mas vai do site que você ira comprar o domínio eu comprei pelo uol host.

      Excluir
  24. Amei o tutorial, eu procurava ele mas nunca achava...
    Obrigada pela ajuda :)
    Beijos,
    http://mundoda-rachel.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Yo Rachel!!!! Não foi por nada linda, fico feliz em ajudar. Verdade é difícil achar esse tutorial ate tem em alguns blogs mas não assim tudo junto faziam por parte tipo "seguidores no cabeçalho" "efeito nos seguidores" "como personalizar os seguidores", eu achei melhor postar tudo :3

      Excluir
  25. Adprei o tuto, porem nunca consegui (que vergonha, rsrs)
    Behos~
    Castle Madness | Simply Thonn

    ResponderExcluir
    Respostas
    1. Obigada Maou, hihi tudo bem não precisa ter vergonha. Mas espero que agora consiga fazer. *3*

      Excluir
  26. amei o tuto <3
    vou usar no meu novo lay
    http://hearttutoriais.blogspot.com.br/

    ResponderExcluir
  27. Oiie, tudo bem? Amei o Tutorial, poreem, eu não estou conseguindo fazer =(
    Acho que estou fazendo algo de errado, pois não esta dando certo... =/
    Pode me ajudar? :D

    ResponderExcluir
    Respostas
    1. Estou sim e você? Espero que bem e obrigada por perguntar. Puxa é mesmo? Mas qual erro esta ocorrendo? Ajudo sim.

      Excluir
  28. Oiee! o meu deu certo mesmo eu usando o seguidores padrão do blog!!..uhuuu!
    Muito obrigado vc's tem me ajudado muito! ≧◠◡◠≦

    ResponderExcluir
    Respostas
    1. Ah que booooom *3*
      Hihi fico feliz por isso.

      Excluir
  29. Muito obrigada pelo tutorial todo explicadinho,adorei Wendy ^3^

    ResponderExcluir
  30. haa eu sou a OwlKnight do blog funtom company <3

    ResponderExcluir
  31. Anônimo14/8/14

    Achei esse tuto em vários blogs mas em nenhum deles estava tão bem explicado, só agora consegui. Muito obrigada! ♥♥♥

    ResponderExcluir
  32. Nossa que perfeito Wendy, já personalizei o meu, você é demais <3

    ResponderExcluir
  33. Adorei ! obrigado .
    www.EaiAprovou.blogspot.com

    ResponderExcluir
  34. Anônimo19/5/15

    Quero igual o seu, só que em lilás e roxo :'(

    ResponderExcluir
    Respostas
    1. Oi more, o meu o mudei o tamanho das imagens e coloquei um botao e so seguir esse tutorial aqui para por o botao.http://webunny.blogspot.com/2015/02/13-maratona-css-botao-do-gadget-de.html

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345