Icones para redes socais no Blogger

Icones para redes socais no Blogger

6 10 99
Icones para redes socais no Blogger 10 6 99
Que tal colocar pequenos ícones no seu template para facilitar o envio dos seus posts para as redes sociais e para os favoritos ( bookmarks )?

Assim como  no Dicas Blogger:

bookmarks

É relativamente fácil...Vamos lá?

Entre no HTML do seu template e cole dentro do CSS o seguinte codigo:


/* -----   Bookmarking  ----- */
.book {
margin-top:5px;
        background:#fdfdfd;
        padding:2px 2px 2px 2px;
        border:1px solid #f0f0f0;
}
.rsociales ul {
display:inline;
margin:0pt !important;
padding:0pt !important;
}
.rsociales li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px;
}
.rsociales img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt;
}
.rsociales-sobre {
opacity:0.4;
}
.rsociales-sobre:hover {
opacity:1;
}

Eu optei por colar após o trecho "Posts"

/* -----   Posts   ----- */          
      (todo o código)
/* -----   Bookmarking  ----- */

Depois clique em "expandir modelos de widgets".

Procure por esta linha:
<p class='post-footer-line post-footer-line-3'/>
Cole então o seguinte código, logo abaixo :
<div align='left'><div class='book'>
<div class='rsociales'>
<span class='blogk'>
<ul>
<li><a expr:href='data:post.emailPostUrl'
target='_blank' title='Enviar por Email'><img
class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://del.icio.us/post?url=&quot; +
data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Incluir no
del.icio.us'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot;
+ data:post.url' target='_blank' title='Incluir no
Digg'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://dihitt.com.br?botao=enviar&amp;url=&quot;
+ data:post.url + &quot;&amp;titulo=&quot; +
data:post.title' target='_blank' title='Incluir no
diHITT'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://www.linkk.com.br/submit.php?url=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Incluir no
LinkK'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://rec6.via6.com/link.php?url=&quot;
+ data:post.url + &quot;&amp;titulo=&quot; +
data:post.title' target='_blank' title='Incluir no
Rec6'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://ueba.com.br/NovoLink?url=&quot;
+ data:post.url + &quot;&amp;titulo=&quot; +
data:post.title' target='_blank' title='Incluir no
Uêba'><img
class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
href='http://feeds.feedburner.com/dicasblogger/'><img
alt='Assinar feed' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
<li><a
expr:href='&quot;http://www.technorati.com/faves?add=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank'><img alt='Agregar a
Technorati' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
<li><a
expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank'><img alt='Agregar a
Google' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
<li><a
expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank'><img alt='Agregar a
Yahoo!' class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank'><img alt='Agregar a
Blogmarks' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
</ul>
</span>
</div>
</div>
</div>

Para cada ícone, você deverá linkar a imagem correspondente, hospedando-a no seu site de preferência.
Substitua em cada linha http://IMAGEM.gif pelo link de sua imagem .

Já disponibilizei os ícones para  DOWNLOAD.

Exemplo:
<li><a
expr:href='&quot;http://dihitt.com.br?botao=enviar&amp;url=&quot;
+ data:post.url + &quot;&amp;titulo=&quot; +
data:post.title' target='_blank' title='Incluir no
diHITT'><img class='rsociales-sobre'
src='http://i257.photobucket.com/albums/hh221/jusardinha/dihitt.png'/></a></li>
<li><a

Lembre-se de alterar o link do feed do Dicas Blogger pelo do seu blog:

<li><a
href='http://feeds.feedburner.com/dicasblogger/'><img
alt='Assinar feed' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
<li><a


E mais um template, saindo do forno, no final de semana.

46 Comments
Comments
  1. Oi Juliana, eu estava editando o seu template Blogger Tips, e estava até pensando em adicionar esses botões de bookmarks. Obrigado pelo tutorial, vou usar em meu novo template.
    Depois você passa lá para ver o resultado.

    ResponderExcluir
  2. esse sistema exatamente como está implantado com os efeitos e tal é lindo demais!

    ResponderExcluir
  3. Se eu te falar que ja recebi uns tres emails de pessoas me pedindo isso??
    Como vou alterar o template eu apenas guardei a dica para depois.
    Iara

    ResponderExcluir
  4. Legal, Matheus!!!
    Ficou lindão o seu blog!
    Bjs

    ResponderExcluir
  5. Iara, divulgue no seu blog. Sinta-se à vontade.
    Hoje à noite vou publicar o novo template, mas não sei se vc vai gostar...ele é bastante sóbrio, mas a cor é a sua favorita,verde.
    Gostei tanto dele que pretendo customizá-lo para o Dicas Blogger.
    Pelo que pude ver seus leitores gostam do seu tema atual, né?
    Abraços

    ResponderExcluir
  6. Seu blog deveria ser declarado de utilidade pública na web....
    Parabéns tem me ajudado muito. vou implantar esse sistema em breve.

    ResponderExcluir
  7. Legal. Os botões que tenho foi feito tudo no manual, sem mexer muito em linhas de códigos, que para mim é terrível! :o)

    Mas Juliana, como é que você coloca os códigos num tutorial sem que o blogger os interprete, isto é, quero fazer um tutorial, mas os códigos em scripts que escrevo somem no post.

    Beijos!!!

    ResponderExcluir
  8. Obrigada, Renato!!!

    Cidão: um post prá você!

    Abraços

    ResponderExcluir
  9. Puxa, Valeu Ju,
    Fazia tempo que queria colocar estes botões nos meus blogs, mas tinha preguicinhaa...
    Seu tutorial está fácil e prático!
    Amanhã vou colocar em prática!
    Bjks,

    ResponderExcluir
  10. Consegui colocar....
    apanhei um pouco. O código estava conflitando com o meu sistema de artigos relacionados, mas depois de analisar melhor o meu código percebi que poderia colocar abaixo do códdigo de texto expoansível.
    Valeu

    ResponderExcluir
  11. Gostei do tutorial...
    Pra quem está começando agora está bemmmm explicadinho... Só estou apanhando para alinhar, está ficando muito espalhado... Tem algum recurso pra isso ??
    Obrigado.

    ResponderExcluir
  12. =[
    Tentei, tentei, mas não consegui... continua espalhado. Se puder me dar uma ajudinha ficarei muito grato..
    Forte Abraço...

    ResponderExcluir
  13. Olá amigo! Tudo OK!?

    Olha, implantei o hack em um blog de testes aqui que tem o mesmo template do meu blog oficial!
    Só que os ícones apareceram na vertical! Dá uma olhada:
    http://canalconcursos.blogspot.com/

    fiz tudo direitinho como você falou!
    Não sei qual o problema!
    O que devo fazer?

    ResponderExcluir
  14. Olá amigo, implantei este hack em um blog de testes que tem o mesmo template do meu oficial...
    ficou tudo certinho, porém os ícones ficaram na vertical:
    http://canalconcursos.blogspot.com/
    O que deve ter acontecido!?

    ResponderExcluir
  15. Valeu pela dica.
    Se alguem estive com preguiça e achar que é um trabalhão, tem um site que faz isso por voce. Basta se cadastrar, o site é http://www.addthis.com/.

    ResponderExcluir
  16. Hey! o meu lay nao tem o tal do footer-line! entao é possivel acessar http://www.iuha.blogspot.com e me dizer depois de que eu posso implementar o passo2 ?

    ResponderExcluir
  17. tenho grandes problemas ao adicionar o bookmarking jah que nao encontro a tag post footer jah que nao existe em meu template, se puder me dizer onde por o 2°passo agradeceria muito :>

    ResponderExcluir
  18. Oi Juliana...
    Parabéns pelo seu blog antes de mais nada, pode ter certeza que ele me ajudará muito para cada vez melhorar meu blog.
    Obrigado por essa dica "Icones para redes socais no Blogger", deu tudo certinho.
    Abraço,
    Rubio.

    ResponderExcluir
  19. Oi Srta. Sardinha, pelo que pôde perceber nessa dica não tem o bookmark do "Blogblogs", talvez tenha esquecido ou não sei o motivo por não ter colocado. Então, com umas pesquisinhas consegui o do Blogblogs. Não consegui compartilhar aqui diz que a Tag não é permitida, tentei mudar e diz que o endereço http... não é permitido também. Qualquer coisa te mando por e-mail, ou para alguém que quiser é só pedir.

    E como que faz para deixar uma moldura semelhante ao seu? Lá como Links para postagem; Marcadores; Postado por Juliana Sardinha e tantos comentários.

    Obrigado.

    ResponderExcluir
  20. Muito Bom!

    Sou meio "tosco" ao lidar com as templates, mas consegui. Acho que ficou razoável lá no "Boa Piadas".

    Há alguma diferença de procedimento para incluir o Twitter?

    ResponderExcluir
  21. Como eu troco aquelas setinhas do meu menu e coloco icones ???

    ResponderExcluir
  22. OLá Juliana, funcionou perfeitamente no meu blog. Uma pergunta apenas. É preciso cadastrar-se nesses bookmarks. Por exemplo, no Rec6.
    Abraço e gostei da matéria sobre o apagão da Telefônica. Não sofri dessa vez, mas já fiquei um bom tempo sem conexão por incompetência deles.

    ResponderExcluir
  23. no blog green não acho essa parte pra editar o feed

    http://www.vnsteste1.blogspot.com

    ResponderExcluir
  24. Postei sua matéria no meu blog do jeito que ela está (com todos os links), inclusive com uma referencia a sua url no fim do post.
    Não sei se basta apenas isso, se eu tiver feito algo errado deixa um comentário lá que eu retiro o post imediatamente.
    Abraços.

    ResponderExcluir
  25. faltou um detalhe..
    na opçao E-mail voce tem que deixar marcado nas configuraçoes dos posts
    Mostrar links Enviar esta postagem

    ResponderExcluir
  26. Essa dica é muito boa Juliana, já implementei no meu blog e funcionoi direitinho.

    Agora os leitore podem divulgar nas ferramentas que acharem melhor, rec6, dihITT e etc..

    Super dica!

    Abçs!

    ResponderExcluir
  27. Ola Amigo

    Por que quando puz os icones esta com um simbolo > na frente de cada um.....o que pode ser

    Olha lá no meu blog www.mp3discografias.com

    ResponderExcluir
  28. Juliana brigaduuuuuuuuuuuuuuuuu. Tava procurando por isso há 3 dias, ou melhor, explicadinho nos seus miiiiiiiiiinimos detalhes só vc mesmo!!! sucessso!!!

    ResponderExcluir
  29. Oi. Eu tentei colocar (Icones para redes socais no Blogger), como você explicou; só que os icons ficaram todos na vertical.
    Dá pra me explicar como meter assim na horizontal como tem aqui no seu blog?

    Desde já, muito obrigado.

    ResponderExcluir
  30. Olá Juliana sardinha! Conheci seu blog através da minha esposa e já incrementei hoje no meu blog, os ícones rede sociais! =)

    Só que os ícones 2, 3 e 4 eu mudei no meu (só a ordem deles).

    Ah, e não sei se você percebeu, mas dos seus 12 ícones, os últimos 5 não aparece o comentário deles, mesmo você tendo colocado.

    Aí eu percebi que o comentário dos 7 primeiros está dentro do link e dos 5 últimos dentro do IMG, aí eu tirei o comentário desses 5 do IMG e pus no link. Aí agora no meu o comentário dos 12 está aparecendo =)

    Ah! Estou usando um template seu também!

    Abraços! Lander Costa

    ResponderExcluir
  31. Aê Juliana, sensacional seu código de Bookmarks, peguei para usar e dei uma implementada em mais alguns, se quiseres publicar o código completo me manda uma mensagem no "2 Pã0zinho",
    Obrigado

    ResponderExcluir
  32. Po valeu pelo tuto ficou turbinado e meu blog
    I2071td.blogspot.com

    ResponderExcluir
  33. Como eu Abro o CSS do blog?
    Ajude por favor

    ResponderExcluir
  34. Naum comsegui. A partir de qual modelo vc crio o seu?

    ResponderExcluir
  35. Olá Juliana, Parabens pelo seu blog sempre com excelente dicas.
    Eu queria saber onde eu posso colocar o 1º codigo ? porque no meu template não tem
    o
    /* ----- Posts ----- */
    (todo o código)
    /* ----- Bookmarking ----- */

    Agradeço se puder me ajuda !

    ResponderExcluir
  36. Juliana, valeu pela dica. Vi muitos tutoriais por aí com dicas cheias de coisinhas pra cá e pra lá e que , pelo menos comigo, deram errado. O seu foi "batata". Segui, deu certo e ponto final. Falta apenas mexer naquilo que uma das pessoas acima falou. A legenda do ícone não aparece em todos. Beijo e fica com Deus!

    P.s.: será possível colocar um ícone para favoritar no blogblogs?

    ResponderExcluir
  37. Olá, Juliana!
    estou a criar um blog e escolhi o seu template writer, contudo, não sei onde colocar os códigos. Não encontro o
    /* ----- Posts ----- */

    Agradeço a sua ajuda!
    Abraço,
    Melo

    ResponderExcluir
  38. Juliana,

    mais uma DB que emplacou GG!
    Grato.

    ResponderExcluir
  39. Não achei a linha p class

    ResponderExcluir
  40. boa noite ju, estava pensando em colocar a opção share nos meus posts, e hoje até coloqueicom o addthis, mas tenho visto que muitos que a usavam não usam mais, você tem idéia de pq isto tem acontecido? obrigada!

    ResponderExcluir
  41. Teu blog é nota 10 mas esse tipo de menu de ícones eu já procurei em vários blogs, achei uns mas todos complicados. Esse teu eu fiz um teste mas ele ficou entre postagens. Gostaria de fixar o menu de ícones na parte superior. Um dia ainda vou conseguir!

    ResponderExcluir
  42. Já o tradutor "Widget by Dicas Blogger" funcionou legal. Vou colocar em meus blogs!
    Parabéns! Nota 10!

    ResponderExcluir
  43. Olá Juliana!

    Como faço para inserir botões para atalhos de redes sociais no sidebar?

    ResponderExcluir

ATENÇÃO: Caso esteja com dificuldades com seu blog, abra um tópico no Fórum de Ajuda do Blogger que nós iremos te ajudar a resolver.


Os comentários passam por um sistema de moderação. Não serão aprovados os comentários:
- não relacionados ao tema do post;
- com pedidos de parceria;
- com propagandas (spam);
- com link para divulgar seu blog;
- com palavrões ou ofensas a pessoas e marcas;

 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top