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="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:

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