Como usar o botão de compartilhar personalizado no blogger?


Hey! Antes de tudo, quero agradecer as mensagens que tenho recebido sobre o Seja Criativo! Fico muito feliz que vocês estejam gostando e apoiando a ideia. Muito obrigada, de verdade. <3

Cadê o tutorial?
Siim! No último tutorial pediram para que eu ensinasse como personalizar o botão de compartilhar, assim como do Seja Criativo. Então, vamos lá! Neste post vocês irão aprender como adicionar o botão do Facebook / Twitter / Google + personalizado no seu layout.

Lembrando que todos os tutoriais postados aqui utilizando o Template Minima como base.

Primeiro: Adicionar o código

Se você quiser deixar os botões dentro do footer da postagem, procure pela linha <div class='post-footer'> no seu layout. No template Minina esta linha aparece duas vezes, portanto você deverá editar a segunda. Após localizar, adicione logo abaixo o código:



Segundo: Adicionar o CSS

Localize a linha ]]></b:skin> e adicione logo acima:
 

Lembrando que você pode personalizar o código acima para deixar os botões da forma que você preferir!

Feito isso, basta salvar e visualizar o resultado no seu blog! :)


Update!


Alguns templates, ao adicionar o código acima, podem apresentar o erro: The reference to entity "title" must end with the ';' delimiter. Para corrigir basta adicionar o amp; antes da palavra title. Explicando melhor... O código corrigido deverá ficar assim

9 comentários:

  1. Mi, adorei. Eu já sabia de outros modos mas assim não tinha pensando na ideia. Fica muito clean. <3

    ResponderExcluir
  2. Oi, no meu deu esse aviso: Erro ao analisar XML, linha 1412, coluna 119: The reference to entity "title" must end with the ';' delimiter. e agora ?

    ResponderExcluir
    Respostas
    1. Oii!

      Sem ver o código não consigo ajudar muito. Manda um e-mail para contato@dezoitoprimaveras.com.br e eu te ajudo por lá! :)

      Excluir
  3. Bah, Mi...fui tentar fazer no meu layout, aquele que tu me ajudou com o rodapé, lembra? E deu erro parecido com o do anônimo... (Erro ao analisar XML, linha 1850, coluna 115: The reference to entity "title" must end with the ';' delimiter.) Será que só funciona no mínima?

    ResponderExcluir
    Respostas
    1. Oii, flor!

      Na verdade, eu não sei explicar o motivo, mas em alguns templates é necessário fazer um pequenina mudança no código. Mas dá para usar sim. ^^

      Excluir
  4. Muitoooo obrigada por postar, flor <3
    Você é muito fofa e atenciosa!

    ResponderExcluir
  5. No meu não ficou como o seu
    ficou com uma bolinha do lado de cada quadrado e quando passa o mouse não tem fica douradinho assim :(

    ResponderExcluir
    Respostas
    1. A bolinha você pode remover adicionando o list-style:none; dentro de .icon-redes-sociais li

      O dourado é só acrescentar o background em .icon-redes-sociais li:hover

      Beijos!

      Excluir
  6. Olá, Michelly!

    Adorei seus tutoriais, espero que você leve sempre adiante seu Blog, pois esta sendo muito útil para os blogueiros iniciantes que querem personalizar seus templates. Queria ver 5 tutoriais sobre: Como dividir o cabeçalho em 2 colunas; Como colocar resumo das postagens: Leia mais na página principal; arquivos relacionados; anuncio no meio dos artigos e o que você poder mais nos ensinar com seus tutoriais.
    Parabéns por sua iniciativa!!!
    Um grande abraço.

    ResponderExcluir