Oi gente!! Depois de muito tempo resolvi dar continuidade a séries de posts sobre blogosfera. Dessa vez é sobre algo bem diferente do que já postei aqui, já digo que não tenho nenhuma experiência com html mas me arrisco muito a tentar e amo demais tudo relacionado a esse mundo de códigos. Não sei vocês chegaram a perceber, mas mudamos algumas coisinhas aqui no blog e em breve vamos mudar mais um pouquinho. Uma coisa que estávamos sentindo falta aqui no blog era os botões de compartilhamento. Descobri que esses botões são essenciais e fazem falta demais nos posts.
Estou sempre testando vários códigos que encontro na internet, alguns dão certo outros não. Mas esse trago para vocês hoje deu super certo. O modelo base é da Renata Massa, mas eu editei do meu jeito e gostei bastante do resultado. Espero que gostem e podem editar de acordo com o gosto de vocês também.
Vá em TEMA, depois EDITAR HTML. Dentro da caixa de códigos aperte CTRL+F e pesquise por: <div class='post-footer-line post-footer-line-2'>
Irá aparecer dois códigos desse, você vai usar o 2º. Embaixo dele cole esse código:
<span class='compartilhamento'><img alt='' class='compartilhe-amor' height='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpfnUvt0HACPuhPaPgr_GwHE2YlyQlxpXMTkICBgbj9PqoRZtUAO_f66egrcfIc7fyzvHirr7QlAiEe2lF9cC1rpee_WBal1RRSvmP_EKX7EWcTyY0kBP9alheN0EzUweQMS2tE64t6J4/s1600/tranparente+pequena.png' width='0'/>
<!-- share buttons -->
<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQdYmln_FKhsovDygaQqCrlf5fDzU80vUE-zMvS8n9caGS5H9JTG2gjNUR3bZc3r-Klyx6rt0NlIwfSmMgTLqf8YX40nCKRZRAw3ybhZEFR_-6BdJMa8iHn2J2gwK3EpxnJX2tnuqqvWA/s1600/facebook.png' title='Facebook'/></a>
<a expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP-2E4lyX5flFByKG601CKLa9dnwNdAiee46WCE6GyNEt1ROgOldwATIT4opRqYFHkUhmKFXTTqXLfRwjZDYDX6b52KBpQQ4bGs3VGT68pS0Vx-gdyUBQEMv5nri-OX3VNEsMOPpmmw10/s1600/twitter.png' title='Twitter'/></a>
<a expr:href='"https://br.pinterest.com/share?url=" + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKGB-hQ7VNy-lJOLhSUqeNqWICNv3YwAI_5JfuLG4RVqXnxPSnrn2IUe8l7UN5ZtMbpGPcVJ-L0BALgu5oHeoSg9rNkIMWuAkqT8XwMhTPCnF4_F8qxEca4REdr7-M17aix4RqpjcNJaM/s1600/pinterest-logo.png' title='Pinterest'/></a>
<a expr:href='"http://www.tumblr.com//share?url=" + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_1jgYbDBFT9lVE0SAcFosjrzJm7oHW3NU58hUNBleqX_OoDv7xStLXyP-1EMheE0WnVqSWldgXLEr_aZ3AZarNiogdNqDG77tjyw1tjrbiZJ54DRrBoGBfFhWEhTXPyiwSEEsp2gp49o/s1600/tumblr-letter-logo.png' title='Tumblr'/></a>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi02I6od1gUr5kByAsqI3StYpD8TOciwP0GOMBvLk3q88srvACk44ddnx6I7YekbHKTeKpEKYN6n8byzBV9viMWj7G9k15z2Yd_gTWxQ5ahBJ0hSuKcCWQZ6XUVPfkmY0jYjKxDP7HQM_U/s1600/google-plus.png' title='G+'/></a>
<a expr:href='"whatsapp://send?text=" + data:post.url' target='_blank'><img class='acende' hspace='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPCaw4b2buQ5WsN3K3cwltNMwLQ1M4Ron0xxajcYEZp8SKpQ1_l8V6ws4x0FbZTlsjmfFLMOmN5t_i3XWUjGHklDUVfC3NUTMZM0WGb-4-JUJsP4saVb-Bh9P1c8JwKtHvJ_wCCgWjmE/s1600/whatsapp-logo.png' title='Whatsapp'/> </a>
<!-- share buttons -->
</span>
- O resultado fica assim:
Para mudar os ícones é só trocar os links em negrito pelo das imagens que quiser. Basta hospedá-las e depois colar o endereço no lugar dos de negrito. Um site ótimo para baixar ícones é o Flaticon
Se tiver alguma dúvida em relação à minha explicação é só me perguntar que vou fazer o possível para te ajudar! Lembrando que antes de fazer no seu blog oficial, faça em um blog de teste.
Beijos mil!
Ótima dica e fácil de aplicar pra que não manja muito de HTML(assim como eu, hehe).
ResponderExcluirBeijinhos
https://glamour-02.blogspot.com/
Poies é Mary, é bem fácil mesmo, até eu que não tenho tanta habilidade em html consegui editar direitinho.
ExcluirBeijos pra você também! <3
Com certeza uma ótima dica.
ResponderExcluirO meu já tem os botões porque é layout pronto e pago.
Mas se não tivesse acho que não saberia colocar.
Beijos!
http://www.pamlepletier.com/
Normalmente os layouts pagos vem com esses botões mesmo, o que é ótimo pra quem não sabe mexer com essas coisas.
ExcluirBeijos <3
Eu adoro esses tutoriais! Tenho blog desde 2012 e o que tem me salvado são essas dicas para a gente ir personalizando os layouts e ir conseguindo montar nós mesmos nosso blog ☺ Adorei! Os Delírios Literários de Lex
ResponderExcluirO mesmo acontece comigo, o que me salva são esse tutorias que a gente vê por ai. Alguns nem dão certo, mas tento sempre, primeiro em um blog de testes.
ExcluirBeijos <3
Olá, meninas! Tudo bom?
ResponderExcluirGostei bastante da dica, ainda mais que é algo super fundamental para o nosso cantinho. Eu também gosto sempre de me aventurar nesse mundo dos tutoriais, principalmente de HTML, aprendi bastante coisa assim. Parabéns pela iniciativa do tutorial! Aliás, esse layout está muito lindo e deixo uma sugestão para vocês deixarem ele ainda mais bonito: modificar as cores dos comentários, pois eles estão com o rosa sendo predominante, sendo que o restante do layout a cor que predomina é o azul. Ou acrescentar um pouco mais de rosa nos demais detalhes do layout, fazendo uma mistura das duas cores, acho que ficaria bem legal. Qualquer coisa, se precisarem de ajuda, é só entrar em contato.
Um grande abraço!
Com amor,
Blog Newmore ♡
Oiii!! Tudo ótimo! Tava pensando em mudar mesmo, por causa das outras cores. Tá um pouco destoado mesmo. Mas mesmo assim muito obrigada pela dica!!
ExcluirBeijão
Oii de novo kkk. Mudei!! Ficou melhor mesmo. Obrigada pela dica.
ExcluirBeijos <3
Que dica bacana super fácil! bjus
ResponderExcluirConheça meu blog :) | Meu perfil no instagram
Bem fácil mesmo Letícia. Até quem não manja muito no HTML consegue fazer essa mudança.
ExcluirBeijos <3
Muito boa sua dica!
ResponderExcluirwww.coisasdepriscila.com
instagram l bjx
Que bom que gostou Pri!! 💕
ExcluirAi, adoro esses tutoriais que ajudam tanta gente a ir disseminando mais conteúdos! Que lindezura explicativa e tão bem detalhada. Maravilhoso!
ResponderExcluirsemquases.com
Amei suas dicas, esse botão faz toda a diferença, pois ajuda muito na divulgação do site!
ResponderExcluirwww.kailagarcia.com
Ótima dica, até favoritei! Eu mesmo mexo no layout do meu blog, então é sempre bom guardar tutoriais assim. Tenha um ótimo dia, beijos!
ResponderExcluirBlog Paisagem de Janela
www.paisagemdejanela.com
ah que dica bacana, já vou colocar no meu blog
ResponderExcluirwww.tofucolorido.com.br
www.facebook.com/blogtofucolorido
Eu gosto muito desses posts com tutoriais, espalhando conhecimento 💕 obrigada por compartilhar!
ResponderExcluirbeijos.
vitoriamartini.com
Ai que dica ótima! Parece bem simples de fazer!
ResponderExcluirBeijo!
Cores do Vício
muito bom o tutorial, mais eu queria centralizar como faz?
ResponderExcluirOi!! Então, eu não sei ao certo porque quando eu fiz o tutorial já ficou centralizado certinho.
ExcluirQual o endereço do seu blog? Talvez entrando no código fonte eu consiga centralizar para você