Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Ajuda 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

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Ajuda com slide

Mensagem 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


Última edição por thisnessiex em 10.05.13 19:48, editado 1 vez(es)
thisnessiex

thisnessiex
Novo Membro

Membro desde : 10/05/2013
Mensagens : 2
Pontos : 4

Ir para o topo Ir para baixo

Tópico resolvido Re: Ajuda com slide

Mensagem 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é:
Seta Painel de Controle :seta2: Módulos :seta2: HTML & JavaScript :seta2: Gestão das páginas HTML

Aqui vamos criar uma nova página HTML.
Seta curta Título - Ponha um título qualquer;
Seta curta Você deseja utilizar o início e o final da página do seu fórum ? - Marque a opção "não";
Seta curta Usar esta página como página inicial? - Marque a opção "não";
Seta curta 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é:
Seta Painel de Controle :seta2: Visualização :seta2: Página Inicial :seta2: Geral :seta2: Mensagem na Página Inicial

Lá teremos as seguintes opções;
Seta curta Assunto da mensagem - Pode deixar em branco;
Seta curta 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

Diehl
****

Membro desde : 30/09/2010
Mensagens : 221
Pontos : 377

Ir para o topo Ir para baixo

Tópico resolvido Re: Ajuda com slide

Mensagem 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

thisnessiex
Novo Membro

Membro desde : 10/05/2013
Mensagens : 2
Pontos : 4

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

Permissões neste sub-fórum
Não podes responder a tópicos