Barra Separadora e Botões Compartilhar

maio 15, 2015


Konnichiwa people! O que estão achando do novo Layout? >.< . Não tá todo pronto, só falta algumas coisinhas, mas os principais já estão feitos! Falta Link me's novos, editar essa parte do ''O que ando fazendo'', e alguns detalhes que quero colocar ^.^ .
Hoje fui teimosa, porque mesmo com esse tempinho frio, resfriada, com febre e tudo que vocês possam imaginar, fiquei aqui na frente do pc, editando e procurando maneiras de personalizar o blog kk' eu acho muito divertido mexer com HTML, editar barrinhas e etc. aaatim! *espiro*

Então já que to nesse clima de editar *e espirar*, resolvi postar um tutorial de como colocar Barra Separadora e Botões de Compartilhar de redes sociais. No caso a dos botões foi lá do lindo e perfeito blog Reino Kawaii, mas com uma mudança, deixar também centralizado. 

E a Barra Separadora é aquela barra que divide a postagem e os botões de compartilhar, melhor dizendo Barra Share On/Compartilhe . Não achei um tutorial ensinando, então eu mesma inventei e deu certo! ^.^

Espero que gostem! 

Let's go?

Primeiramente faça um backup do seu template, caso de algo errado, terá como recuperar.



- Barra Separadora

Vá em Modelo - Editar Html e aperte Ctrl+F , e procure por :

<div class='post-footer-line post-footer-line-3'/>

Após acha-lo copie abaixo dele:

<center><img height='30px' src='URL DA BARRINHA' width='750px'/><img/></center>


Explicando:
URL DA BARRINHA: é onde você vai colar o link da imagem. 
Height/Width: Height é a altura que a imagem da barra irá ficar, e o Width é a largura, caso a imagem fique grande, ou pequena é só mudar a numeração delas.

Opções de Barrinhas Share On/Compartilhe:








- Botões Compartilhar

Agora abaixo do codigo acima, depois de <img/></center> cole:

<center><!-- share buttons -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-FACEBOOK' title='Facebook'/></a>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-TWITTER' title='Twitter'/></a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-GOOGLE' title='G+'/></a>
<!-- share buttons --></center>

Explicando:
Onde está destacado de rosa, é onde você irá colocar o link do ícone (Facebook, Twitter e G+) da sua preferencia. 

Opções:

Share on Facebook Tweet about this on Twitter Share on Google+   

      



                               





Fácil não? ^.^
Ja ne!


Leia também:

2 comentários

  1. Eu procurei tanto esse tutorial, e agora eu achei. Ai mds que amor♥
    Só não esquece de colocar que o procedimento é feito no segundo resultado de: div class='post-footer-line post-footer-line-3'/, porque se colocar no primeiro não vai funcionar u3u

    Obrigada pela postagem♥ Beijão♥
    Sekai Bakawaii

    ResponderExcluir
    Respostas
    1. Sério? Que ótimo! Fico feliz em ter ajudado!
      Obrigada ♥
      Aaah sim, vou atualizar o post, obrigada por avisar *-*
      ~ Kissus

      Excluir

© 2017 Sweet Magic. Re-Design By: Juciane Damasceno. Tecnologia do Blogger.
Eu Sou do CBBlogers