domingo, 12 de junho de 2011

Navbar transparente no blog

Pra você que é iniciante do blogger e quer deixar a barra de navegação do seu blog com um tom de transparência, vale apena ver este tutorial.

Você não vai usar código nenhum, apenas vai ter que fazer o login no blogger, clicar em ‘Design’ > ‘Elementos da página’ e na barra ‘NAVBAR’ clique na opção ‘Editar’.

Como deixar navbar transparente no bloggerDepois abrirá uma janela, onde você vai escolha um tipo de barra e clique em salvar.

Como deixar navbar transparente no blogger

Marcadores: , , , ,

Efeito de zoom giratório nas imagens dos posts com css3

Papel de parede cblogger

Muitos novos recursos vieram no css3, e alguns recursos que se destacam são alguns efeitos como rotação, tamanho e sombra. E aproveitando esses ótimos recursos, neste tutorial vou ensinar com dar um efeito de zoom giratório nas imagens das postagens a partir de códigos do CSS3. Não vamos usar absolutamente nenhum código em javascript, jquery, ou qualquer outra linguagem, apenas CSS.

Você pode estar vendo como vai ficar este efeito através do meu portfolio clicando aqui.

Vamos ao nosso principal objetivo, colocar o efeito. Primeiramente, acesse o ‘Editar HTML’ do seu blog e pesquise pelo seguinte código:

]]></b:skin>

ACIMA  dela acrescente os seguintes códigos CSS:

.post-body img {
z-index:999999;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
}

.post-body img:hover{
z-index:9999;
-webkit-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
-moz-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
-o-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
}

Depois é só salvar e pronto. Efeito bem legal em suas postagens, sem usar qualquer programação avançada, somente css, deixando suas postagens mais interativa sem deixa-la pesada.

Marcadores: , , , ,