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.