Barra Separadora e Botões Compartilhar
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='"http://www.facebook.com/share.php?u=" + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-FACEBOOK' title='Facebook'/></a>
<a expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank'><img src='URL-DA-IMAGEM-DO-TWITTER' title='Twitter'/></a>
<a expr:href='"https://plus.google.com/share?url=" + 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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiiP3xz8VdCrVTbOxcWTUW58N8YLE-5AmnUS4opCSmrAD3MJg-PhZr8E3BVjugwzfuedIF4Pz1x49v8HJcEh9rgtG3_Z7Fiy_X5XWNF-sGys37WIfixkf9okgUFd_968IJa-vlFdIJ52k/s1600/icon-facebook-2.png)
![Tweet about this on Twitter](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMWjr5T0f94zVWtTdcuscW6fgSE5h6S8XA0fGZ-IgM_KjLLy-5ZTZnVJF_n2DyxQdFvMxucADm2zNTE6wMTgxQPR9iIR4tUNbaWgOAMrNtyeItIoz3CMG-ozSHcyz71nme4KTXXQaWYXM/s1600/icon-twitter-2.png)
![Share on Google+](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVdCuYreaEg5c4FWA-d-M0yzRI07JPL3biNMmZo3WIMg5VOa7b3qPI9sOSU5IjyMM35ngDKaQTQgV8KwpdG1POHuEEzL6VmGsjdUbMa_VXGwpTmxiXbm6WbgbUZmgjlgPKohHpqc-Nko4/s1600/google.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC0N6qudBwSy6-iZs4o0cslHACj4BNEj778aSnP5AdbevKFb6mYyPtydX9r4-gsAptHQOp8QDAGRbobr3mUgS1Hi4nIrCrbInQWs7MMjxAOUcJrRpn1TWJF6w9L-BJ9ShkIM5OdDeVAqU/s1600/balaoface.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX9GVWYKnVwUQDfJgeiltpmf5eCvz1kv5lf7pnHzvqJED8-fNRCF7wCzPARzP4F07hqx4uyEniZ8aHVnH0NXHwf40stEBoleo4VOeKk3DA-oGoG3wboEgCj3ZOJLlhmCAIcOAP3R19j0E/s1600/balaotwitter.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik5K9MKh0lc7SJcNzTy06E3AzI9cHf-Aid4xl5VFQkd3KBJBYBnqG2TrWUOYOc2tfum2Ei0Mggfh0mM2Rdxr0_HOH3dp7WDak9aaY6NGZuXVc3VUkhwObKaoEhDU3_BhnxEBPCxBiKP7M/s1600/balaocontato.png)
Fácil não? ^.^
Ja ne!