Sobre o Blog

MamanunesO Dicas e Templates Mamanunes nasceu da minha necessidade de registrar as descobertas que faço enquanto aprendo a desenhar templates para a plataforma Blogger. Compartilho aqui alguns truques, templates e informações que considero úteis para blogueiros e curiosos. Entre e fique a vontade.

Info

5.8.09


Ter um menu para suas redes sociais além de muito charmoso é bastante útil para a divulgação do seu blog não é? Agora que tal dar um efeito especial a ele.
Esse código CSS permite criar efeito bem simpático, e muito simples de customizar. Usei esses ícones como exemplo mas você pode e deve procurar os que mais combinam com seu layout e, é óbvio, ícones das redes as quais você pertence.


Primeiro passo: Escolha os ícones, salve em seu computador e hospede em um site tipo Phobucket, Picasa ou Tinypic.
Sugestão: No site Iconfinder você vai encontrar 100.000 ícones FREE para fazer download.


image

image

Muito bem, tendo os ícones salvos e hospedados, vamos editar aos códigos.
Código CSS
<style type="text/css">
img {
border: 0;
}
#menu {
width:400px;
position:relative;
height:100px;
margin:100px auto;
}
#menu a:visited, #menu a {
text-decoration:none;
color:#d00;
font-weight:bold;
#menu a:visited img, #menu a img{
filter: alpha(opacity=40);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.40; opacity:0.4;
}
#menu a:hover {
background-color:transparent;
color:#06a;
}
#menu a span {
display:none;
}
#menu a:hover span {
display:block;
position:absolute;
top:50px;
left:0;
font-size:12px;
height:18px;
padding:4px;
font-weight:normal;
color:#a40;
}
#menu a:hover img {
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1.00; opacity:1;
}
</style>
Codigo HTML
<div id="menu">
<a href="ENDEREÇO DO LINK"> <img src="ENDEREÇO DA IMAGEM" alt="" title="" /> <span>TEXTO QUE APARECE AO CLICAR NO ÍCONE</span></a>
<a href="ENDEREÇO DO LINK"> <img src="ENDEREÇO DA IMAGEM" alt="" title="" /> <span>TEXTO QUE APARECE AO CLICAR NO ÍCONE</span></a>
</div>
O Código CSS é o que dá o estilo (opacidade, estilo das letras, largura, altura) e podem ser alteradas de acordo com seu gosto, espaço e número de ícones que serão inseridos.
O Código HTML, define o link, a imagem (ícone) e texto que aparecerá ao clicar. Observe o trecho entre as tags <div id="menu"> e </div> :


.
<a href="ENDEREÇO DO LINK"> <img src="ENDEREÇO DA IMAGEM" alt="" title="" /> <span>TEXTO QUE APARECE AO CLICAR NO ÍCONE</span>
.
Repita o código para cada ícone que quer no menu.

Caso não queria que o texto apareça, é só apagar o trecho:


.
<span>TEXTO QUE APARECE AO CLICAR NO ÍCONE</span>
.

Sim, agora você quer saber onde e como colocar no seu template, claro. Eu sugiro que você use um blog de testes antes de se aventurar no seu template, é mais seguro.

Faça Login, no painel clic em Layout, em layout clic “Editar HTML”.
Copie e cole o Código CSS acima da tag </head>
  • Para que o menu apareça na Sidebar
Copie e cole o Código HTML abaixo seguinte trecho:

<div id='sidebar-wrapper>
  • Para que o menu apareça no final do post
Clic em “Expandir modelo de widgets” e procure o seguinte trecho:

<div class='post-footer-line post-footer-line-1'>

Copie e cole o Código HTML abaixo dele.

Há outro lugares para se colocar o menu, mas isso fica para outro tutorial. Use sua criatividade e boa brincadeira!

1 comentário

Dav7

ola

eu utilizo o seguinte cod:


style type='text/css'
a.linkopacity img {
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity:0.6;
-khtml-opacity:0.6;
}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
-khtml-opacity: 1.0;
}
/style


mas ele não funciona com o IE.

Vou testar a ajuda deste post para ver se resulta melhor!

Postar um comentário

Caso queira informações mais detalhadas, ou encomendar um template personalizado, use o Formulário de Contato ou meu Email. Responderei o mais breve possível.
Obrigada.