05 fevereiro 2014

Tutorial: Personalizar gadget de seguidores


Créditos pelo tutorial: Bunny Crazy

Yoo! Como vão?
Peço desculpas, não posso aparecer mais vezes, nesse momento estou na escola. A partir de hoje os posts sairão sempre ao meio dia, ok? Faz uns dois posts que eu parei de postar depois que escrevo, a maior parte fica agendado, pois eu sempre vou querer mudar algo, e, com isso, ou esqueço de postar ou perco a vontade. Para impedir isso, comecei a agendar as postagens.

Voltando para o assunto do post...

Depois de muito tempo vim trazer para vocês um tutorial, dessa vez que aprendi com o blog Bunny Crazy. No tuto vou ensinar como personalizar a área dos seguidores. Deixar os links maiores ou menores, personalizar links e cores (só não aprendi como mudar o botão do "participar deste site" D=

Let's Go!!

Primeiro, você precisa instalar o gadget seguidores, não se preocupe em fazer qualquer alteração agora, simplesmente instale normalmente. aqui

Pronto, agora clique em qualquer lugar do blog com o botão direito do mouse e vá na opção "Exibir código fonte da pagina" (ou algo assim).

Ok, agora vamos com calma...

Procure por: <div id='Followers1-wrapper'>

Agora copie desde <div alguma coisa wrapper'> até algo como:
     locale: 'pt_BR' },
     skin);
  </script>
Dessa forma:
<div id='Followers1-wrapper'>
[~um código enorme aqui~]
     locale: 'pt_BR' },
     skin);
  </script>
OBS: Não existe código pronto, varia de blog pra blog, ou seja, você precisa pegar o seu código. Ele é enorme e você vai saber quando parar de copiar, só é ficar de olho.

Pronto, agora crie um gadget HTML/JavaScript e cole o código que você conseguiu no seu código fonte. Ah, e já pode excluir o outro gadget.

Agora vamos personalizar, no seu código vai haver algo parecido com isso:

</script>
<div id="div-1ujsr2uf3l1t2" style="width: 100%; "></div>
<script type="text/javascript">
    var skin = {};
    skin['FACE_SIZE'] = '35'; //Tamanho do avatar
    skin['HEIGHT'] = "260";
    skin['TITLE'] = "followers";
    skin['BORDER_COLOR'] = "transparent"; //Cor da borda
    skin['ENDCAP_BG_COLOR'] = "transparent"; //Não mecha
    skin['ENDCAP_TEXT_COLOR'] = "#BEBEBE"; //Cor do texto abaixo do botão azul
    skin['ENDCAP_LINK_COLOR'] = "#FFC0CB"; //Cor do ícone pop-up
    skin['ALTERNATE_BG_COLOR'] = "transparent";
   
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#FFC0CB"; //Cor do "fazer login"
    skin['CONTENT_TEXT_COLOR'] = "#BEBEBE"; // Cor do "já é membro?"
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFC0CB"; //Cor do "fazer login" depois de logado
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#FFC0CB";
    skin['CONTENT_HEADLINE_COLOR'] = "#FFC0CB"; //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"](
    {id: "div-1ujsr2uf3l1t2",
     height: 260,

esse código se alto explica, então é só caprichar na criatividade \o/

Bom, por enquanto é só. Qualquer duvida ou sugestão é só comentar. E espero que tenham gostado!
Até mais!!

Sayo~ ^-^/

Um comentário:

  1. Entendo, eu até sumi um tempo na blogosfera e.e Mas né... Eu tento.
    Adorei o tutorial bem explicadinho, quando eu precisar irei usar

    Kiss
    Aozora Namida

    ResponderExcluir