InícioAjuda com slide
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1 • Compartilhe
Ajuda com slide
por thisnessiex 10.05.13 18:32
Qual é minha questão:
Alguém poderia me ajudar a conseguir esse código e adaptar ele para windget, ou colocar na folha de css...
http://imperiodohtml.tumblr.com/slide
Endereço do meu fórum:
http://bsavatarsignature.forumeiros.com
Versão do fórum:
PHPBB2
Alguém poderia me ajudar a conseguir esse código e adaptar ele para windget, ou colocar na folha de css...
http://imperiodohtml.tumblr.com/slide
Endereço do meu fórum:
http://bsavatarsignature.forumeiros.com
Versão do fórum:
PHPBB2
Última edição por thisnessiex em 10.05.13 19:48, editado 1 vez(es)
thisnessiex- Novo Membro
- Membro desde : 10/05/2013
Mensagens : 2
Pontos : 4
Re: Ajuda com slide
por Diehl 10.05.13 19:09
Olá.
Posso te fazer uma sugestão? Porque não coloca o slide como "Mensagem na Página Inicial" (assim ele ficaria posicionado no centro do fórum, logo abaixo ao menu).
Se aceitares fazer isso, podemos colocar o slide no teu fórum da seguinte forma.
Vá até:
Aqui vamos criar uma nova página HTML.
Título - Ponha um título qualquer;
Você deseja utilizar o início e o final da página do seu fórum ? - Marque a opção "não";
Usar esta página como página inicial? - Marque a opção "não";
Código HTML - Adicione o código abaixo.
Feito isso, vamos colocar o slider na página inicial do fórum. Para isso, vá até:
Lá teremos as seguintes opções;
Assunto da mensagem - Pode deixar em branco;
Conteúdo da mensagem - Adicione o código abaixo.
Caso tu não goste da posição onde o slide fica com esse breve "tutorial", é só avisar, daí nós podemos adaptar ainda mais o código para poder utilizá-lo como widget.
Posso te fazer uma sugestão? Porque não coloca o slide como "Mensagem na Página Inicial" (assim ele ficaria posicionado no centro do fórum, logo abaixo ao menu).
Se aceitares fazer isso, podemos colocar o slide no teu fórum da seguinte forma.
Vá até:
Painel de Controle
Módulos
Aqui vamos criar uma nova página HTML.
Título - Ponha um título qualquer; Você deseja utilizar o início e o final da página do seu fórum ? - Marque a opção "não"; Usar esta página como página inicial? - Marque a opção "não"; Código HTML - Adicione o código abaixo.- Código:
<html>
<head>
<title>Slide Box! </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" ></script>
<script type="text/javascript" src="http://contamais.com.br/scripts/comum.js"></script>
<script type="text/javascript" src="http://contamais.com.br/scripts/coin-slider.min.js"> </script>
<script type="text/javascript" src="http://contamais.com.br/scripts/jquery.beforeafter.min.js"> </script>
<script type="text/javascript" src="http://contamais.com.br/scripts/jquery.jcarousel.min.js"> </script>
<script type="text/javascript" src="http://contamais.com.br/scripts/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="http://contamais.com.br/scripts/jquery.timers-1.2.min.js"></script>
<script type="text/javascript" src="http://contamais.com.br/scripts/content-slider.js"></script>
<script type="text/javascript" src="http://contamais.com.br/scripts/autocomplete.js"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({
width: 617,
height: 282,
spw: 1, // squares per width
sph: 1, // squares per height
delay: 3000, // delay between images in ms
sDelay: 30, // delay beetwen squares in ms
opacity: 0.8, // opacity of title and navigation
titleSpeed: 500, // speed of title appereance in ms
effect: 'rain', // random, swirl, rain, straight
navigation: 'buttons', // prev next and buttons
links : true, // show images as links
hoverPause: true // pause on hover
});
});
</script>
<script type="text/javascript" src="http://assets.tumblr.com/assets/scripts/tumblelog.js?8d55c8854a45d258250862dce1e6f8b7"></script><meta http-equiv="x-dns-prefetch-control" content="off"/></head>
<style>
.block-slider {
display: block;
width: 617px;
height: 282px;
overflow: hidden;
}
.block-slider .coin-slider { overflow: hidden; zoom: 1; position: relative; border-radius: 14px; position: relative; }
.block-slider .coin-slider a { text-decoration: none; outline: none; border: none; }
.block-slider .cs-buttons { font-size: 0px; position: absolute !important; bottom:15px; left:550px !important; margin: 0 !important; z-index: 1500; }
.block-slider .cs-buttons a { margin-left: 5px; height: 10px; width: 7px; float: left; background-color: #ffffff; text-indent: -1000px; }
.block-slider .cs-buttons a.cs-active { background-color: #469583; }
.block-slider .cs-title {
position: absolute;
left: 0;
width: 580px;
padding: 10px;
font-size: 18px;
font-weight: bold;
color: #fff;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;text-transform:uppercase;
bottom: 5px !important;
line-height:14px;
background-color: transparent;
}
.block-slider .cs-back-title{
position: absolute;
width: 620px;
height: 40px;
bottom: 0;
left: 0;
margin: 0;
z-index: 1000;
background-color: #7dbfb0;
}
.block-slider .cs-prev,
.block-slider .cs-next { display: none; }
.block-tags li {
display: inline;
}
.block-tags a.tag {
color: #cc3399;
text-decoration: none;
font-size: 12px;
font-weight: bold;
}
h1{
background: #fc1329;
bottom: 48px;
color: #FFFFFF;
font-family: Arial, sans-serif;
font-size: 21px;
font-style: none;
font-weight: bold;
line-height: 27px;
margin: 0;
overflow: hidden;
padding: 2px 15px;
position: absolute;
}
.meuslide {position:fixed; margin-left:50px;}
#corpo{text-align:left; margin: auto; width: 755px;}
.caixa {background-color: transparent; padding: 7px;}
</style>
<body><div id=corpo><div class=meuslide>
<div class=caixa><div class="block-slider">
<div id="coin-slider">
<a href="/">
<img src="http://static.tumblr.com/kflakjl/3pMm985ry/slide1.png" >
<span>
Seu Titulo aqui bem Curto.
</span>
</a>
<a href="/">
<img src="http://static.tumblr.com/kflakjl/92xm985z8/slide2.png" >
<span>
Seu Titulo aqui bem Curto.
</span>
</a>
<a href="/">
<img src="http://static.tumblr.com/kflakjl/kH8m9869k/slide3.png" >
<span>
Seu Titulo aqui bem Curto.
</span>
</a>
<a href="/">
<img src="http://static.tumblr.com/kflakjl/DMDm986e4/slide4.png" >
<span>
Seu Titulo aqui bem Curto.
</span>
</a>
<a href="/">
<img src="http://static.tumblr.com/kflakjl/ajfm986rp/slide5.png" >
<span>
Seu Titulo aqui bem Curto.
</span>
</a>
</div>
</html>
Feito isso, vamos colocar o slider na página inicial do fórum. Para isso, vá até:
Lá teremos as seguintes opções;
Assunto da mensagem - Pode deixar em branco; Conteúdo da mensagem - Adicione o código abaixo.- Código:
<iframe frameborder="0" marginwidth="0" marginheight="0" scrolling="No" width="100%" height="100" style= " top: 0%; left: 0%;height: 300px;width: 100%;" src="URL-DA-PAGINA-CRIADA"></iframe>
Caso tu não goste da posição onde o slide fica com esse breve "tutorial", é só avisar, daí nós podemos adaptar ainda mais o código para poder utilizá-lo como widget.
Diehl- ****
- Membro desde : 30/09/2010
Mensagens : 221
Pontos : 377
Re: Ajuda com slide
por thisnessiex 10.05.13 19:46
Muito obrigada pela sugestão, deu super certo e ficou exatamente como eu queria, e ate melhor (:
thisnessiex- Novo Membro
- Membro desde : 10/05/2013
Mensagens : 2
Pontos : 4
Tópicos semelhantes» Slide
» Como colocar um mini slide de promoção na pagina do portal como esse ae!(ajuda ae)
» Slide criado no gerador de Slide não centraliza
» Slide top 5
» Slide
» Como colocar um mini slide de promoção na pagina do portal como esse ae!(ajuda ae)
» Slide criado no gerador de Slide não centraliza
» Slide top 5
» Slide
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
Facebook
Twitter
Youtube
