Dicas, truques, tutoriais, reviews, promoções e informação

terça-feira, 7 de agosto de 2012

Widget SexyBookmarks no Blogger

A pedidos, no post de hoje ensinarei a colocar o widget Sexy Bookmarks, fornecido pelo serviço gratuito Shareaholic, para que o leitor possa compartilhar seus artigos nas redes sociais de forma mais interessante.

sexy-bookmark-blogger-2012

barra-compartilhamento-animada-blogger

Para conferir uma DEMO, acesse este link. Clique em qualquer post e dirija-se até o final dele.

1º Passo


1. Acesse esta página: http://www.shareaholic.com/publishers/sharing/sexybookmarks

2. Ao lado esquerdo, selecione a plataforma Website. Por que Website e não Blogger? O único motivo de escolhermos esta plataforma, é a praticidade que ela nos oferece para escolhermos os botões que quisermos. Se você selecionar Blogger, ficará limitado a botões pré-definidos pelo serviço, não podendo escolher os botões de sua preferência.

shareaholic-gadget-blogger

3. Observe agora que, à direita, os botões estão à sua disposição. Tudo o que você precisa fazer é arrastar o botão que deseja do campo inferior para o campo superior (responsável pela formação final do widget).

barra-botoes-de-redes-sociais-blogger

Para remover um botão do campo de cima, faça exatamente o contrário.

4. Depois de escolher e posicionar seus botões, clique no botão Get buttons (parte superior direita da página).

como-colocar-sexy-botões-blogger

5. Na próxima tela, o site vai ter gerado um código HTML e um botão para baixar o código CSS do widget. Usaremos ambos os códigos. Portanto, salve o código HTML e clique no botão Get Media Resources (o arquivo virá como shareaholic_sexybookmarks.zip).

botões-sexy-redes-sociais-blogger

2º Passo


1. Extraia os arquivos da pasta shareaholic_sexybookmarks.zip. Você verá dois arquivos: sprite.css (código CSS) e sprite.png (imagem).

2. A imagem você deverá hospedar em um serviço de compartilhamento de imagens, como Imgur, ImageShack, TinyPic ou qualquer outro de sua preferência, e pegar o link dela.

3. O arquivo CSS você deverá abrir no Bloco de Notas do seu computador (Iniciar > Todos os programas > Acessórios > Bloco de Notas) para que o código seja exibido.

4. Entre no Blogger e faça login em sua conta. Clique em Modelo > Editar HTML. Marque a opção "Expandir modelos de widgets"

colocar-shareaholic-blogger-2012

sexy-bookmark-blogspot

5. Pressione as teclas Ctrl + F e procure pela tag ]]></b:skin>. ANTES (acima) dessa tag, cole o código CSS que você abriu no Bloco de Notas.

6. Procure então por <div class='post-footer'>. Logo DEPOIS (abaixo) desse código, cole o código HTML que você copiou na página do Shareaholic.

OBS: Desse jeito, o widget ficará posicionado no final de cada artigo. Mas você pode colocá-lo na parte que achar mais conveniente.

7. Agora muita atenção! Dentro do código HTML, encontre a parte destacada em vermelho no trecho abaixo.

var SHRSB_Settings = {"shr_class":{"src":"<b><span style="color: red;">{Place_Path_Here}</span></b>"

See the Pen %= penName %> by matttttttttt (@marcelost) on CodePen



8. Substitua o {Place_Path_Here} pelo link da imagem que você hospedou anteriormente. Exemplo:

var SHRSB_Settings = {"shr_class":{"src":"http://i.imgur.com/imagem.png"

9. Salve o template e confira o resultado.

16 comentários:

  1. Eu jah sabia deste html
    Marcelo vc poderia ensinar css para a galera???
    Sei o css mais nao domino ele minha area mesmo e o html e design da computação.
    Obrigadoo
    Pensei que o blog tinha parado mais ele ta com tudo!!!!

    ResponderExcluir
    Respostas
    1. Fala Felipe!

      Então amigo, eu optei por não publicar tutoriais sobre programação no blog, pelo menos por enquanto, por se tratar de um assunto extremamente complexo e que exige um conteúdo contínuo acerca do mesmo. Embora eu seja web designer (nas horas vagas, pois trabalho com TI), e completamente apaixonado por Javascript, CSS, C++ e PHP, pretendo postar artigos relacionados a estes assuntos mais futuramente.

      Estipulei essa "regra" pelo simples motivo de querer criar um material bem didático e simples, em vez de postar algo que deixará as pessoas confusas. Mas pode ter certeza que, em breve, iniciarei uma série deste assunto aqui.

      Grande abraço e obrigado pelo comentário!

      Excluir
  2. Opa!!! Eu que agradeço, eu tenho um blog ao qual nao vou divulgar pois vi as regras aqui e vi que e proibido.
    Eu gostaria futuramente alguns gadgets html legais ok???
    Eu entro aqui todos os dias.
    Queria um Tutorial com dicas para divulgacao de blogs.
    Ps: Obrigado quase todos blogs que eu vou sobre tutoriais eu espero 2 semanas para ter resposta e aqui tem um administrador atento.
    Obrigado
    Continue assim :-)

    ResponderExcluir
  3. Felipe, pode postar o link do seu blog sem problemas. O que eu não publico são comentários com propagandas e spams, de forma invasiva e inconveniente. O que não é o seu caso.

    Quanto a dicas para a divulgação de blogs, escrevi um artigo sobre isso há um tempo, o qual ainda está em plena utilidade. Se quiser conferir:

    http://www.seututorial.com/2010/11/aprenda-divulgar-o-seu-blog.html

    Abraços e obrigado!

    ResponderExcluir
  4. Obrigado pelo post Marcelo. Deu certinho no meu blog =)
    Um abraço
    Lúcio

    ResponderExcluir
  5. Então Marcelo meu blog é este
    http://gsmcorby.blogspot.com
    Sei que está faltando alguma coisinha mais eu não sei tipo um gadget.
    Algumas dicas por favor

    ResponderExcluir
  6. Olá Marcelo.
    Fiz o passo a passo e não consegui o resultado.
    Você pode me ajudar?

    Obrigada.
    Luciana

    ResponderExcluir
  7. Valeu Marcelo. Esse foi o melhor tutorial que encontrei na net.
    Funfou perfeitinho em meu site.

    ResponderExcluir
  8. Olá Marcelo, como vai?

    Nem te conto que durante meses eu procurei um tutorial que ensinasse a fazer isso e nunca encontrei algum que fosse claro ou que funcionasse!
    Sempre quis colocar esta barra em meu blog, pois adoro o visual dela!
    Seu passo a passo está super simples, objetivo e fácil de entender, vou me arriscar e experimentar em meu blog de testes para ver se dá certo :)
    Obrigadíssimo por compartilhar conosco!

    Grande abraço e boa semana !

    ResponderExcluir
    Respostas
    1. Olá amiga Samanta,

      Que prazer em receber sua visita e comentário. Como vai?
      Pois é, eu também adoro esse widget da Shareaholic. Acho diferente e intuitivo. Procurei fazer um tutorial diferente, deixando a mercê do usuário escolher os botões de sua preferência. Acredito que deixe o usuário mais à vontade.

      Espero que dê certo com você. E, por favor, qualquer problema ou dúvida não hesite em me dizer.

      Muito obrigado pela sua prestigiada visita e comentário.
      Um grande abraço e uma maravilhosa semana, Sammy!
      Tudo de bom!

      Excluir
  9. A dica é sensacional. Mas por algum motivo estranho, quando seleciono a plataforma, a página de customização do widget fica em brando. oO

    ResponderExcluir
    Respostas
    1. Olá,

      Experimente outro navegador para ver se ocorrerá o mesmo.

      Excluir
  10. Muito bom cara.
    Funcionou direitinho nos meus 2 blogs =))
    Vlwwww

    ResponderExcluir
  11. Marcelo, Obrigado pela dicas. NOTA DEZ!

    ResponderExcluir