Cursos 24 Horas - Cursos 100% Online com Certificado

Background Rotativo - Fundo Aleatório para Blogger

15 Comentários Autor : Notícia e blog 22 novembro 2009

Fundo do seu blog a parte mais visível


Está é uma dica muito interessante para você que gosta de ter um blog bem atualizado, pois o fundo será sempre um diferente a cada visita do leitor dando uma impressão de que o blog muda o fundo várias vezes. Para fazer isso é necessário utilizar um pequeno JavaScript que muda os fundos do blog a cada atualização da página, veja como você pode ter está façanha no seu blog :

Hospede as imagens

Antes de começar você deve ter as imagens de fundo que deseja colocar, você pode ver algumas imagens nesta postagem aqui do blog. Depois de escolher as imagens e salva-las no seu computador é necessário hospeda-las em um servidor se não souber onde hospedar veja o Guia das Hospedagens de imagens escolha a melhor opção e hospede.

Instalando o script no blog

Depois já ter hospedado e já estar com as urls das imagens você deve inseri-las ao script, veja abaixo:
1.Acesse o painel do Blogger "blogger.com"
2.Vá para "Layout"->"Elementos da página"->"Adicionar um Gadget"->"HTML/JavaScript"
3.Insira o código abaixo adaptando de acordo com a nota:
<script type="text/javascript">
var banner= new Array()
banner[0]="Image01URL"
banner[1]="Image02URL"
banner[2]="Image03URL"
banner[3]="Image04URL"
banner[4]="Image05URL"
banner[5]="Image06URL"
banner[6]="Image07URL"
banner[7]="Image08URL"
banner[8]="Image09URL"
banner[9]="Image10URL"
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>

Nota: A parte em azul deve ser substituída pela url da imagem que você hospedou, substitua cada parte por uma url diferente. Em vermelho você deve alterar de acordo com o número de banner que foi adicionado ao script.
4.Salve as alterações e visualize.

Referência:Tips for New Blogger
imagem:Baixaki

    15 Comentários

    Lucas Jordison disse...
    28 de novembro de 2009 00:34 #

    Otima dica, vo usa-la em breve... Mas o q eu queria saber mesmo é como fazer um Header aleatório.. tipo, a cada vez que a pessoa acessa algum item do blog, ou aperta F5, o header muda aleatoriamente... Tem como fazer isso? Abraço.

    Lucas Jordison disse...
    28 de novembro de 2009 11:51 #

    Consegui fazer a imagem aleatória no Header do blog. Era tão obvio que não consegui acreditar ora que consegui. Se você quiser, lhe envio um tutorial para você colocar no maior blog de noticia e dicas, Noticia e blog. Obrigado de novo !

    Notícia e blog disse...
    29 de novembro de 2009 19:18 #

    @Lucas Jordison , acho que sei sim é só modificar a palavra background por header ou header-wrapper . Mas obridado pelo comentário.

    Anônimo disse...
    4 de janeiro de 2010 02:21 #

    Salvou meu blog!!
    Valeu!!!!

    kaytros disse...
    27 de maio de 2010 16:01 #

    gostaria de saber como faço para colocar d forma que os usuarios possa escolher qual imagen quer de bakgroud

    мя. LopєєzZ disse...
    30 de novembro de 2010 22:36 #

    Opa amigo, parabéns pelo seu blog.
    tipo eu to com probleminha, eu não tenho widget no header, dai eu hospedei o seu java e implementei no meu html, e em vêz de "background" coloquei "header-wrapper" como você falou, mais não acontece náda..

    será que estou colocando no lugar errado do meu html?

    tipo botei embaixo de : <*div class='header'>

    ps- tentei colocar emcima de <*/head> também não funcionou!

    me dá uma luz ai, só tenho vocês..

    Anônimo disse...
    17 de maio de 2011 18:41 #

    Comigo não funcionou. Provavelmente é porque não percebo nada disto. Mas não estou a conseguir pôr. Dá erro -.-'

    Kung lao master disse...
    7 de agosto de 2011 12:33 #

    ei amigo, fiz todos os procedimentos e deu certo, mas gostaria de saber qual o código que devo acrescentar, para que o background não repita na página, e role junto com a página ?

    Bruno disse...
    11 de agosto de 2011 21:27 #

    Cara, eu tirei o "repeat" e coloquei "no-repeat", mas no lugar que não tem a imagem ficou branco. Queria deixar preto nessa parte que não tem imagem. pode ma ajudar? obrigado

    Iago Bruno disse...
    5 de fevereiro de 2012 00:18 #

    Eu tbem queria saber! Tem como?
    VLW ae.

    Jцц.βrөcH disse...
    14 de agosto de 2012 17:48 #

    @Bruno
    Eu estava com o Mesmo Problema, mexi ali , teste daqui e está Pronto Copie

    "document.write(' background:url("' + banner[random] + '") background-color:#000000; center top no-repeat fixed;');"

    Veja meu site wwwaeriumplay.blogspot.com

    Jцц.βrөcH disse...
    14 de agosto de 2012 23:07 #

    @Jцц.βrөcH
    Corrigido

    document.write(' background:url("' + banner[random] + '") no-repeat center top;background-color:#000000;');



    Veja Meu site de TESTE http://tutoriaisdecsonline.blogspot.com.br/

    Lista7 disse...
    28 de novembro de 2012 21:14 #

    Obrigado!
    Funcionou perfeitamente!!

    Daniel disse...
    1 de março de 2013 00:08 #

    gostei funcionou certinho muito bom esse scripts... valew

    Leilane Freitas disse...
    4 de fevereiro de 2014 14:25 #

    Funcionou perfeitamente! Vlw!

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.