Bom! este código é um código que vai precisar ser inserido no HTML do Blog, e não se preocupem pois irei mostrar como colocar.
Olha esse código é geralmente utilizado para colocar imagens de publicidade sobre o cabeçalho do Blog, mas eu dei uma modificada no código, pois em vez de colocar a publicidade eu substitui pelos botões do Twitter, Facebook e E-mail.
Não se preocupem este código foi testado e nós o aprovamos, então vocês podem estar utilizando normalmente no seu blog.
vamos agora no que interessa!!!
Acesse o painel do seu Blog, vá em Modelo e em editar HTML, e depois clique em Prosseguir
Você não precisa marcar a opção expandir.
Vamos ter que encontrar uma sequencia de códigos, e para isso vamos utilizar uma tecla de atalho Ctrl + F para pesquisar essa parte do código:
<b:section class='header' id='header' maxwidgets='1'
E quando encontrar ela vai estar deste jeito:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tecno-Criação (Cabeçalho)' type='Header'/></b:section>
</div>
Então a baixo de </div> você acrescentar (colar) este código:
<div style="position: absolute; top: 160px; left: 80%; margin-left: 4px;"><div style="overflow: hidden; width:100px; height: 60px;"><div style="overflow: hidden;"><a href="https://twitter.com/seu-twitter" target="_blank"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCrL0z1mAH1p7M2bQ54yt7-ds5LFfWKjBqj0O9MkQklFG0UkzUQq3yUhd0INzv3SHAF7GswSB41dILtX1F9TUY6Nx4_m7XBEUMVLCaWGfSV6D9O4wwUz-xiY4QZLFXqVpugUpEhkExGno/s1600/twitter.png" title="twitter" /></a><a href="http://www.facebook.com/Seu-Facebook" target="_blank"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1dYPNrt2y2x317vvVv0GZFm9P7wa1ENXlFlVD8Sow9TLNwWaS2n7OY3Xj90krqFOMQCsylq9nQQAcWVdQULp9rmaXpvoornLJKqZmvAyiJXdqQkgoM5dGAKUt_uTBWNc-HvAK_2DoZGk/s1600/facebook.png" title="facebook" /></a><a href="mailto:E-mail@hotmail.com" target="_blank"><img alt="email" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ6DLScsd7VkTDgvi1ZeLowl6lW0tx0JcLOPN8p_axnggwwmDX-8RwNznv5O2vyIlAjhEw2QhLcGOQVtfP0nATfWPhHk-azxu6KpKAdYGo0OrNAAdzjkzDQkPU3G_91jnQTjLs8FarO90/s1600/email.png" title="email" /></a></div></div></div>
Ajuste a posição do botão
*Para alterar deslocar o botão para a Esquerda ou direita (sentido horizontal):
- Para deslocar o botão para a Esquerda, você irá diminuir o valor da seguinte parte:
left: 80%
- Para deslocar o botão para a Direita você irá aumentar o seguinte valor:
left: 80%
*Para deslocar os botões para cima ou mais para baixo (sentido Vertical) altere os valores no código.
- Colocar o botão mais para cima diminua o valor 160:
top: 160px
- Colocar o botão mais para Baixo, aumente o valor 160:
observe que de acordo com o seu template você vai ajustar a localização dos botões
Altere o CódigoO primeiro link que está destacado em azul você colocará o seu Twitter:
href="https://twitter.com/seu-twitter"
O segundo Link você vai colocar o endereço do seu Facebook:
href="http://www.facebook.com/Seu-Facebook"
O terceiro Link você vai colocar o endereço do seu E-mail:
href="mailto:E-mail@hotmail.com"
Pronto agora clique em Visualizar e depois salve
Se gostaram deste código comentem pessoal
Apareceram os ícones, mas não criaram link nenhum. E agora?
ResponderExcluirConsiderando o tempo de seu comentário talvez nem leia, mas vou responder mesmo assim, provavelmente você não colocou os links... você precisa pô-los corretamente
ExcluirTenta de novo.
comigo aconteceu a mesma coisa...porquê?
ResponderExcluirO Meu não encontrou <b:section class='header' id='header' maxwidgets='1 o que eu faço??
ResponderExcluirFuncionou muito bem!
ResponderExcluirO meu não ta funcionando, só aparece os ícones.
ResponderExcluiraltere o href que vai funciona.
ExcluirGostei funcionaram os ícones do face e do tuiter menos o e-mail. Valeu.
ResponderExcluiré só apagar onde escrito "seu facebook" mas não a "/"
Excluirhref="http://www.facebook.com/Seu-Facebook"
Muito bem, aqui não teve problema algum, funciono direitinho.
ResponderExcluirOlá, suas postagens estão me ajudando muito, obrigada.
ResponderExcluirMas, no ícone do email não está direcionando para o meu gmail, o que fazer?
Nossa! Super funcionou! Como eu não queria colocar o ícone do face, só coloquei do Gmail e do Twitter. Facílimo! Beijos!
ResponderExcluirmuito bom...obrigado
ResponderExcluirOlá o meu funcionou e ficou lindo!somente na caixa de E-mail que não funciona, diz a pagina que você está procurando neste blog não existe, da para me dizer o que está faltando obrigada.
ResponderExcluirOlá o meu nun consegui pq não encontrei o código que vc deixou
ResponderExcluir<b:section class='header' id='header' maxwidgets='1'
vc poderia me ajudar???
Muito bom, Parabéns, ajudou d+
ResponderExcluir