Colocar Imagem Estatica na Lateral do blog

Por:

| 17 de mai de 2011

Quer colocar uma imagem parada na lateral do seu blog? Essa imagem pode ser por exemplo os botões de seguidores das redes sociais ou qualquer imagem com link que você queira. Lembrando que ela não irá rolar junto com a página e será sempre visualizada por quem estiver no blog.
Veja como é simples fazer!

Tutorial

Atenção! Antes de fazer qualquer alteração, faça um Backup do seu template.

Já no Painel do Blogger, vá em DESIGN / EDITAR HTML e marque a opção 'Expandir modelos de widgets'.
Procure pelo trecho (utilize o CTRL+F):

</head>

Cole o seguinte código logo acima do trecho citado:

<!--ShareSidebar.com icones na lateral-->
<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>
<!--ShareSidebar.com ENDS-->

Não esqueça de alterar o trecho "width:130px;". Onde está 130px você coloca a largura das imagens que irá utilizar.
As imagens devem ter a mesma largura, porém a altura delas pode variar.

Obs: Se quiser mudar a posição da imagem, colocando na lateral esquerda, ao invés da direita, substitua o trecho Right por Left.
Onde está 'top:35%;' você pode definir a altura em que ficará a imagem. Quanto mais você aumentar a porcentagem, mais a imagem irá para baixo.

Salve o modelo!

Agora procure pelo trecho:

<footer>

Cole o seguinte código acima:

<div id='ShareSidebar'>
<div style='float:right; margin:0 0 0 0;'><a href='url do link'><img alt='descrição da imagem' src='url da imagem hospedada na internet' title='descrição da imagem'/></a></div>
</div>

É só alterar as partes em vermelho de acordo com suas necessidades.
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 do link'><img alt='descrição da imagem' src='url da imagem hospedada na internet' title='descrição da imagem'/></a></div>
<div style='float:right; margin:0 0 0 0;'><a href='url do link'><img alt='descrição da imagem' src='url da imagem hospedada na internet' title='descrição da imagem'/></a></div>
</div>

Clique em 'Visualizar', e se estiver ok, clique em 'Salvar'
Este código foi retirado do site http://sharesidebar.com/, eu apenas 'adaptei/customizei' algumas coisas.
Mantenha os créditos!
Gerador de Senha - Crie senhas mais seguras
- Topo