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.
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.
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).
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).
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).
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"
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.
Artigo escrito por Marcelo
Sou formado em Sistemas de Informação pela UFMG e pós-graduado em Segurança da Informação. Trabalho com TI há mais de 5 anos e sou professor particular de inglês. Nas horas bem vagas costumo arranhar uma guitarra e sou fã do bom e eterno rock'n'roll.
Receba as atualizações automaticamente
Eu jah sabia deste html
ResponderExcluirMarcelo 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!!!!
Fala Felipe!
ExcluirEntã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!
Opa!!! Eu que agradeço, eu tenho um blog ao qual nao vou divulgar pois vi as regras aqui e vi que e proibido.
ResponderExcluirEu 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 :-)
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.
ResponderExcluirQuanto 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!
Obrigado pelo post Marcelo. Deu certinho no meu blog =)
ResponderExcluirUm abraço
Lúcio
Então Marcelo meu blog é este
ResponderExcluirhttp://gsmcorby.blogspot.com
Sei que está faltando alguma coisinha mais eu não sei tipo um gadget.
Algumas dicas por favor
E obrigado por ajudar amigo!!!
ResponderExcluirOlá Marcelo.
ResponderExcluirFiz o passo a passo e não consegui o resultado.
Você pode me ajudar?
Obrigada.
Luciana
Olá,
ExcluirComo posso ajudá-la?
Valeu Marcelo. Esse foi o melhor tutorial que encontrei na net.
ResponderExcluirFunfou perfeitinho em meu site.
Olá Marcelo, como vai?
ResponderExcluirNem 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 !
Olá amiga Samanta,
ExcluirQue 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!
A dica é sensacional. Mas por algum motivo estranho, quando seleciono a plataforma, a página de customização do widget fica em brando. oO
ResponderExcluirOlá,
ExcluirExperimente outro navegador para ver se ocorrerá o mesmo.
Muito bom cara.
ResponderExcluirFuncionou direitinho nos meus 2 blogs =))
Vlwwww
Marcelo, Obrigado pela dicas. NOTA DEZ!
ResponderExcluir