Personalizar o "Participar do site" e Gadget dos seguidores personalizado

 

Oi pessoal! Tudo bem? Bem hoje vou ensinar como colocar o Botão Participe Deste Site dos seguidores.


1º  Passo vai em Layout 

2º Passo Add um gadget  

3º Passo clique em HTML/JavaScript 

4º Passo copiar esse código em baixo  Em HTML/Java Script Dentro do espaço em branco 

O titulo você coloca o que quiser a abaixo do titulo você coloca esse código 

<div style="left: 8px;margin-top: 3px;position: absolute;"><a href="" onclick="window.open('https://www.blogger.com/follow-blog.g?blogID=IDDOSEUBLOG','Janela','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=1020,height=650,left=25,top=25'); return false;"><img src='IMAGEM SUBSTITUTA'/></a></div>

5º Como colocar o blogID=IDDOSEUBLOG : você vai copiar o seu Código não o meu okei 

6º Passo pra colocar a imagem IMAGEM SUBSTITUTA :

Entre nesse blog aqui havingcherry  e coloque a imagem que quiser 

Personalizar o Gadgets dos seguidores

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.

Esse código abaixo dessa imagem  você clica no botão direito do mouse clique em exibir código de fonte da pagina e depois da um  CTRL+ F evai aparecer isso na 2 imagem e procure por seguidores e copie o código do começo

<script type="text/javascript">
	if (!window.google || !google.friendconnect) { ate fim locale: 'pt_BR' }, skin); </script>  e depois so copiar esse codigo no html/javascript onde você colocou em a 4º passo dentro do html/javascript pronto..

   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;
    }

Créditos deste blog que eu peguei  havingcherry e bunnycrazy  bjus