21 de ago. de 2011

Background randômico no Blogger



Você pode usar várias imagens de fundo em seu blog como fotos, backgrounds e wallpapers para que ele vá mudando enquanto seu visitante estiver em seu blog. Isso dá a seu blog uma aparência diferente.



  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

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
Procure por este trecho abaixo:

/* 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);
}


Troque-o por este abaixo:

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  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 {
}

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

.body-fauxcolumn-outer .cap-top .cap-left {
  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-inner {
  padding: $(content.padding) $(content.padding.horizontal);
}

$(content.background.color.selector) {
  background: url(http://www.blogblog.com/1kt/transparent/white80.png) repeat;
}

Agora vamos implementar o hack. Procure por:

</body>

Acima dele cole este código abaixo:

<!-- Javascripts Do Not Touch -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'></script>
<script type='text/javascript'>
         $(function() {
                $(window).scroll(function(){
                    var scrollTop = $(window).scrollTop();
                    if(scrollTop != 0)
                       $('#nav').stop().animate({'opacity':'0.2'},400);
                    else 
                        $('#nav').stop().animate({'opacity':'1'},400);
                });           
                $('#nav').hover(
                   function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'1'},400);
                        }
                    },
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'0'},400);
                        }
                    }
                );
            });

        </script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');
    // uncomment the 3 lines below to pull the images in random order
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
$(function() {
    setInterval( "slideSwitch()", 5000 );
});
//]]>
</script>


Agora procure por:


</head>



E depois dele cole:

<!-- Background Slide Show -->
<div id='slideshow'>
<img alt='' class='active' src='ENDEREÇO DA IMAGEM 1'/>
<img alt='' src='ENDEREÇO DA IMAGEM 2'/>
<img alt='' src='ENDEREÇO DA IMAGEM 3'/>
<img alt='' src='ENDEREÇO DA IMAGEM 4'/>
<img alt='' src='ENDEREÇO DA IMAGEM 5'/>
</div>
<!-- Background Slide Show End -->


Agora procure:

]]></b:skin>


E cole antes dele o código abaixo:

/* SLider */
#slideshow {
position:relative;
z-index:-1;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
#slideshow img {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px;
}








3 comentários:

  1. Elke A Bilhoes de ano qui leio suas postagens,
    muito bem explicadas, até pra quem nao sabe nada de blogs, se acha um verdadeiro web designr seguindo suas postagens passo a passo,
    parabens pelo trabalho, Elke como compulsivo colocador de gadjets windgets eu queria uma postagem explicando como coloca um, gadjet, de noticias relacionadas tipo esse teu, faz tempo qui procuro algo assim pro meu blog de noticias entao como atualizo toda hora um desse seria tudo de bom pra mim, Obg,
    Xero no Zoio

    ResponderExcluir
  2. Eike, infelizmente nao deu certo comigo!
    o que pode ter saido errado já que eu fiz todo o passo a passo... bjs mestra!

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube