Plano de fundo aleatório para o Blogger

Tem blogueiro que vive trocando de template, não aguenta ver o blog com a mesma cara por muito tempo. Fazer a troca de template é um processo um pouco chato, toma tempo, alguns gadgets precisam ser salvos manualmente, etc. Ter um fundo aleatório no blog seria uma boa opção para quem quer ver o blog sempre de um jeito diferente.

O fundo aleatório funciona da seguinte forma: a cada atualização ou mudança de página o fundo é trocado automaticamente. Isso acontece após termos instalado um código indicando as imagens que devem aparecer no fundo e com o comando aleatório. Confira a seguir um passo-a-passo ensinando como instalar esse código.

Vá na aba Design > Editar HTML e encontre o seletor body. Adicione um fundo  para ser o fundo padrão, pode ser uma imagem ou uma cor. Exemplos:

Cor	Imagem
body { background: #000000; }	body { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfsHjxaI3AQ6DTb6CoTy1zRPFx0fSbG1KW8n9tEGe7OGOMcgeCPgar4y6BuMB3QV1Q8a3Cu9LzRMWy2e2iQAi70gYTxXYw3VQu4gLbdb01gSbCUw8silm6tcdUp9v5orFnjRxC1H45_T0/s1600/glitter_backg round_02.gif); }

Para a imagem ir se repetindo por todo o fundo do blog adicione o comando repeat. Para a imagem não se repetir, ou seja, aparecer uma vez só, adicione o comando no-repeat acompanhado da posição. Exemplos:

Se repetir

body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfsHjxaI3AQ6DTb6CoTy1zRPFx0fSbG1KW8n9tEGe7OGOMcgeCPgar4y6BuMB3QV1Q8a3Cu9LzRMWy2e2iQAi70gYTxXYw3VQu4gLbdb01gSbCUw8silm6tcdUp9v5orFnjRxC1H45_T0/s1600/glitter_background_02.gif) repeat;
} 

Não repetir

 body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfsHjxaI3AQ6DTb6CoTy1zRPFx0fSbG1KW8n9tEGe7OGOMcgeCPgar4y6BuMB3QV1Q8a3Cu9LzRMWy2e2iQAi70gYTxXYw3VQu4gLbdb01gSbCUw8silm6tcdUp9v5orFnjRxC1H45_T0/s1600/glitter_background_02.gif) no-repeat top center;
}

Você também pode querer que a imagem se repita apenas na horizontal, para isso use o comando repeat-x. Porém se desejar que a imagem se repita na vertical use repeat-y.

Salve o modelo e vá na aba Design > Elementos da página. Clique em Adicionar um gadget e escolha o elemento HTML/JavaScript. Não coloque nenhum título. Em Conteúdo cole o seguinte código:

<script type="text/javascript">
var banner= new Array()
banner[0]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[1]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[2]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[3]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[4]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[5]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[6]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[7]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[8]="AQUI O ENDEREÇO DE SUA IMAGEM"
banner[9]="AQUI O ENDEREÇO DE SUA IMAGEM"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + banner[random] + '") repeat center center;');
document.write(" }");
document.write("</style>");
</script>

Você pode inserir até 10 fundos diferentes para serem trocados de forma aleatória. Insira os endereços das imagens em seus devidos lugares. A parte destacada de vermelho é a posição que as imagens ficarão no fundo, elas irão se repetir centralizado tanto na vertical, quanto na horizontal.

Salve o gadget e visualize seu blog. Carregue a página várias vezes para ver o efeito.

Via fulaninhaentretenimentos

Publicado por Administrador19:09

1

Continuar Lendo

CSS: Bordas arredondadas para quem tem pressa

Arredondar bordas no CSS nunca foi uma tarefa muito agradável. Você precisa recortar as imagens, fazer algumas piruetas com as tags e nem sempre você consegue deixar como esperado.

Se você está com pressa e precisa dos divs redondinhos right now!, dê uma olhada nas alternativas que separei para você:

1. CSS Rounded Box Generator cria imagens dinâmicas nas cores que você quiser e ainda fornece os códigos do CSS e HTML na mão. Assim nem tem graça.
2. O Rounded Cornr também cria imagens, fornece o código e ainda permite maior customização com extras como raio (radius) da curva e um background em degradê.
3. Existe também esta técnica aqui em que você cria várias tags e classes em diversos tamanhos para simular uma borda arredondada. Suja o código e eu não aconselho, mas no desespero…
4. Por último, se você é um Open Source Geek ou não liga para os usuários de IE, pode colocar no seu css o seguinte código que funciona tanto no Firefox quanto nos browsers com framework Webkit [en]:

.classe { -moz-border-radius: 10px;

-webkit-border-radius: 10px; }

Apesar de serem soluções fáceis e práticas, não se apegue a elas. Fazer o próprio código ainda é o melhor custo/benefício.

Fonte: Blog Richard Barros

Publicado por Administrador21:23

1

Continuar Lendo