TUTORIAL: PERSONALIZAR O GADGET DE SEGUIDORES #1 + EFEITOS
















Hey minha gente, não sou baiana, passei quase uma semana sem postar mas eu acho que vai ser assim daqui em diante, ter posts mais ou menos de cinco em cinco dias, porque quando faço muitos posts um atrás do outro, o post que fica pra traz recebe menos comentários, visualizações ou coisa assim, e já que o blog ainda é pequeno decidi fazer menos posts quando ele crescer com certeza vou mudar, mas por enquanto vai ser assim. E uma pequena notícia: eu voltei á postar no Creative Perfect, você pode não conhecer ele então vou dar uma resumida, eu postava nele e os posts se resumia em apenas tutoriais, dai decidi recomeçar aqui do GDF e deixei o blog lá com os tutoriais, mas um belo dia não sei o que me deu na cabeça e decidi voltar a postar lá, então postarei lá e aqui, e acho que com este intervalo de tempo entre os posts não vai me atrapalhar. Enfim, este texto tá grande e não gosto de textos grandes, então, vamos ao tutorial!

1° Acesse o seu blog e aperte CTRL + U irá abrir uma nova guia com o código do seu blog, agora aperte CTRL + F e procure por Followers1-wrapper'>. Agora copie desde <div id='Followers1-wrapper'> até </script> </div> </div>, se não conseguir achar, fica em cima de <div class='clear'></div>.

2° Apague o gadget de seguidores, logo depois vá em Layout > Adicionar um Gadget > HTML/JavaScript e cole o código que copiou.

Invés de eu explicar uma por uma decidi colocar o que modifica cada parte para facilitar vocês que não entendem muito de html conseguirem personalizar facilmente, então é só personalizar as seguintes partes do seu código:
OBS: o que eu não coloquei o significado é porque eu realmente não sei.
SKIN['FACE_SIZE'] = '17'; /* Tamanho dos avatares dos seguidores */
SKIN['HEIGHT'] = "200"; /* Altura do Gadget */
SKIN['TITLE'] = "SEGUIDORES"; /* Título do Gadget */
SKIN['BORDER_COLOR'] = "transparent"; /* Cor da Borda - Se quiser colocar cor troque TRANSPARENT por #cor */
SKIN['ENDCAP_BG_COLOR'] = "#F5F5F5"; /* Cor de fundo do PARTICIPAR DESTE SITE */
SKIN['ENDCAP_TEXT_COLOR'] = "#FFC49E"; /* Cor do texto */
SKIN['ENDCAP_LINK_COLOR'] = "#FFC49E"; /* Cor dos 2 quadradinhos no canto direito */
SKIN['ALTERNATE_BG_COLOR'] = "TRANSPARENT";
SKIN['CONTENT_BG_COLOR'] = "TRASNSPARENT"; /* Cor de fundo na parte dos avatares - pra colocar cor troque TRANSPARENT por #cor */
SKIN['CONTENT_LINK_COLOR'] = "#FFC49E"; /* Cor dos Links */
SKIN['CONTENT_TEXT_COLOR'] = "#FF7981"; /* Cor do GOOGLE FRIEND CONNECT */
SKIN['CONTENT_SECONDARY_LINK_COLOR'] = "#FFC49E";
SKIN['CONTENT_SECONDARY_TEXT_COLOR'] = "#FFCD8B";
SKIN['CONTENT_HEADLINE_COLOR'] = "#FFCD8B"; /* Cor do MEMBROS */
SKIN['FONT_FACE'] = "NORMAL NORMAL 13PX \X27TREBUCHET MS\X27,TREBUCHET,SANS-SERIF"; /* Fontes e tamanho das fontes do gadget */
3° Agora para colocar o efeito, abaixo do que você colocou no gadget cole o código do efeito que desejar. Se você não personalizou o seu gadget e usar o normal do blogger, é só colar o código acima de ]]><

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

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

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

11 comentários

  1. Oii linda você deixou um recadinho em meu blog informando que o lay free estava dando erro na hora de instalar, mas eu já testei duas vezes e esta tudo certinho, acho que você não esta abrindo arquivo baixado como bloco de notas, se não for assim os códigos não irão servir.. beijos..

    http://apenassonhosdreams.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. No blog que eu estava tentando colocar realmente deu erro, só que eu criei um novo e consegui colocar, acho que o problema deve ser no blog e não no layout ;/ sorry.

      Excluir
  2. Oi! Adorei o tutorial, os efeitos devem ficar lindos mesmo, principalmente o preto e branco! Acho que vou usar ele no próximo layout. E sobre você postar de cinco em cinco dias, é um intervalo bem grande, mas eu gostei da ideia :3 Beijão!
    coff-cake.blogspot.com

    ResponderExcluir
    Respostas
    1. Eu acho super legal o efeito, tanto que eu uso em dois layouts haha. Pois é, acho que vai ser assim daqui por diante, mas espero mudar mais á frente. Obrigada!

      Excluir
  3. Adorei o efeito :333
    Os posts do meu blog estão bem desatualizados, mas é por falta de tempo mesmo pois os estudos estão consumindo tudo!
    http://mlleglamour.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Muito diwo u-u
      Pois é, até agora os estudos não estão muito puxados mas semana que vem tem provas então, vai começar a pesar também ;/

      Excluir
  4. Vou visitar seu outro blog *-*
    Achei bem legal esse tuto,mas ue não usaria...n sei porque mas n faz meu estilo,sabe?
    Queria pedir um post com alguns efeitos pra elite de afiliados ou algumas imagens para welcome! Se fazer os dois é ainda melhor hahahahaha
    Beijos!

    Garota Lezada

    ResponderExcluir
    Respostas
    1. Awn, obrigada >.<'
      Sei haha, cada um tem seu estilo!
      Eu já fiz um post sobre efeitos para elite de afiliados, se quiser ver ele clique aqui, mas eu só coloquei 2 efeitos então já que pediu vou fazer outro posts com mais efeitos okay? Quanto as imagens de welcome vou pesquisar e vou fazer um post também haha.

      Kisses.

      Excluir
  5. Fica muito mais bonito o gadget seguidores personalizado colocar de um jeito que combine com o blog
    aceita afiliados?
    Monster Cookies

    ResponderExcluir
    Respostas
    1. Pois é :3
      Claro que aceito, já te coloquei na elite! Beijos.

      Excluir
  6. Aashauhsua adorei o tuto :3 <3 eu acho que vou colocar um desses efeitos <3
    http://thing-of-kawaii.blogspot.com/

    ResponderExcluir

Regras:

• Pode xingar, mas não ofenda ninguém.
• Não fale mal de qualquer pessoa ou artista, respeite.
• Pode deixar o link do seu blog no comentário, mas comentários de divulgação serão automaticamente apagados.
• Não é obrigatório, mas aconselho a ler o post antes de comentar.