Slide com menu

 DEMO

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