Personalizando a gadget de seguidores

Ps: Esse tutorial eu peguei do Bunny crazy pois foi o unico que  que consegui colocar no blog e eu acho que ele é o mais certo de todos.

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:

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