Background vintage para o blog

Continuando a postagem de ontem, a autora do blog ainda tem um blog onde disponibiliza fundo vintage para o blog. São diversos motivos, cores e padronagens. Dê uma confiridinha básica, assim, como quem não quer nada e caso goste, não se esqueça de agradecer por seu maravilhoso trabalho :-)

 

Clique na imagem e conheça o blog

Abaixo, alguns exemplos

»»Leia mais...

Visitante troca imagem de fundo do seu blog

DEMO

Mude o back do blog clicando nas imagens

Me pediram este script através do Twitter. Serve para que o visitante de seu blog tenha o poder de modificar a imagem de fundo (background) de seu blog. Já aproveitei que é Natal, estão todos no clima de Papai Noel, vendo vitrines, enfeitando suas casas e fiz o script com imagens para a ocasião.
Para você, que usa o novo Blogger, com templates disponibilizados a partir de julho de 2010, a primeira coisa a fazer é trocar, todo este código abaixo.

Vá até o Modelo de seu blog, clique em Editar modelo

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

html body $(page.width.selector) {
  min-width: 0;
  max-width: 100%;
  width: $(page.width);
}

a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}

.body-fauxcolumn-outer .fauxcolumn-inner {
  background: transparent $(body.background.gradient.tile) repeat scroll top left;
  _background-image: none;
}

.body-fauxcolumn-outer .cap-top {
  position: absolute;
  z-index: 1;
  height: 400px;
  width: 100%;
  background: $(body.background);
  $(body.background.override)
}

.body-fauxcolumn-outer .cap-top .cap-left {
  width: 100%;
  background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
  _background-image: none;
}

.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  margin-bottom: 1px;
}

.content-inner {
  padding: $(content.padding) $(content.padding.horizontal);
}

$(content.background.color.selector) {
  background-color: $(content.background.color);
}

 

Substitua-o então por este:

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
}

html body $(page.width.selector) {
  min-width: 0;
  max-width: 100%;
  width: $(page.width);
}

a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}
.body-fauxcolumn-outer .cap-top {
  position: absolute;
  z-index: 1;
  height: 400px;
  width: 100%;

}
.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  margin-bottom: 1px;
}

$(content.background.color.selector) {
  background: #eee;/*Cor da página*/}

 (Código em rosa pode ser modificado pela cor que quiser como funda da página do blog)

Salve.

Agora clique em Layout 

Clique em Adicionar um Gadegt

Ao abrir, clique em  HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias, onde estão os códigos com cores diferente. Cada imagem deve ser colocada 


ATENÇÃO: os códigos estão em cores diferentes para que você perceba que é necessário repetir cada imagem 2 vezes.

<style>
#bljjImgFond a img {border: 4px solid #ccc;text-align:center;height: 40px;width: 40px;}
</style>

<div style="text-align:center;">Mude o back do blog clicando nas imagens</div><br />
<div id="bljjImgFond">
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBmgpqmJlDvB9pUrXKmsBT_t1Am4YoGpOTApRMMY3J6yI34T9G90wcLSnJSRDu0puByLOJZSY4f-pMCs_Nb-29jA1aHYdxRq449ygFLL78bUaWUCOxA4LfZi9RXJ9TJ4Gf04UVb6XdgFr/s1600/0bgr295zj1.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBmgpqmJlDvB9pUrXKmsBT_t1Am4YoGpOTApRMMY3J6yI34T9G90wcLSnJSRDu0puByLOJZSY4f-pMCs_Nb-29jA1aHYdxRq449ygFLL78bUaWUCOxA4LfZi9RXJ9TJ4Gf04UVb6XdgFr/s1600/0bgr295zj1.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVM6BrfQYewEE1Ws4qpqvR1z4LehEtoqT97yzVbdl5eMmKcz0JrYKeNRyZ86ZYE2KCwMQeTzuBnti5r28TX4o5EHvHJH2EmCG-rhiU2YmynqNwRt49C0ZuAt_UR94cCd4KvBYTPfhOys4F/s1600/2q1yo3r.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVM6BrfQYewEE1Ws4qpqvR1z4LehEtoqT97yzVbdl5eMmKcz0JrYKeNRyZ86ZYE2KCwMQeTzuBnti5r28TX4o5EHvHJH2EmCG-rhiU2YmynqNwRt49C0ZuAt_UR94cCd4KvBYTPfhOys4F/s1600/2q1yo3r.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKgNyPNkwq2py1ob4HjZ6VUmJHQ0heT5shTafwN8qyjP_dFj10CUnNyowiJbcZp1w0xhCuTgRh64diwgkgb239okjhMlHWCyo8VgEAbOZ3lYGvh7hTyNIR5T3emfxEyvT_w63HokuBYRAO/s1600/34plx6f.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKgNyPNkwq2py1ob4HjZ6VUmJHQ0heT5shTafwN8qyjP_dFj10CUnNyowiJbcZp1w0xhCuTgRh64diwgkgb239okjhMlHWCyo8VgEAbOZ3lYGvh7hTyNIR5T3emfxEyvT_w63HokuBYRAO/s1600/34plx6f.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-SdiTEMpko738JlhQGSoh59rQ0CHgaDe-P5Z3w3uNnKvNzobsE3sD2vG5DslgWF0IF2T8jLtcupJF-zGARNLir6SkTJnVgzFBADiG2QLD4u7yWWvWvj_WK6elCaVI82Uqzbk09Xs_zRgU/s1600/gbi_freexmas05_bg1.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-SdiTEMpko738JlhQGSoh59rQ0CHgaDe-P5Z3w3uNnKvNzobsE3sD2vG5DslgWF0IF2T8jLtcupJF-zGARNLir6SkTJnVgzFBADiG2QLD4u7yWWvWvj_WK6elCaVI82Uqzbk09Xs_zRgU/s1600/gbi_freexmas05_bg1.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkXgQP2TSB85tGo7VrC-E6fORcTQioNe3YMKNqp32aHgyBCdem8suNSnNApHlf7s775KZxLC8aOKJpKeepFMEs-StZ3OOBmEJeKOLXWoGwote86ahsrWKTJrcGLPcGtJ6T_te3AD75RuiO/s1600/8991251.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkXgQP2TSB85tGo7VrC-E6fORcTQioNe3YMKNqp32aHgyBCdem8suNSnNApHlf7s775KZxLC8aOKJpKeepFMEs-StZ3OOBmEJeKOLXWoGwote86ahsrWKTJrcGLPcGtJ6T_te3AD75RuiO/s1600/8991251.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJPtcZUPAE7EZWQlYB7twxOibfmaUP4LQ7fh2_vnTOXLm2AUA66zOeWEvdLHy-yzTJn4aWjf5DZiN6m8vZx3-Ht4Dq9OJne3pGyyB6rPufvcjaRgiAJidbSWDsL5R2c-NV3mYLLtnYDcBj/s1600/bg19.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJPtcZUPAE7EZWQlYB7twxOibfmaUP4LQ7fh2_vnTOXLm2AUA66zOeWEvdLHy-yzTJn4aWjf5DZiN6m8vZx3-Ht4Dq9OJne3pGyyB6rPufvcjaRgiAJidbSWDsL5R2c-NV3mYLLtnYDcBj/s1600/bg19.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguZ2dRQjF0L-goNjwxVWJHbphJfzmadoZ5aW-qhPfFVoC96c09XUKXziCnvyGirF2IKcpqtFNXA5nILoeDA_Uj-EWdHXY3sQ_vPmRD1b_lvv6HOL-tkH0Se2rR1W3BP_7EVAfANPH28Ou0/s1600/fundoverm_gli.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguZ2dRQjF0L-goNjwxVWJHbphJfzmadoZ5aW-qhPfFVoC96c09XUKXziCnvyGirF2IKcpqtFNXA5nILoeDA_Uj-EWdHXY3sQ_vPmRD1b_lvv6HOL-tkH0Se2rR1W3BP_7EVAfANPH28Ou0/s1600/fundoverm_gli.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3KM0Zj_7uCTtaueKdwhwEhJrdNhIuuxjazUWAgtxSbldUfXgCWW8L0Z6sNjUXKST3sc5YdAb9KEykBvMd0Ar-8ywWgGbo70Df9fLcVtLit-2M5h4mZn59ntpcyOHUo6dixDbw-OSasGCP/s1600/azul_flocos1.jpg)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3KM0Zj_7uCTtaueKdwhwEhJrdNhIuuxjazUWAgtxSbldUfXgCWW8L0Z6sNjUXKST3sc5YdAb9KEykBvMd0Ar-8ywWgGbo70Df9fLcVtLit-2M5h4mZn59ntpcyOHUo6dixDbw-OSasGCP/s1600/azul_flocos1.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZu_0FxSUqeJiiJw856HTkx0R2x5dUrZ8QWcBqK19XSzb6_j2T0cC1djq-qutbLf93az6jOSEXC8EhLUkgXMOMIOipZpzWBV69AkvTJpX6kgAaJyKkOHJiggdjqTKmi0oX8BINyFkWv2w4/s1600/xmasf19.jpg)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZu_0FxSUqeJiiJw856HTkx0R2x5dUrZ8QWcBqK19XSzb6_j2T0cC1djq-qutbLf93az6jOSEXC8EhLUkgXMOMIOipZpzWBV69AkvTJpX6kgAaJyKkOHJiggdjqTKmi0oX8BINyFkWv2w4/s1600/xmasf19.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR7bWUcwCxCEkJNUio0ulGJpGbz_1OYTt9kZHWWIcUe85x0itrmHf88lQ0a0nWH_nWB5JHijyUxOfmq1IvI1AQIKFqgMScq-A6_Vobj03_J19FZLSkjWq-q24QAM0nl3QNOkTkbHnI3huw/s1600/xmastile-30a.jpg)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR7bWUcwCxCEkJNUio0ulGJpGbz_1OYTt9kZHWWIcUe85x0itrmHf88lQ0a0nWH_nWB5JHijyUxOfmq1IvI1AQIKFqgMScq-A6_Vobj03_J19FZLSkjWq-q24QAM0nl3QNOkTkbHnI3huw/s1600/xmastile-30a.jpg" /></a>
</div>

»»Leia mais...

Back e header Scrap Rosinha

Aprenda AQUI a instalar este back e este header em seu Blogger.

Não copie a imagem, salve em seu computador.

Header

Back

Créditos pelo kit: Bel Vidotti

»»Leia mais...

Back e header Scrap Tulipa Lilás

Aprenda AQUI a instalar este back e este header em seu Blogger.

Não copie a imagem, salve em seu computador.

Header

Back

Créditos pelo kit: Bel Vidotti

»»Leia mais...

Back e header Rock Girl

Aprenda AQUI a instalar este back e este header em seu Blogger.

Não copie a imagem, salve em seu computador.

Header

Back

Créditos pelo kit: Bel Vidotti

»»Leia mais...

Back e header Blue

Aprenda AQUI a instalar este back e este header em seu Blogger.

Não copie a imagem, salve em seu computador.

Header

Back

Créditos pelo kit: Bel Vidotti

»»Leia mais...

Back e header Scrap Jeans Teem

Mais um conjunto de back + header.

Aprenda AQUI a instalar este back e este header em seu Blogger.

Não copie a imagem, salve em seu computador.

Header

Back

Créditos pelo kit: Bel Vidotti visite...

»»Leia mais...

Back e header Scrap Barquinho

Aprenda AQUI a instalar este back e este header em seu Blogger.

Não copie a imagem, salve em seu computador.

Header

Back








Este kit foi feito por: Pimp' d Designz

»»Leia mais...

Back e header Scrap India

Aprenda AQUI a instalar este back e este header em seu Blogger.

Não copie a imagem, salve em seu computador.

Header

Back

»»Leia mais...

Back e header Scrap Love

Aprenda AQUI a instalar este back e este header em seu Blogger.

Não copie a imagem, salve em seu computador.

Header

Back

Créditos pelo kit: Não lembro :-(

»»Leia mais...

Back e header Scrap Flores Fuxico

Totalmente inspirada pelo blog do post anterior, inauguro neste blog a seção "Background para o Blogger.
Farei e postarei imagens para serem colocadas no Blogger sem dificuldades, através da seção de "Elementos de página". Então, eis um back e uma header.

Atenção, este back e esta header estão configuradas para o template "Minima" de 2 colunas.

Header

Back

Código para o back

<style type="text/css">body {background-image:url("AQUI O ENDEREÇO DA IMAGEM DE FUNDO"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }</style><div id="tag" style="position:absolute; left:0px; top:30px; z-index:50; width:150px; height:45px;"><a href="http://templateseacessorios.blogspot.com/search/label/Backgrounds%20para%20o%20Blogger/" target="_blank"><img border="0" src="http://img222.imageshack.us/img222/3620/bot.gif" /></a></div>

Se não sabe como instalar, clique AQUI e aprenda.

»»Leia mais...

Backgrounds para o Blogger

Navegando encontrei um blog lindo, o "Blogger Background Blog"com um serviço especial: backgrounds para o Blogger.







Se você gosta de blog cute ela disponibiliza lindos fundos para o Blogger em 2 ou 3 colunas. Entre, escolha o fundo para o seu blog, copie o código e cole no HTML/Javascript em seu blog. Ela também faz as imagens para o cabeçalho.

Para instalar o fundo é fácil.

1. Clique em "Layout"
2. Clique em "Elementos de página"
3. Clique em "Adicionar elemento de página"
4. Ao abrir a janela, clique em "HTML/Javascript", é aí que vc colará o código.
   

Clique AQUI e conheça o serviço.

»»Leia mais...