'PhoeniX • 06.03.11 13:24
Criando barra de notícias igual da Habbid! 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:
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:
Resutaldo:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
TUTORIAL BY: 'PhoeniX
(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>
Resutaldo:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
TUTORIAL BY: 'PhoeniX
Félix K • 06.03.11 14:08
Dankluck • 06.03.11 16:32
Locknerd • 27.03.11 11:36
pedro • 29.03.11 16:23
Wireless • 01.06.11 17:52![[J]υиιoя](https://i.imgur.com/Ty5FR.png)
Trony • 21.06.11 19:02
'Pacini~ • 21.06.11 21:00
Stranger • 21.06.11 21:19
Waary • 04.10.11 11:13
