17 de mai. de 2010

Slide com menu





Trouxe para vocês mais um slide que acredito ainda não havia aparecido por essas bandas dos blogs de tutoriais brasileiros. Esse slide possui um menu numérico onde que vai atualizando naturalmente e  também o visitante poderá clicar para ver as dicas.
Com ele é possível linkar o que quiser. Uma boa dica para quem não possui muitos marcadfores é linka-los no slide com uma bela imagem que possa de alguma forma representar seu marcador.
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
Então vamos ao que interessa.

Serve ao novo e antigo modelo de template do Blogger



Vá até o HTML de seu blog e procure pelo código:
]]></b:skin>



Agora acima dele cole o código abaixo.



/* Slide----------------------------------------------- */
#jFlowSlide{
background:#f8f8f8;/*cor de fundo do slide*/
border: 6px double #ccc;
text-shadow: 2px 3px 4px #ccc;
font-size: 14px;
color: #000;
font-family: Georgia;
}
#jFlowSlide h2{
background: #ccc;/*cor de fundo do titulo*/
color: #fff;/*cor do titulo*/
font-size: 18px;/*tamanho das letras do titulo*/
text-shadow: 2px 3px 4px #808080;
font-family: Georgia;
padding: 20px 0 20px 4px;
}
.jFlowNext { padding: 20px 0; background: #000; color: #000;}
.jFlowPrev { padding: 20px 0; background: #000; color: #000;
}
#myController {
text-shadow: 1px 1px 1px #000;
width:712px; /*extenção do menu inferior*/
background:#ccc;/*cor de fundo do menu inferior*/
font-size: 13px;/*tamanho das letras do menu inferior*/
font-family: Georgia;
padding: 15px 0;
}
#myController span.jFlowSelected {
background:#808080;
margin-right:0px;
padding: 15px 0;
}
.slide-wrapper {
padding: 5px;
}
.slide-thumbnail {
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
width:100px;
float:left;
}
.slide-thumbnail img {display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px -6px;
  padding: 4px; max-width:320px;
}
.slide-details { width:350px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }

.jFlowControl, .jFlowPrev, .jFlowNext {
color:#FFF;
cursor:pointer;
padding-left:5px;
padding-right:5px;
padding-top:2px;
padding-bottom:2px;
}
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover {
background: #808080;
}


Agora abaixo do mesmo código ]]></b:skin>  cole este próximo código.




<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[

/* Copyright (c) 2008 Kean Loong Tan http://www.gimiti.com/kltan
 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * jFlow
 * Version: 1.2 (July 7, 2008)
 * Requires: jQuery 1.2+
 */

(function($) {

    $.fn.jFlow = function(options) {
        var opts = $.extend({}, $.fn.jFlow.defaults, options);
        var randNum = Math.floor(Math.random()*11);
        var jFC = opts.controller;
        var jFS =  opts.slideWrapper;
        var jSel = opts.selectedWrapper;

        var cur = 0;
        var timer;
        var maxi = $(jFC).length;
        // sliding function
        var slide = function (dur, i) {
            $(opts.slides).children().css({
                overflow:"hidden"
            });
            $(opts.slides + " iframe").hide().addClass("temp_hide");
            $(opts.slides).animate({
                marginLeft: "-" + (i * $(opts.slides).find(":first-child").width() + "px")
                },
                opts.duration*(dur),
                opts.easing,
                function(){
                    $(opts.slides).children().css({
                        overflow:"hidden"
                    });
                    $(".temp_hide").show();
                }
            );
          
        }
        $(this).find(jFC).each(function(i){
            $(this).click(function(){
                dotimer();
                if ($(opts.slides).is(":not(:animated)")) {
                    $(jFC).removeClass(jSel);
                    $(this).addClass(jSel);
                    var dur = Math.abs(cur-i);
                    slide(dur,i);
                    cur = i;
                }
            });
        });  
      
        $(opts.slides).before('<div id="'+jFS.substring(1, jFS.length)+'"></div>').appendTo(jFS);
      
        $(opts.slides).find("div").each(function(){
            $(this).before('<div class="jFlowSlideContainer"></div>').appendTo($(this).prev());
        });
      
        //initialize the controller
        $(jFC).eq(cur).addClass(jSel);
      
        var resize = function (x){
            $(jFS).css({
                position:"relative",
                width: opts.width,
                height: opts.height,
                overflow: "hidden"
            });
            //opts.slides or #mySlides container
            $(opts.slides).css({
                position:"relative",
                width: $(jFS).width()*$(jFC).length+"px",
                height: $(jFS).height()+"px",
                overflow: "hidden"
            });
            // jFlowSlideContainer
            $(opts.slides).children().css({
                position:"relative",
                width: $(jFS).width()+"px",
                height: $(jFS).height()+"px",
                "float":"left",
                overflow:"hidden"
            });
          
            $(opts.slides).css({
                marginLeft: "-" + (cur * $(opts.slides).find(":eq(0)").width() + "px")
            });
        }
      
        // sets initial size
        resize();

        // resets size
        $(window).resize(function(){
            resize();                        
        });
      
        $(opts.prev).click(function(){
            dotimer();
            doprev();
          
        });
      
        $(opts.next).click(function(){
            dotimer();
            donext();
          
        });
      
        var doprev = function (x){
            if ($(opts.slides).is(":not(:animated)")) {
                var dur = 1;
                if (cur > 0)
                    cur--;
                else {
                    cur = maxi -1;
                    dur = cur;
                }
                $(jFC).removeClass(jSel);
                slide(dur,cur);
                $(jFC).eq(cur).addClass(jSel);
            }
        }
      
        var donext = function (x){
            if ($(opts.slides).is(":not(:animated)")) {
                var dur = 1;
                if (cur < maxi - 1)
                    cur++;
                else {
                    cur = 0;
                    dur = maxi -1;
                }
                $(jFC).removeClass(jSel);
                //$(jFS).fadeOut("fast");
                slide(dur, cur);
                //$(jFS).fadeIn("fast");
                $(jFC).eq(cur).addClass(jSel);
            }
        }
      
        var dotimer = function (x){
            if((opts.auto) == true) {
                if(timer != null)
                    clearInterval(timer);
              
                timer = setInterval(function() {
                        $(opts.next).click();
                        }, 10000);
            }
        }

        dotimer();
    };
  
    $.fn.jFlow.defaults = {
        controller: ".jFlowControl", // must be class, use . sign
        slideWrapper : "#jFlowSlide", // must be id, use # sign
        selectedWrapper: "jFlowSelected",  // just pure text, no sign
        auto: false,
        easing: "swing",
        duration: 400,
        width: "100%",
        prev: ".jFlowPrev", // must be class, use . sign
        next: ".jFlowNext" // must be class, use . sign
    };
  
})(jQuery);

//]]>
</script>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#myController&quot;).jFlow({
slides: &quot;#slides&quot;,
controller: &quot;.jFlowControl&quot;, // must be class, use . sign
slideWrapper : &quot;#jFlowSlide&quot;, // must be id, use # sign
selectedWrapper: &quot;jFlowSelected&quot;, // just pure text, no sign
auto: true, //auto change slide, default true
width: &quot;700px&quot;,
height: &quot;265px&quot;,
duration: 100,
prev: &quot;.jFlowPrev&quot;, // must be class, use . sign
next: &quot;.jFlowNext&quot; // must be class, use . sign
});
});
</script>


Vá agora até "Elementos de página" e clique em "Adicionar um widget, ao abrir a janela escolha a opção HTML/Javascript e cole então este código abaixo fazendo as modificações onde se pede. Salve e pronto







<div class="jflow-content-slider">
<div id="slides">

<div class="slide-wrapper"><div class="slide-thumbnail">
<img alt="" src="ENDEREÇO DA IMAGEM 1" /></div>
<div class="slide-details">
<span ><a href="ENDEREÇO DO SEU LINK 1"><h2><b>LINK 1</b></h2></a></span>
<div class="description">
ESCREVA AQUI ALGO SOBRE O LINK 1
</div>
</div>
<div class="clear"></div></div>

<div class="slide-wrapper"><div class="slide-thumbnail">
<img alt="" src="ENDEREÇO DA IMAGEM 2" /></div>
<div class="slide-details">
<span ><a href="ENDEREÇO DO SEU LINK 2"><h2><b>LINK 2</b></h2></a></span>
<div class="description">
ESCREVA AQUI ALGO SOBRE O LINK 2
</div>
</div>
<div class="clear"></div></div>

<div class="slide-wrapper"><div class="slide-thumbnail">
<img alt="" src="ENDEREÇO DA IMAGEM 3" /></div>
<div class="slide-details">
<span ><a href="ENDEREÇO DO SEU LINK 3"><h2><b>LINK 3</b></h2></a></span>
<div class="description">
ESCREVA AQUI ALGO SOBRE O LINK 3
</div>
</div>
<div class="clear"></div></div>

<div class="slide-wrapper"><div class="slide-thumbnail">
<img alt="" src="ENDEREÇO DA IMAGEM 4" /></div>
<div class="slide-details">
<span><a href="ENDEREÇO DO SEU LINK 4"><h2><b>LINK 4</b></h2></a></span>
<div class="description">
ESCREVA AQUI ALGO SOBRE O LINK 4
</div>
</div>
<div class="clear"></div></div>

<div class="slide-wrapper"><div class="slide-thumbnail">
<img alt="" src="ENDEREÇO DA IMAGEM 5" /></div>
<div class="slide-details">
<span ><a href="ENDEREÇO DO SEU LINK 5"><h2><b>LINK 5</b></h2></a></span>
<div class="description">
ESCREVA AQUI ALGO SOBRE O LINK 5
</div>
</div>
<div class="clear"></div></div>

<div class="slide-wrapper"><div class="slide-thumbnail">
<img alt="" src="ENDEREÇO DA IMAGEM 6" /></div>
<div class="slide-details">
<span><a href="ENDEREÇO DO SEU LINK 6"><h2><b>LINK 6</b></h2></a></span>
<div class="description">
ESCREVA AQUI ALGO SOBRE O LINK 6
</div>
</div>
<div class="clear"></div></div>

<div class="slide-wrapper"><div class="slide-thumbnail">
<img alt="" src="ENDEREÇO DA IMAGEM 7" /></div>
<div class="slide-details">
<span><a href="ENDEREÇO DO SEU LINK 7"><h2><b>LINK 7</b></h2></a></span>
<div class="description">
ESCREVA AQUI ALGO SOBRE O LINK 7
</div>
</div>
<div class="clear"></div></div>

<div class="slide-wrapper"><div class="slide-thumbnail">
<img alt="" src="" /></div>
<div class="slide-details">
<span ><b></b></span>
<div class="description"></div></div><div class="clear"></div></div>
</div>

<div id="myController">
<span class="jFlowPrev">Final ►</span>

<span class="jFlowControl">LINK 1</span>
<span class="jFlowControl">LINK 2</span>
<span class="jFlowControl">LINK 3</span>
<span class="jFlowControl">LINK 4</span>
<span class="jFlowControl">LINK 5</span>
<span class="jFlowControl">LINK 6</span>
<span class="jFlowControl">LINK 7</span>


<span class="jFlowNext">◄ Início</span>
</div>
<div class="clear"></div></div>



Visto em Tips o Triks

12 comentários:

  1. Fiz um demo aqui: testesbdj.blogspot.com

    Achei bem legal!

    ResponderExcluir
  2. oi
    eu achei esse menu muito interesante mais antes tentar fazer no meu blog eu gostaria de saber, o que acontece se eu não hospedar os URL que vc pede pra hospedar no google site? eu não entendo como hospedar URL eu fui até o google site e não entendi muito bem. eu tenho que criar um site e nesse site add essas URL? Se puder me dá algumas dicas sobre como hospedar url no google site eu te agradeço, eu até tentei procurar aqui no seu blog algo sobre isso mais tá tudo muito lento nessa máquina. Segunda eu volto pra ver sua resposta, se puder me dá umas dicas eu te agradeço se não puder tudo bem. tenha um bom fim de semana

    ResponderExcluir
  3. Não conseguir montar esse menu, achei muito legal pena que não conseguir, dá erro em uma parte do código, como eu sei que vc não vai me responder então eu nem vou colar a parte que deu erro. Mais valeu suas dicas são sempre muito boas. Eu precisava de uma enquete com imagem vc sabe algum site que ou codigo de enquete com imagem? bom dia pra vc
    gil-santos@msn.com

    ResponderExcluir
  4. ai cara ajudou mto ajudou mto msm (: vlw.

    mais tem como vc fazer transparente? =D

    ResponderExcluir
  5. Como fazer para diminuir largura e altura Slide com menu eu gostei preciso sua ajuda ok.

    ResponderExcluir
  6. Respostas
    1. Como faco para alterar a largura

      Excluir
    2. como faco para alterar a largura do eslider?

      Excluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube