Hello Cherrys Cute!!! Vim hoje com um tutorial (como sempre) bem legal que é o Gadget de Seguidores Personalizada assim como o daqui do Sweet of Cherry. Esse tutorial foi um pedido da Priscila do blog Little Sugary e da Ana Carolina do blog My Sweet Universe.
Vamos ao tutorial!
Primeiro vamos mudar a cor do fundo onde fica o botão Participar deste site.
Vá no seu blog e aperte Ctrl + U (se esse botão Ctrl+U estivar bloqueado não irá funcionar).
Irá Aparecera um código, aperte Ctrl + F e procure por Followers1-wrapper
Abaixo dessa tag terá vários códigos, copie desde <div id='Followers1-wrapper'> até
</script>
</div>
</div>
Copie todo esse código, abra um bloco de notas e cole.
Agora vamos mudar o tamanho as cores e etc... Tudo que se adeque ao seu layout.
skin['FACE_SIZE'] = '17';
skin['HEIGHT'] = "200";
skin['TITLE'] = "Followers";
skin['BORDER_COLOR'] = "#c8d6e0";
skin['ENDCAP_BG_COLOR'] = "#e2e9ee";
skin['ENDCAP_TEXT_COLOR'] = "#c8d6e0";
skin['ENDCAP_LINK_COLOR'] = "#c8d6e0";
skin['ALTERNATE_BG_COLOR'] = "transparent";
No seu com certeza será diferente os números desse código.
Vamos a explicação do código
Então aonde esta
['FACE_SIZE'] = '17'; é o código do tamanho das imagens dos seguidores (as fotinhos do perfil dos seguidores) o meu é 17 você muda pelo tamanho desejado no seu código, mas que seja visível é claro.
Aonde está
skin['TITLE'] = "Followers"; esse é o título do gagdet você muda de acordo com o que preferir.
Aonde está
skin['BORDER_COLOR'] = "#c8d6e0"; esse e o código da borda você troca o #c8d6e0 pela cor desejada ou se não quiser cor coloque tansparent.
Aonde está
skin['ENDCAP_BG_COLOR'] = "#e2e9ee"; esse e o código do fundo que vai ficar aonde tem participar desse site.
Esses são os principais códigos se quiserem editar os outros para ficar de acordo.
Agora que você editou do seu jeito aperte Ctrl + A e copie todo esse código (isso tudo no bloco de notas).
Vá no seu Blogger>> Layout>> Adicionar um gadget>> HTML/JavaScript e cole o código copiado do bloco de notas.
Agora coloque o titulo e salve!
Exclua o gadget de seguidores normal e deixe o personalizado.
Créditos: My Tutorials
VAMOS A 2ª PARTE DO TUTORIAL
Para deixar o gadget com esse efeito girando.
Vá em Modelo>> Editar HTML>> Clique dentro da caixa de HTML e aperte Ctrl+F e procure por:
]]></b:skin>
Cole o seguinte código acima dessa tag:
#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 {
transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
-webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
-moz-transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
-o-transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
-ms-transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
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;
}
Não mude nada apenas Salve!
Pronto era tudo isso,pois o tutorial ficou grande, mas espero que gostem!