14 de agosto de 2012

16

Botão do Twitter e Facebook no cabeçalho (topo) do Blog



Olá pessoal! vou ensinar a vocês a colocar o Botão do Twitter e Facebook no topo do blog, esses botões fica posicionado ao lado do cabeçalho do blog. O local dos botões é bem útil para quem utiliza as redes sociais para ganhar mais pessoas e convidá-las a participar do seu Blog...




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="http://2.bp.blogspot.com/-oFF4HrEbwaI/To9NpETr6dI/AAAAAAAAEJk/jowvXNvTKcY/s1600/twitter.png" title="twitter" /></a><a href="http://www.facebook.com/Seu-Facebook" target="_blank"><img alt="facebook" src="http://4.bp.blogspot.com/-O6nMA1_akTo/To9NmwKzo4I/AAAAAAAAEJU/UFiFTyAJbnw/s1600/facebook.png" title="facebook" /></a><a href="mailto:E-mail@hotmail.com" target="_blank"><img alt="email" src="http://1.bp.blogspot.com/-zyZkki5OJqE/To9Nmf1xb8I/AAAAAAAAEJQ/dlUOxjZ0H5U/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:
top: 160px
observe que de acordo com o seu template você vai ajustar a localização dos botões
Altere o Código
O 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

16 comentários:

  1. Apareceram os ícones, mas não criaram link nenhum. E agora?

    ResponderExcluir
    Respostas
    1. Considerando 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
      Tenta de novo.

      Excluir
  2. comigo aconteceu a mesma coisa...porquê?

    ResponderExcluir
  3. O Meu não encontrou <b:section class='header' id='header' maxwidgets='1 o que eu faço??

    ResponderExcluir
  4. O meu não ta funcionando, só aparece os ícones.

    ResponderExcluir
  5. Gostei funcionaram os ícones do face e do tuiter menos o e-mail. Valeu.

    ResponderExcluir
    Respostas
    1. é só apagar onde escrito "seu facebook" mas não a "/"
      href="http://www.facebook.com/Seu-Facebook"

      Excluir
  6. Muito bem, aqui não teve problema algum, funciono direitinho.

    ResponderExcluir
  7. Olá, suas postagens estão me ajudando muito, obrigada.
    Mas, no ícone do email não está direcionando para o meu gmail, o que fazer?

    ResponderExcluir
  8. Nossa! Super funcionou! Como eu não queria colocar o ícone do face, só coloquei do Gmail e do Twitter. Facílimo! Beijos!

    ResponderExcluir
  9. Olá 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.

    ResponderExcluir
  10. Olá o meu nun consegui pq não encontrei o código que vc deixou
    <b:section class='header' id='header' maxwidgets='1'
    vc poderia me ajudar???

    ResponderExcluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook