Maratona de Tutoriais: Personalizando o gadget 'Seguidores'

Quero uma dessas, #Comofaz? Obrigada ao Pink Panic pela imagem lienda! *_*
Hoje não era o dia exato de postar a maratona, mas como o 4 on 4 (falei mais no post anterior) teve de ser adiado para o mês que vem, acabei nem me ligando de postar. Na verdade, tudo estava quase programado para hoje, mas já resolvemos tudo e em fevereiro - na data certinha, teremos o projeto. Bom, ontem a Michelle do COS me fez uma pergunta de como eu coloquei aquela imagem atrás dos números dos seguidores que de um tempo pra cá, estão na cor branca e coincide com a cor do gadget, ou seja, só vemos se passarmos o mouse e mesmo que seja inútil para algumas pessoas, me irritava bastante. O tutorial já é conhecido há algum tempo, basta modificar alguns mínimos códigos que tudo se ajeita. Vamos?

Primeiro, você deve abrir a caixa de busca (aperte F3 ou Ctrl + F) no HTML á procura do termo 'Followers' - Caso você não o encontre (algo que eu acho impossível se você têm o gadget seguidores), pode simplesmente descer ao fim do seu código e aparecerá um mais ou menos como este da imagem: [www] Viu que há dois termos de followers? Então, o primeiro com o número 1 é o que você irá copiar e deixar guardadinho aí. Agora, vá até a tag ]]></b:skin> e antes de fechá-la, coloque o código abaixo:

#Followers1 { 
background: url('url do seu fundo com o espaço para o número do gadget') no-repeat;
}

#Followers1 h2 { background: url('url da sua ribbon para o título do gadget') no-repeat; color: transparent; width: 293px; height: 64px; margin-top: -30px; margin-left: -19px; float:left; }

Ok, você pode não entender nada se não ler minha explicação. 01. Primeiro²: Só use se for personalizar o título também. Você já vai entender o porquê. Onde há 'url do fundo' [...] é onde deverá ser colocada a imagem com o espaço certinho para o número, não há como só colocar o bg que seria o fundo do número, então, você terá que fazer uma imagem mais ou menos como esta (arraste a imagem para cima de algo que não seja branco e verá que ela não é transparente); que seria o background do gadget. 02. Já no 'url da sua ribbon aqui' seria o link da sua faixinha, veja a minha, ela é totalmente diferente dos outros gadgets (você pode fazer isso com qualquer um, não necessariamente só com o dos seguidores!). Prossiga!

Bom, quem ainda ficou meio perdido, vou facilitar a vida de vocês deixando algumas imagens de exemplo ou até para usarem, se servirem, pois variam de cada uma - ou seja, se a que estiver aqui deu no meu, na sua pode não dar, como na de outro e assim por diante. Lembrando que as ribbons são todas do tumblr.


Fiz questão de deixá-las já com o fundo branco (fiz essas baseadas no meu modelo), caso não dê certo, você tira um print do seu gadget seguidores, pega o height x width dela e cria um novo fundo branco - lembre-se de colocar a imagem lado a lado com o fundo e faça uma linha reta só pra ter noção de onde irá por uma imagem comum de outra cor; ou faça como eu, pegue uma ribbon qualquer e ajuste! E aí? :-)

P.S: Não se esqueçam que o tutorial só funciona se for personalizar o título também, não consegui ajustá-la só para posicionar o bg sem mexer nos títulos. Então, escolha uma imagem da sua preferência (pode até ser uma faixinha como a minha) para colocar em vez do título.

Sorry pela seleção nada legível, masss tive que avisar antes que me joguem pedras hahah! O tutorial pode ter ficado um pouco confuso e já sabem se tiverem dúvidas: Perguntem-me através dos próprios comentários ou no twitter - annolivers - tive que mostrar os tweets apenas para seguidores, tinha muita gente que eu nem sei quem é me seguindo (nada legal). Antes, devo muito obrigada a Anny por me mostrar como que se fazia pra por a imagem, a Liah do Cherry Bomb pelo código de personalizar o gadget específico e a mim por está passando o tutorial á vocês! :} Mas falando sério, creditem ás três, não esqueçam que além das imagens, fiz o post {que por sinal ficou meio totalmente great}. Even more, cutests!

51 comentários:

  1. Anna, adorei o tutorial, realmente me irritava bastante isso de ter que passar o mouse para ver os seguidores, com o seu tutorial fica bem mais fácil.

    Beijo,
    www.vitima-fashion.blogspot.com/

    ResponderExcluir
  2. Um pouquinho complicado, mas acho que se prestar a atenção aprendo!
    Hello ! Eu finalmente voltei pro mundo das blogueiras shaushuah, tá afim de dar uma olhada no meu trabalho?
    Aham, é trabalho shaushuahsha
    Te espero lá, XOXO,
    a-procura-do-horizonte.blogspot.com

    ResponderExcluir
  3. Ah! Eu tinha visto no seu gadget de seguidores, achei super diferente, há poucos tutoriais para personalizar os seguidores!
    Super diferente, adorei!
    Sonhos de Mel
    -M

    ResponderExcluir
  4. Ai adorei o tutorial, eu sempre fico irritado toda vez que entro e tento selecionar aquele gadget.
    Adorei o tutorial, vai ser hiper útil

    BANGTEEN.BLOGSPOT.COM

    ResponderExcluir
  5. Não conhecia, fica lindo *o*
    Cat Girl

    ResponderExcluir
  6. adorei o tutorial anna *-*
    eu ia perguntar pra você também, mas acabei esquecendo kk
    beijos :3

    ResponderExcluir
  7. mano o tutorial ta muito bem explicadinho, obrigada mesmooooo!

    acervo-de-livros.blogspot.com

    ResponderExcluir
  8. Amei o tutorial.Assim fica bem mais bonito,do que o padrão *-*
    Beijos >.< Good Lollipop

    ResponderExcluir
  9. Ameei o tuto Anninha! ^^ Me ajudou muito, estava querendo saber há um tempo! E é super fácil! Quem sabe, não uso no próximo lay? rs =)

    Beijinhos, Paula! ♥
    ~Sweet Makeup~
    (clica no perfil pra visitar meu blog)

    ResponderExcluir
  10. Gosteiii muiiiito do tutu
    Facil , pratico e lindo .

    http://blog-meninasmalucas.blogspot.com.br/

    ResponderExcluir
  11. Oi Annna amei o tuto muito lindo no proximo layout eu pego o codico :3
    Ps:Você naum me respondeu dizendo se eu ia poder participar da equipe do 4on4 se ja tiver completa eu to te convidando da que eu vou fazer acho que vai ser 6on6...
    http://bonecadeetiqueta.blogspot.com.br/

    ResponderExcluir
  12. Anna, gostei muito do tutorial, você é fera nos códigos, hahaha!

    Beijos,
    www.deliriosdegarota.com

    ResponderExcluir
  13. Ótimo tuto, realmente irrita quando fica todo branco e só da para ver se passar o mouse. Só não faço esse tuto porque minha letra já é cinza.
    Beijos ♥
    Sim Senhorita (Clique aqui ou no perfil)
    @anaazista

    ResponderExcluir
  14. Não conhecia esse tutorial, mas o efeito é lindo. Gostei de ver, você está ficando ótimos com os códigos, queria ter essa habilidade também. O resultado fica lindo, gostei muito! Um beijo, Luly.
    the-zombie-attack.blogspot.com

    ResponderExcluir
  15. O efeito fica lindo!! Vou usar no meu proximo lay com certeza.
    Adoreiiii o blog e estou seguindo.
    xoxo,
    www.theattitudeincluded.blogspot.com.br

    ResponderExcluir
  16. Gostei do tutorial, fica lindo. Vou tentar lá no blog, da proxima vez que fizer um layout (espero eu demore u.u euhhee)
    @awnste
    http://www.senhoritaliberdade.com/

    ResponderExcluir
  17. Bem legal o tutorial flor, não tinha pensado em personalizar o gadget desse jeito :) De nada e obrigada por me citar ^~^
    Sei que tô atrasada, mas feliz ano novo para você linda! Esse layout de fim de ano tá tãaaao lindo!
    kissus
    cherry-liah.blogspot.com

    ResponderExcluir
  18. fica lindo *WWWWW* vou tentar fazer qualquer dia desses *salva nos favoritos
    http://risosshi.blogspot.com.br

    ResponderExcluir
  19. Muito bom esse tutorial!

    www.garotadeestilo.tk

    ResponderExcluir
  20. Que top! Eu morria e não sabia que podia colocar isso o.O Tô apaixonada por esse layout, não muda não Anna!
    Beijinhos linda ♥

    www.blogmeninama.com.br

    ResponderExcluir
  21. Fica lindo *-*

    mundodasgarotasforever.blogspot.com.br

    ResponderExcluir
  22. Parece que fica bem interessante mesmo *0*
    Seu layout tá perfeito, inspirado em PLL né? rs'
    Princesa de Jeans

    ResponderExcluir
  23. Oi Anna! Adorei seu cometário, aliás adoro seus comentários *-* Vim responder ao seu pedido. No começo pensei em como exclusividade minha, uma marca, sei lá, mas achei super egoísta da minha parte, pq não compartilhar o conhecimento? Foi ai que pensei em fazer um post com o tutorial, mas ai eu pensei, para eu chegar nesse resultado, fui testando, personalizando e é um tutorial um pouco complexo e que pode dar erro, e como não sou nenhuma expert em html, não saberia responder as dúvidas das pessoas e decidi que quem me perguntaria eu daria o link do site onde eu achei o tutorial, recomendo que teste primeiro em um blog de teste até ficar do jeito que vc quer, para depois se quiser usar em seu blog!
    http://www.candylland.net/2012/03/candy-posts-lado-lado.html
    Acho que já conhece o candylland, se não, vai adorar, tem tutos super diferentes. Espero que consiga, desculpa por não poder ajudar mais e ter sido chata demais (sei lá) falando isso tudo. Ahh! Se quiser pode apagar o comentário, só foi pra ti explicar mesmo ^^ Espero que consiga!
    -M

    ResponderExcluir
  24. Já tinha visto esse tutorial em algum lugar , mas nem tinha parado para prestar a atenção. Gostei dele , deixa o layout um pouco diferente e fica bem bonito .

    Beijos,
    modicesdemenina.blogspot.com

    ResponderExcluir
  25. Adorei o tutorial, muito útil :) babei no seu layout haha muito lindo.

    www.teenlist.blogspot.com

    ResponderExcluir
  26. Gostei do tutorial bem feito ,
    já uso um parecido no meu blog e acho que fica lindo ,várias blogueiras devem usa-los
    rsrs



    visita?se gostar segue
    w w w . supercaprichada . c o m . b r

    ResponderExcluir
  27. -Oooi lindona , tudo bem com você ? AAAAAAAAAAAAAAAAAAAAAAA amei o tutorial !
    Super amei seu blog hein , muuito , muuito , muuito lindo , parabéns por tanta belezura haha >.<
    muito cute esse espaço , amei mesmo de coração anjinha , estou super seguindo , pois sera uma honra ter seu blog na minha página inicial
    um grande beijoo ♥

    Lorhannyschneider|blogspot.com.br
    ( Troque a barrinha | pelo pontinho . ou clica no perfil <--- )

    ResponderExcluir
  28. Adoro tutoriais assim, fácil e super útil!
    Obrigada pelo comentário lindo no meu blog, já sigo aqui.

    Beijos!
    Com Qual Estilo

    ResponderExcluir
  29. Oi Anna! Respondendo as suas perguntas, eu sou Potterhead sim, E SE VOCÊ QUISER IR PARA LONDRES COMIGO, TÔ TE ESPERANDO! hahahah Já segui de volta no Twitter.

    Beijo,
    www.vitima-fashion.blogspot.com/

    ResponderExcluir
  30. PLL LOVERS! *U*
    Amei seu lay, s2
    Quanto aos tutos, amei, bem fáceis e úteis! :}


    http://cappuccinoeaconta.blogspot.com.br
    Faz uma visita?
    @PriscilaFrr

    ResponderExcluir
  31. Adorei o tutorial! Vou fazer no próximo lay *3*
    Tinha ficado curiosa sobre como se fazia desde que vi esse background nos seguidores daqui, hahaha ><
    Beijocas!

    PiinkCookie.blogspot.com

    ResponderExcluir
  32. Adorei o tutorial *-*
    http://www.paaradateen.com

    ResponderExcluir
  33. Adorei o seu tutorial! Muito útil.
    O layout daqui é lindo!
    Beijos

    cocacolaecupcake.blogspot.com.br

    ResponderExcluir
  34. Adorei o tuto e vou testar no prox. lay do blog!
    Aqui está lindo, amei <3

    Beijos
    www.comoumrefugio.com

    ResponderExcluir
  35. Adorei demais esse tuto, qualquer dia eu uso ele :D
    vou deixar até salvo aqui :D
    bjinhos
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
  36. Hey Anna. Tudo certo, meu amore? Espero que sim! Adorei o tutorial, achei bem interessante porque as vezes, as pessoas que não são da blogosfera entram no blog e veem que não está escrito o número de seguidores porque sempre tem que selecionar e daí se a gente fala que tem tal número, eles não acreditam! Já aconteceu isso 2 vezes comigo, hora de mudar, né não? Deixei o link do tutorial salvo aqui, porque vou mudar de layout no fim da semana e nem vale a pena por agora, mas vou mandar por e-mail para a menina na qual encomendei o meu layout e pedir para que ela ponha para mim. Afinal, tenho uma preguiça imeeeensa de mexer com html, hahaha. Super beijo, Fernanda.

    www.meianoiteequinze.com

    ResponderExcluir
  37. Ainda to tentando entender o que significa 'passar o mouse pra ver' mas sou meio aloprada, deixa quieto IUBADHASDIUAHDIUSADHIUADHIUAH o que entendi, ficou no Aprovado Pro Next Lay. APNL. Mas que dá preguiça de ver códigos na frente, dá IUSHIDSHDIUSA tanto que parece que meu cérebro foi castrado quando vejo blogs que parece que deram muito trabalho. Tipo o seu e o cherry bomb. IUADHSIUDHASIUH
    Beijos ♥

    Conspirantes

    ResponderExcluir
  38. Respondi seu comentário lá no post mesmo, mas vou copiar aqui para garantir que você veja:

    Obrigada pelo seu comentário gigante rs! Adoro quando as pessoas interagem nas postagens ^^
    Comecei a fazer quimica no cabelo no começo do ano passado, e até agora o maior problema tem sido mesmo a queda de cabelo e algumas pontinhas duplas que aparecem se eu ficar uma semana sem hidratar. Mas ainda bem que o meu cabelo também cresce bastante e eu tenho MUITO cabelo, então cabelo é o que não falta rsrs
    Nunca usei Tresmé (ô nomezinho estranho e.e) mas já vi muita gente elogiando, acho que vou testar quando acabar o que estou usando ^^ Minha cabeleireira que indicou essa linha da amend pra mim e fiquei muito satisfeita com os resultados.
    Obrigada pelos elogios ^^ Realmente não posso dizer que meu cabelo era feio, mas sei lá, sempre achei que liso iria combinar mais comigo e facilitar minha vida, e realmente facilitou. Meu cabelo era horrível pra chapinha. Eu fazia e uma hora depois já tava ondulando, era triste -.-

    É sempre muito bom te ver lá no CB! Kissus

    ResponderExcluir
  39. Amei seu blog, e o tutu mais ainda! ;)
    vISITA MEU BLOG E, SE GOSTAR, SEGUE?
    http://mundinhomagicodagaby.blogspot.com
    bjs

    ResponderExcluir
  40. caramba já disse que amo seu blog?ele é maravilhoso!
    por mim você não deveria trocar o layout nunca, e se trocasse poxa, seria maravilhoso, seus layouts ão lindos!, maie o tutorial!

    aah, querida, vim avisar que está tendo um jogo lá no meu blog, participa? ficaria feliz, nesse link:

    adolescentenerd (.blogspot.com.br/2012/12/joguinho-valendo-divulgacao.html)

    ResponderExcluir
  41. Cada dia fico mais apaixonada pelo seu blog! Você é tipo a rainha do HTML, eu não consigo ser assim, tenho uma certa indiferença com o HTML, rs. Você poderia me ajudar? Queria passar a data pra te baixo do título da postagem, tá entendendo o que eu to falando? :s Qualquer coisa fala comigo no Twitter (@ThamiRamalho) ou por e-mail (thaamiris@limao.com.br), por favor. To caçando ajuda de um bando de gente mas ninguém tá disponível para me ajudar.

    Beijos!
    www.likeparadise.com.br

    ResponderExcluir
  42. Anna sua linda! Nem sei como agradecer todo esse carinho que você tem com o EPC e comigo. Você deixou 2 comentários gingantes lá e eu amei, fico tão feliz que leio seus comentários mais de uma vez. Demorei pra vir responder os seus comentários, mas foi porque dei uma viajada nesse Réveillon e fiquei um pouco ocupada depois, enfim, explicações lá no blog, haha. Eu te mandei solicitação lá no Facebook (te achei por meio da Nathália, do MTF) e quando a gente conversar por lá te passo outras redes sociais que eu tenho, coloquei os links até lá no EPC, mas adianto que excluí o meu twitter. Então adorei o tutorial, no meu blog o nome que indica a quantidade de seguidores é na cor preta, então não tenho problemas. Mas, bom saber como personalizar, quando precisar já sei onde procurar! :)

    ResponderExcluir
    Respostas
    1. Então Anna, esqueci de falar uma coisinha, eu excluí o meu twitter justamente, porque tinha muito gente estranha (bota estranha nisso) me seguindo lá, então fiquei bem desconfortável.

      Ana || explosaodecerejas.blogspot.com

      Excluir
  43. Nossa você leva jeito com tutoriais, continue fazendo!

    http://fazdecontatxt.blogspot.com.br

    ResponderExcluir
  44. Ei Little Liar gatona, obrigada pela visita e pelo comentário mais uma vez ♥ Sabe que eu amo sua presença lá no blog, né?

    Beijos Anna <3
    www.deliriosdegarota.com

    ResponderExcluir
  45. Adorei o tuturial =D muito bem feito ^^
    adorei o blog, seguindo =D

    http://inspirationsbymeforyou.blogspot.pt/2013/01/virgindade.html

    Bjocas fofa =D

    ResponderExcluir
  46. Adorei o tutorial! Coloquei na lista de "tutoriais pra quando eu deixar de preguiça e ir fazer um layout decente pro AG" HSAUHSUAHSUAHSAU
    Cara, você é a única pessoa que me faz ler o tutorial todo, mesmo quando não vou usar na hora. Você escreve tudo super bem :B

    Beijo,
    www.ahasagata.blogspot.com

    ResponderExcluir
  47. Adorei o tuto, da um toque especial no gadget *-*

    garotadifferente.blogspot.com

    ResponderExcluir
  48. gosteeei! to tentando por no meu hahaha
    beijos da LAri <3
    www.callmelari.com

    ResponderExcluir
  49. Gostaria de saber como troco aquele botão do Gadget Participar deste site ?
    Procuro em vários blogs e não acho nem pelo google.
    beijos

    ResponderExcluir

Muito obrigada por expressar a sua opinião! ;)
O Chez Anna é um blog totalmente averso à comentários ofensivos e preconceituosos. Não se esqueça das boas maneiras que a mamaim ensinou, tá? Educação gera educação! Vem espalhar amor com a gente! < 3

{more: fan page | twitter | tumblr}

Postagens populares