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

Power Pixel » Códigos e Tecnologia » O universo dos desenvolvedores » Layouts & CMSE » Criando barra de notícias igual da Habbid!

Criando barra de notícias igual da Habbid!

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

'PhoeniX

Membro


avatar
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

Ver perfil do usuário

Félix K

Membro Bronze


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

Ver perfil do usuário

Dankluck

Membro Bronze


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

2

Ver perfil do usuário

Decoder

Membro Platina


avatar
Noossa muito legal, parabéns.

Ver perfil do usuário http://www.power-pixel.net

Locknerd

Novato



mas , como mudo as fotos? S:

Ver perfil do usuário

Adf.ly

Membro Prata



[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. Razz brincadeira.

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

Ver perfil do usuário

pedro

Membro


avatar
ooo mto bom mas como eu crio as noticias?

Ver perfil do usuário

Decoder

Membro Platina


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

Ver perfil do usuário http://www.power-pixel.net

-Cezar

Membro Platina


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

Ver perfil do usuário

ThuG - LovE

Membro Elite


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

Ver perfil do usuário http://www.power-pixel.net

Wireless

Membro


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

Ver perfil do usuário

-Cezar

Membro Platina


avatar
Poderíamos colocar aqui na PowerPixel =D

Ver perfil do usuário

[J]υиιoя

Membro Platina


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

Ver perfil do usuário

-Cezar

Membro Platina


avatar
Já tem 2 Meses do ultimo POST.

Ver perfil do usuário

Douglas

Membro Platina


avatar
Muito Legal Parabens.

Ver perfil do usuário

Trony

Membro


avatar
Otimo , Obrigado por postar no POWER PIXEL

Ver perfil do usuário

'Pacini~

Membro Bronze


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

Ver perfil do usuário

Stranger

Membro Prata


avatar
Super simples .. mas obrigado por postar . Wink

Ver perfil do usuário http://www.power-pixel.net/

-Cezar

Membro Platina


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

Ver perfil do usuário

Brandow

Membro Platina


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

Ver perfil do usuário

Waary

Novato


avatar
O meu é webnode, onde coloco ?

Ver perfil do usuário

Renan

Membro Elite


avatar
Usuário: Waary
Ocorrências: +5
Motivo: Necropost
-----------------------
Tópico fechado

Ver perfil do usuário

Conteúdo patrocinado



Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

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