Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

'PhoeniX 'PhoeniX  • 06.03.11 13:24

Criando barra de notícias igual da Habbid! Empty 06.03.11 13:24

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

Félix K Félix K  • 06.03.11 14:08

Criando barra de notícias igual da Habbid! Empty 06.03.11 14:08

Eu já tinha conseguido o código uma vez.Parabéns

Dankluck Dankluck  • 06.03.11 16:32

Criando barra de notícias igual da Habbid! Empty 06.03.11 16:32

Félix k- escreveu:Eu já tinha conseguido o código uma vez.Parabéns

2

Decoder Decoder  • 06.03.11 19:19

Criando barra de notícias igual da Habbid! Empty 06.03.11 19:19

Noossa muito legal, parabéns.

avatar Locknerd  • 27.03.11 11:36

Criando barra de notícias igual da Habbid! Empty 27.03.11 11:36

mas , como mudo as fotos? S:

avatar Adf.ly  • 27.03.11 12:08

Criando barra de notícias igual da Habbid! Empty 27.03.11 12:08

[Você precisa estar registrado e conectado para ver este link.] escreveu:mas , como mudo as fotos? S:

basta editar esse código conforme queira nos campos corretos, isso exije um pouco de conhecimento em HTML.

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 -->




Parabéns Phoenix, eu não sabia disso, também porque não me interesso mais. :P brincadeira.

Mas ta aí, legal o conteúdo do seu post. Piscadinha

pedro pedro  • 29.03.11 16:23

Criando barra de notícias igual da Habbid! Empty 29.03.11 16:23

ooo mto bom mas como eu crio as noticias?

Decoder Decoder  • 29.03.11 20:04

Criando barra de notícias igual da Habbid! Empty 29.03.11 20:04

Depende, você cria e configura os lincks e as imagens lá.
Você pode usar um SGC (sistema de gerenciamento de conteúdo)

-Cezar -Cezar  • 30.03.11 9:36

Criando barra de notícias igual da Habbid! Empty 30.03.11 9:36

Muito Bom!!
é tipo editando um loader de habbo retrô
[b]

ThuG - LovE ThuG - LovE  • 06.04.11 20:07

Criando barra de notícias igual da Habbid! Empty 06.04.11 20:07

[Você precisa estar registrado e conectado para ver este link.] escreveu:Noossa muito legal, parabéns.
2

Wireless Wireless  • 01.06.11 17:52

Criando barra de notícias igual da Habbid! Empty 01.06.11 17:52

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

-Cezar -Cezar  • 01.06.11 18:32

Criando barra de notícias igual da Habbid! Empty 01.06.11 18:32

Poderíamos colocar aqui na PowerPixel =D

[J]υиιoя [J]υиιoя  • 01.06.11 18:33

Criando barra de notícias igual da Habbid! Empty 01.06.11 18:33

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

-Cezar -Cezar  • 01.06.11 18:44

Criando barra de notícias igual da Habbid! Empty 01.06.11 18:44

Já tem 2 Meses do ultimo POST.

Douglas Douglas  • 03.06.11 10:06

Criando barra de notícias igual da Habbid! Empty 03.06.11 10:06

Muito Legal Parabens.

Trony Trony  • 21.06.11 19:02

Criando barra de notícias igual da Habbid! Empty 21.06.11 19:02

Otimo , Obrigado por postar no POWER PIXEL

'Pacini~ 'Pacini~  • 21.06.11 21:00

Criando barra de notícias igual da Habbid! Empty 21.06.11 21:00

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

Stranger Stranger  • 21.06.11 21:19

Criando barra de notícias igual da Habbid! Empty 21.06.11 21:19

Super simples .. mas obrigado por postar . Piscadinha

-Cezar -Cezar  • 21.06.11 21:23

Criando barra de notícias igual da Habbid! Empty 21.06.11 21:23

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

Brandow Brandow  • 21.06.11 21:33

Criando barra de notícias igual da Habbid! Empty 21.06.11 21:33

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

Waary Waary  • 04.10.11 11:13

Criando barra de notícias igual da Habbid! Empty 04.10.11 11:13

O meu é webnode, onde coloco ?

Renan Renan  • 04.10.11 13:25

Criando barra de notícias igual da Habbid! Empty 04.10.11 13:25

Usuário: Waary
Ocorrências: +5
Motivo: Necropost
-----------------------
Tópico fechado
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum

BH Servers

Recomendamos a BH Servers com proteção DDOS gratuita em Cloud Server de alta performance. Entrega imediata. Saiba mais aqui.