sábado, 17 de julho de 2010

Carregamento de página para o blogger

http://merchantmetrix.com/blog/wp-content/uploads/2009/09/loading-icon.gifColoque um sistema de carreganto de página no seu blog.Funciona assim, quando o visitante entrar na página, uma imagem no topo ao lado esquerdo da página será exibido, e só sairá quando a página for toatalmente carregada.

Para instalar, copie o código abaixo ,vá em "Elementos da página" e adicione um gadget "HTML/Javascript" e cole o código. Depois substitua a parte destacada pela imagem no qual será exibida para o carregamento e salve!

<div style="top:1%;left:1%;position:fixed;">
<script language="JavaScript">
document.write('<div id="loadings"><img src="Imagem do loading"></div>');
window.onload=function() {
document.getElementById("loadings").style.display="none";
}
</script>
</div>

Marcadores: ,

Slide em CSS e HTML

Esse é um simples slide, porém elegante, desenvolvido por min, totalmente em CSS e HTML.Apesar de ser simples, ele apresenta novidades do CSS3 ,coloquei um efeito de transparência e sombra deixando ele bem elegante e combina em qualquer template =D.

A instalação é bem fácil, apenas copie o código lá em baixo, vá em "Elementos da página" e adicione um Gadget "HTML/Javascript" e depois modifique as partes destacada.

Vermelho - Coloque a URL DA IMAGEM
Azul - Coloque o Link de destino.

Para adicionar uma nova imagem no slide, copie a parte destaca de verde, e cole abaixo dela mesmo.
Recomendo que coloque todas as imagens com tamanhos iguais para que não haja deformação no slide.Ou acrescente o seguinte código no css.

.slidecblogger img {width: 400px; height: 300px; padding: 7px;}

Em width coloque um valor em px , que será a largura de todas as imagens.
Em height coloque um valor em px, que será a altura de todas as imagens.

Depois Salve!
<style type="text/css">

#slidecblogger {
background:#000;
padding:5px;
border:3px double #fff;
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}

.slidecblogger a:link {
opacity:0.4;
filter:alpha(opacity=40);
}

.slidecblogger a:hover {
opacity:1;
filter:alpha(opacity=100);
}


</style>

<div id="slidecblogger">
<div class="slidecblogger">

<marquee scrollamount="6" onmouseout="this.start();" onmouseover="this.stop();" direction="right">

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>

<a href="LINK DE DESTINO" target="_blank"><img src="URL DA IMAGEM"/>


</marquee>
</div>
</div>

Marcadores: ,