quinta-feira, 14 de novembro de 2013

Efeito opacidade nas imagens

Efeito opacidade nas imagens

Oi cherries! Tutorial para vocês hoje!
Vocês já devem ter visto em alguns blogs e aqui no cherry bomb, um efeito nas imagens que deixa elas mais opacas ou transparentes, e quando passa o mouse fica normal. Para entender melhor, veja um exemplo:
Vou ensinar para vocês usando o código do MadlyLuv, que foi o que eu achei mais simples e funcional.
Vamos começar? Então abra o seu blog, e vá no HTMl dele. Aperte Ctrl+F e procure por ]]></b:skin>
Cole Antes de ]]></b:skin> o código abaixo:
/****** opacidade - MADLYLUV.COM ******/
.opacidade
{filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;}

.opacidade:hover
{filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;}
Salve as alterações.
Quando quiser deixar uma imagem com esse efeito, é só acrescentarclass="opacidade" no código na imagem, vai ficar assim:
<img src="http://i55.tinypic.com/t7nxuf.jpgclass="opacidade"/>
Simples não? Espero que tenham gostado, Kissus.

Imagem no lugar dos links de navegação

Sabe aqueles links que aparecem no rodapé das postagens, que permitem ao visitante ver as postagens anteriores, ou voltar para o início? Se você não sabe do que estou falando, são esses links aqui:

Neste tutorial você vai aprender como colocar uma imagem no lugar deles, mais ou menos assim:
Imagem do blog Attitude Included

Eu já postei um tutorial ensinando isso, mas aquele método está dando erro depois da atualização do blogger, então resolvi postar uma maneira nova (e muito mais fácil) de fazer isso.
Vamos lá! Antes de tudo, crie as três imagens que você vai usar, ou escolha umas das que eu fiz que estão no fim desse post. Hospede as imagens em algum servidor.

Abra o painel do blogger, clique no nome do seu blog, depois, clique em "Modelo" no menu vertical que aparece no lado esquerdo da tela. Clique no botão "Editar HTML" que fica em baixo da miniatura do seu blog, e clique em prosseguir no aviso que aparecer. 
Marque a opção "Expandir modelos de widgets"







Substituindo o link "Início"
 Aperte Ctrl+F e procure por: <data:homeMsg/> Esse código vai aparecer em dois lugares, mas você só vai mexer no primeiro que aparecer.
 Substitua esse código pelo código abaixo:
<img src="url_da_imagem"/>


Substituindo o link "Postagens mais antigas"
 Aperte Ctrl+F e procure por: <data:olderPageTitle/>
 Substitua esse código pelo código abaixo:
<img src="url_da_imagem"/>


Substituindo o link "Postagens mais recentes"
 Aperte Ctrl+F e procure por: <data:newerPageTitle/>
 Substitua esse código pelo código abaixo:
<img src="url_da_imagem"/>


Agora é só visualizar. Se estiver tudo nos conformes, salve. Abaixo tem algumas imagens que eu fiz para vocês usarem neste tutorial. Não esqueçam de colocar créditos ok?