Efeito "Zoom" ao passar o mouse em imagens

Olá amigos, neste artigo venho mostrar a vocês como adicionar um efeito ao seu blog, para que quando os leitores passem o mouse acima das imagens elas aumentaram de tamanho dando um efeito de zoom ( aproximação ).
O efeito é muito elegante e simples de ser adicionado ao blog, então vamos ao tutorial

- Efeito "neon" em links do blog.
- Efeitos Estrelinhas Caindo do Ponteiro do Mouse

Tutorial
1. Faça login no painel de seu blog
2. Clique na guia "Modelo"
3. Após isso clique em "Editar HTML"
4. Agora segure Ctrl+F procure pela tag abaixo:

]]></b:skin>

5. E acima dela cole o seguinte código
.thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ position: absolute; background-color: black; padding: 5px; left: -100px; border: 5px double gray; visibility: hidden; color: #ffffff; text-decoration: none; } .thumbnail span img{ border-width: 0; padding: 2px; } .thumbnail:hover span{ visibility: visible; top: 0; left: 10px; }

6. Clique em "Salvar", confira se está tudo certo e clique em "Salvar Modelo"

7. Para utilizar o efeito nas imagens, é preciso utilizar o seguinte código

<a class="thumbnail" href="#thumb"><img src="URL_DA_IMAGEM" width="100px" height="80px" border="0" /><span><img src="URL_DA_IMAGEM" /><br />Legenda da Imagem</span></a>

Substitua as partes em vermelho pelo URL/Endereço da imagem, e a parte em azul, pela sua legenda.

Pronto pessoal, até a próxima!

Colocando Sombra e Arredondamento nas Postagens

Olá amigos, neste tutorial venho mostrar a vocês como adicionar um efeito de sombra e arredondamento nas postagens de seu blog. Vamos utilizar a propriedade Box-Shadow, é muito simples de adicionar esse efeito veja.

Tutorial
1. Acesse o painel de seu blog, e clique na guia "Modelo"
2. Depois clique em "Editar HTML"
3. Procure pela seguinte linha:

.post-body {

4. Abaixo da linha citada, cole o seguinte código:
box-shadow: 1px 4px 19px 2px #DCDCDC; ; padding: 10px; border-radius: 28px;

5. Pronto clique em "Salvar Modelo"

Caso queira adicionar somente a sombra, remova do código a seguinte parte.

border-radius: 28px;

Alterando a cor de seleção do mouse em seu blog

Hoje em dia existem diversos tipo de efeitos para seu blog com CSS, CSS3, etc. Hoje vamos aprender algo bem legal. Vamos aprender a mudar a cor de seleção do mouse, assim que você for selecionar um código dentro do seu blog, ficará de cor diferente.

É um efeito muito simples e até mesmo elegante. Não vai pesar em seu blog e você pode o personalizar. Já publique um artigo Efeitos Estrelinhas Caindo do Ponteiro do Mouse que é um efeito para o mouse também, caso se interesse confira o artigo.

Tutorial
1. Acesse o painel de seu blog e clique na guia "Modelo"
2. Clique em "Editar HTML"
3. Procure pela tag abaixo ( Ctrl+F ):

]]></b:skin>

4. Cole acima da tag citada o código abaixo, fazendo as modificações ao seu gosto:

*::-moz-selection {
    background:#91C21A; /* Cor que você quer para o fundo */
    color:#FFFFFF; /* Cor que você quer para o texto */
}
*::selection {
    background:#91C21A; /* Repita a cor que você escolheu para o fundo */
    color:#FFFFFF; /* Reíta a cor que você escolheu para o texto */
}

Para mudar a cor basta mudar o código em vermelho para o que você desejar. Sugerimos que utilize a Tabela de cores HTML, para pegar o HTML da cor e substituir.

 5. Clique em "Salvar Modelo"

Pronto agora é só olhar como ficou acessando o seu blog. Gostou? Comente, tire dúvidas, compartilhe e etc. Até a próxima e boa sorte!

Novo Efeito CSS3 Elegante para Imagens das Postagens - Versão 3

Olá amigos, neste artigo venho mostrar um efeito CSS3 para blogs do blogger. Ele é muito bonito e elegante, ele dá um efeito de sombra como borda das imagens, e dá uma espécie de zoom quando você passa o mouse. É muito fácil adicionar esse efeito em seu blog.

Tutorial
1. Acesse o painel do seu blog e clique na guia "Modelo".
2. Após isso clique no Botão "Editar HTML".
3. Depois segure as teclas Ctrl+F e procure por:

]]></b:skin>

4. Acima da linha citada cole o seguinte código:
.post-body img {border: 1px solid #ccc;-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-o-transform: scale(0.8);-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;}<br /> .post-body img:hover {-webkit-transform: scale(1.0);-moz-transform: scale(1.0);-o-transform: scale(1.0);opacity: 1.0;-moz-box-shadow: 0 4px 16px rgba(0,0,0,0.2);-ms-box-shadow: 0 4px 16px rgba(0,0,0,0.2);-webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.2);box-shadow: 0 4px 16px rgba(0,0,0,0.2);border-image: initial;}</textare

Pronto, clique em "Salvar Modelo".

Efeitos Estrelinhas Caindo do Ponteiro do Mouse

Encontramos um código para colocar estrelinhas caindo do ponteiro do mouse ( veja a imagem abaixo ) para usar no blog, ele é bem simples de colocar e funcionou bem nos testes que fizemos com vários navegadores: Firefox, Internet Explore, Opera e Google Chrome.

É bem simples, vamos lá.
1. Faça login em seu blogger
2. Vá em "Modelo" depois "editar HTML", e procure ( Ctrl+F ) por:

</body>

3. Cole o código abaixo antes dessa linha que você acabou de achar:
<script type='text/javascript'> // <![CDATA[ var colour="#FFD700"; var sparkles=50; var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var tiny=new Array(); var star=new Array(); var starv=new Array(); var starx=new Array(); var stary=new Array(); var tinyx=new Array(); var tinyy=new Array(); var tinyv=new Array(); window.onload=function() { if (document.getElementById) { var i, rats, rlef, rdow; for (var i=0; i<sparkles; i++) { var rats=createDiv(3, 3); rats.style.visibility="hidden"; document.body.appendChild(tiny[i]=rats); starv[i]=0; tinyv[i]=0; var rats=createDiv(5, 5); rats.style.backgroundColor="transparent"; rats.style.visibility="hidden"; var rlef=createDiv(1, 5); var rdow=createDiv(5, 1); rats.appendChild(rlef); rats.appendChild(rdow); rlef.style.top="2px"; rlef.style.left="0px"; rdow.style.top="0px"; rdow.style.left="2px"; document.body.appendChild(star[i]=rats); } set_width(); sparkle(); }} function sparkle() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<sparkles; c++) if (!starv[c]) { star[c].style.left=(starx[c]=x)+"px"; star[c].style.top=(stary[c]=y)+"px"; star[c].style.clip="rect(0px, 5px, 5px, 0px)"; star[c].style.visibility="visible"; starv[c]=50; break; } } for (c=0; c<sparkles; c++) { if (starv[c]) update_star(c); if (tinyv[c]) update_tiny(c); } setTimeout("sparkle()", 40); } function update_star(i) { if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; if (starv[i]) { stary[i]+=1+Math.random()*3; if (stary[i]<shigh+sdown) { star[i].style.top=stary[i]+"px"; starx[i]+=(i%5-2)/5; star[i].style.left=starx[i]+"px"; } else { star[i].style.visibility="hidden"; starv[i]=0; return; } } else { tinyv[i]=50; tiny[i].style.top=(tinyy[i]=stary[i])+"px"; tiny[i].style.left=(tinyx[i]=starx[i])+"px"; tiny[i].style.width="2px"; tiny[i].style.height="2px"; star[i].style.visibility="hidden"; tiny[i].style.visibility="visible" } } function update_tiny(i) { if (--tinyv[i]==25) { tiny[i].style.width="1px"; tiny[i].style.height="1px"; } if (tinyv[i]) { tinyy[i]+=1+Math.random()*3; if (tinyy[i]<shigh+sdown) { tiny[i].style.top=tinyy[i]+"px"; tinyx[i]+=(i%5-2)/5; tiny[i].style.left=tinyx[i]+"px"; } else { tiny[i].style.visibility="hidden"; tinyv[i]=0; return; } } else tiny[i].style.visibility="hidden"; } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; } function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height+"px"; div.style.width=width+"px"; div.style.overflow="hidden"; div.style.backgroundColor=colour; return (div); } // ]]> </script>

Pronto! Caso você queira mudar  a cor das estrelinhas deste efeito basta mudar o código que está logo no começo do código:

var colour="#FFD700";

Veja aqui a tabela de HTML das cores. Outro ajuste muito interessante é a quantidade de estrelinhas isso você pode alterar em var sparkles=50. Até a próxima!

Efeito "neon" em links do blog.

Olá nesse pequeno tutorial venho ensinar a vocês a colocarem um efeito nos links de seu blog, esse efeito é conhecido por neon.

Tutorial
1. Acesse o painel de seu blog e clique na guia "Modelo"
2. Após isso clique em "Editar HTML"
3. Segure as teclas Ctrl+F (atalho para busca de textos na página) e procure por:

]]></b:skin>

4. Acima da tag citada cole o seguinte código:

            a:hover{ color: #000000;text-shadow:0 0 .3em #000000;

            }

5. Clique em "Salvar Modelo".

Personalizar a cor do efeito
Para modificar a cor mude as seguintes partes:

a:hover{ color: #000000;text-shadow:0 0 .3em #000000;

}

As partes que estão em vermelho são a que você ira mudar para uma cor de sua escolha.
Recomendo você a usar uma tabela de cores.