Power Pixel Fórum - O melhor conteúdo você encontra aqui!
Redes Sociais:

Você não está conectado. Conecte-se ou registre-se

Criando barra de notícias igual da Habbid!

Mensagem - Página 2 de 3

Membro

Relembrando a primeira mensagem :

Vá no seu host (estou usando freewebs) e crie uma página como: "frame.html"
(Não se esqueça de por o .html no final!)

Copie esse código:

Código:
<!-- início do codigo -->
<link href='http://familia13.webs.com/Scripts/Slide1.css' rel='Stylesheet' type='text/css'/>
<script src='http://familia13.webs.com/scripts/jqueryslide.js' type='text/javascript'></script>
<script src='http://familia13.webs.com/scripts/jqueryplugin.js' type='text/javascript'></script>
<!-- Fim do codigo -->
<!-- início do codigo01 -->
<script type='text/javascript'>
   
      var theInt = null;
      var $crosslink, $navthumb;
      var curclicked = 0;
      var qtdDestaques = 4;
      
      theInterval = function(cur){
         clearInterval(theInt);
         
         if( typeof cur != 'undefined' )
            curclicked = cur;
         
         $crosslink.removeClass("active-thumb");
         $navthumb.eq(curclicked).parent().addClass("active-thumb");
            $(".stripNav ul li a").eq(curclicked).trigger('click');
         
         theInt = setInterval(function(){
            $crosslink.removeClass("active-thumb");
            $navthumb.eq(curclicked).parent().addClass("active-thumb");
            $(".stripNav ul li a").eq(curclicked).trigger('click');
            curclicked++;
            if( qtdDestaques == curclicked )
               curclicked = 0;
            
         }, 5000);
      };
      
      $(function(){
         
         $("#main-photo-slider").codaSlider();
         
         $navthumb = $(".nav-thumb");
         $crosslink = $(".cross-link");
         
         $navthumb
         .click(function() {
            var $this = $(this);
            theInterval($this.parent().attr('href').slice(1) - 1);
            return false;
         });
         
         theInterval();
      });
      
   function clipImage() {
      // clip:rect('top', 'right', 'bottom', 'left')
      document.getElementById("img1").style.clip="rect(0px,41px,27px,14px)";document.getElementById("img2").style.clip="rect(0px,41px,27px,14px)";document.getElementById("img3").style.clip="rect(0px,41px,27px,14px)";document.getElementById("img4").style.clip="rect(0px,41px,27px,14px)";      
   }
</script>
<div class='slider-wrap'><div class='csw' id='main-photo-slider'><div class='panelContainer'>
<div class='panel'><div class='wrapper'>
<a href='Link 01' target='_self' title='Titulo 01'><img alt='Titulo 01' class='floatRight' height='185px' src='http://familia13.webs.com/Imagens/slide.PNG'/></a>
<div class='photo-meta-data'>
<div>
<span><a href='Link 01' target='_self' title='Titulo 01'>Frase 01 </a></span>
</div></div></div></div>
<div class='panel'><div class='wrapper'><a href='Link 02' target='_self' title='Titulo 02'><img alt='Titulo 02' class='floatRight' height='185px' src='http://familia13.webs.com/Imagens/slide.PNG'/></a>
<div class='photo-meta-data'>

<div>
<span><a href='Link 02' target='_self' title='Titulo 02'>Frase 02</a></span>
</div></div></div></div>
<div class='panel'><div class='wrapper'>
<a href='Link 03' target='_self' title='Titulo 03'><img alt='Titulo 03' class='floatRight' height='185px' src='http://familia13.webs.com/Imagens/slide.PNG'/></a>
<div class='photo-meta-data'>
<div>
<span><a href='Link 03' target='_self' title='Titulo 03'>Frase 03</a></span>
</div></div></div></div>
<div class='panel'><div class='wrapper'>
<a href='Link 04' target='_self' title='Titulo 04'><img alt='Titulo 04' class='floatRight' height='185px' src='http://familia13.webs.com/Imagens/slide.PNG'/></a>
<div class='photo-meta-data'>
<div>
<span><a href='Link 04' target='_self' title='habbidcast'>Frase 04</a></span>

</div></div></div></div>
</div></div>
<div id='borda'><div id='movers-row'>
<div>
<a class='cross-link active-thumb' href='#1'><img alt='Titulo 01' class='nav-thumb' id='img1' onclick='javascript:trackEvent(\'br_home_home_destaque\', \'Click Troca Destaque\', \'nearbr.com\');' src='http://i46.tinypic.com/dqnr5f.jpg'/></a></div><div>
<a class='cross-link active-thumb' href='#2'><img alt='Titulo 02' class='nav-thumb' id='img2' onclick='javascript:trackEvent(\'br_home_home_destaque\', \'Click Troca Destaque\', \'nearbr.com\');' src='http://i49.tinypic.com/o9oo5k.jpg'/></a></div><div>
<a class='cross-link active-thumb' href='#3'><img alt='Titulo 03' class='nav-thumb' id='img3' onclick='javascript:trackEvent(\'br_home_home_destaque\', \'Click Troca Destaque\', \'nearbr.com\');' src='http://i49.tinypic.com/24ljukm.jpg'/></a></div><div>
<a class='cross-link active-thumb' href='#4'><img alt='Titulo 04' class='nav-thumb' id='img4' onclick='javascript:trackEvent(\'br_home_home_destaque\', \'Click Troca Destaque\', \'nearbr.com\');' src='http://i45.tinypic.com/ayp078.jpg'/></a></div>
</div><script type='text/javascript'> clipImage(); </script></div></div>
<!-- Fim do codigo01 -->

Veja o resultado, depois vá editando a página de acordo com que você quiser...

Agora vá no seu site e copie o código:

Código:
<center><iframe src=http://seusite.webs.com/frame.html name=conteudo width=300 height=241 border="0" scrolling="no" frameborder="0"></iframe></center>
(na parte do seusite você bota o teu host e a pagina que você criou.

Resutaldo:

[Você precisa estar registrado e conectado para ver esta imagem.]


TUTORIAL BY: 'PhoeniX


Membro

Muito da hora, Como falaram, É mais ou menos editando um Loader !

Membro Platina

Poderíamos colocar aqui na PowerPixel =D

Membro Platina

Wireless , Antes de postar olhe sempre a data.
Cuidado com necro post.

Membro Platina

Já tem 2 Meses do ultimo POST.

Muito Legal Parabens.

Membro

Otimo , Obrigado por postar no POWER PIXEL

Membro Bronze

[Você precisa estar registrado e conectado para ver este link.] escreveu:Eu já tinha conseguido o código uma vez.Parabéns

Membro Prata

Super simples .. mas obrigado por postar . Wink

Membro Platina

Agora em todos fóruns que vejo tem essa barra '-'

Membro Platina

Muito Bom, vou usar no meu próximo site.

Mensagem - Página 2 de 3

Ir à página : Anterior  1, 2, 3  Seguinte

Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum