Colocar imagems estáticas na lateral do blog

Colocar imagems estáticas na lateral do blog

Se voce já viu como colocar uma Imagem para subir ao topo do blog , pode se interessar em colocar os ícones das redes sociais fixos na sua página, na lateral do blog.
Lembrando que ela não irá rolar junto com a página e será sempre visualizada por quem estiver no blog.

1º Passo

Entre em seu blog vá até o Painel do Blogger, entre em DESIGN->EDITAR HTML e marque a opção 'Expandir modelos de widgets'.
Procure pelo trecho a seguir: (utilize o CTRL+F):

</head>
Após encontrar, cole o seguinte código logo ACIMA do trecho citado:
<style>
.FBConnectButton_Small{background-position:-5px -232px !important;border-left:1px solid #1A356E}.FBConnectButton_Text{margin-left:12px !important;padding:2px 3px 3px !important}#ShareSidebar{top: 35%;width:130px;Right: 0 !important;overflow:hidden;position: fixed;z-index: 100000;text-align:center;line-height:normal;_position: absolute;font-size:9px;}#ShareSidebar a,#ShareSidebar a:hover,#ShareSidebar a:visited{text-decoration:none;font-size:9px;}</style>

top: Altere este valorde acordo com a posição das imagens em relação ao topo da sua página.
width: Altere este valor de acordo com a largura do seu widget.
Right: Altere este valor para a posição em que voce deseja que aparece seu widget, Right para flutuar ha direita e Left para flutuar ha esquerda.

Visualize sempre, caso esteja tudo correto salve o modelo.


2º Passo




Agora procure pelo trecho abaixo:

<footer>
Após encontrar cole o seguinte código acima:

<div id='ShareSidebar'>
<div style='float:right; margin:0 0 0 0;'>
<a href='URL-LINK'><img alt='DESCRIÇÃO-DA-IMAGEM' src='URL-DA-IMAGEM' title='DESCRIÇÃO-DA-IMAGEM'/>
</a>
</div>
</div>
URL-LINK: Coloque aqui o link para onde sua imagem deve redirecionar.
DESCRIÇÃO-DA-IMAGEM: Coloque aqui uma breve descrição da imagem.
URL-DA-IMAGEM: Coloque aqui a url de onde a imagem está hospedada na internet.

Caso queira colocar mais de uma imagem na lateral, é só acrescentar mais uma 'div' igual a que esta acima dentro da div id='ShareSidebar'. Ex:

<div id='ShareSidebar'>
<div style='float:right; margin:0 0 0 0;'>
<a href='URL-LINK'><img alt='DESCRIÇÃO-DA-IMAGEM' src='URL-DA-IMAGEM' title='DESCRIÇÃO-DA-IMAGEM'/>
</div>
<div style='float:right; margin:0 0 0 0;'>
<a href='URL-LINK'><img alt='DESCRIÇÃO-DA-IMAGEM' src='URL-DA-IMAGEM' title='DESCRIÇÃO-DA-IMAGEM'/>
</div>
</div>

Novamente visualize, e caso steja tudo sem erros salve.


Artigo retirado do blog parceiro: Blogando Fácil
Artigo original retirado do site http://sharesidebar.com/.