Slide com Destaque Vertical para Blogger

Slide profissional com destaque vertical para título e descrição de suas melhores postagens.

Quer destacar suas melhores postagens? Quer chamar atenção para seus melhores trabalhos? Quer mostrar algo de muito importante? Que tal colocar um slide profissional em seu blog e realizar tudo isso?

Mais um slide que o ProDeveloper ensinará você a colocar em seu blogger (para mais slides, acesse o menu lateral "slides") com um visual muito legal e principalmente funcional, leve e fácil de instalar e configurar. É esse o Slide com Destaque Vertical para seu blog que apresenta imagens com títulos e descrições e que você pode colocar em seu blog em pequenos passos.

Configurações

* Hospede imagens relativas a seus posts com um tamanho de 600x320 px.

* O slide tem um tamanho fixo de 582x300 px sendo que pode ficar desigual em seu blog, para isso altere o Csspara que fique da maneira correta.

* A configuração por Css pode deixar seu slide bagunçado, portanto só altere caso saiba o que está fazendo.


 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Instalando o Slide

1- Acesse seu blogger, vá em "Layout", clique em "Adicionar um gadget" e escolha por "HTML/Javascript".

2- Copie o código abaixo fazendo as alterações necessárias destacadas em VERMELHO e cole dentro do gadget criado.
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="LINK DA IMAGEM" />
<span><strong><a href="LINK DA POSTAGEM">Título 1</a></strong>
<p>Add aqui texto referente a postagem ...</p>
</span>
</li>
<li class="s3sliderImage">
<img src="LINK DA IMAGEM" />
<span><strong><a href="LINK DA POSTAGEM">Título 2</a></strong>
<p>Add aqui texto referente a postagem ...</p>
</span>
</li>
<li class="s3sliderImage">
<img src="LINK DA IMAGEM" />
<span><strong><a href="LINK DA POSTAGEM">Título 3</a></strong>
<p>Add aqui texto referente a postagem ...</p>
</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
3- Clique em "Salvar", arraste o gadget para a área desejada e clique em "Salvar Organização".

4- Agora vá em "Modelo" e depois em "Editar HTML".

5- Clique no código de seu template, pressione "CTRL+F" e pesquise por  </head>

6- Cole o código abaixo ACIMA da tag pesquisada.
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/* ------------------------------------------------------------------------
s3Slider
Developped By: Boban Karišik -> http://www.serie3.info/
        CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0
Copyright: Feel free to redistribute the script/modify it, as
   long as you leave my infos at the top.
-------------------------------------------------------------------------- */

(function($){ 
    $.fn.s3Slider = function(vars) {     
      
        var element     = this;
        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var current     = null;
        var timeOutFn   = null;
        var faderStat   = true;
        var mOver       = false;
        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
        var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
          
        items.each(function(i) {
  
            $(items[i]).mouseover(function() {
               mOver = true;
            });
          
            $(items[i]).mouseout(function() {
                mOver   = false;
                fadeElement(true);
            });
          
        });
      
        var fadeElement = function(isMouseOut) {
            var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
            thisTimeOut = (faderStat) ? 10 : thisTimeOut;
            if(items.length > 0) {
                timeOutFn = setTimeout(makeSlider, thisTimeOut);
            } else {
                console.log("Poof..");
            }
        }
      
        var makeSlider = function() {
            current = (current != null) ? current : items[(items.length-1)];
            var currNo      = jQuery.inArray(current, items) + 1
            currNo = (currNo == items.length) ? 0 : (currNo - 1);
            var newMargin   = $(element).width() * currNo;
            if(faderStat == true) {
                if(!mOver) {
                    $(items[currNo]).fadeIn((timeOut/6), function() {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        } else {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        }
                    });
                }
            } else {
                if(!mOver) {
                    if($(itemsSpan[currNo]).css('bottom') == 0) {
                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    } else {
                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    }
                }
            }
        }
      
        makeSlider();
    }; 
})(jQuery); 
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>
7- Pesquise agora por ]]></b:skin>

8- ACIMA da tag pesquisada cole o seguinte código:
#s3slider {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 3px double #CCCCCC;
    height: 300px;
    margin-bottom: 25px;
    margin-top: 0;
    overflow: hidden;
    position: relative;
    text-shadow: 0 1px 0 #000000;
    width: 582px;
}
#s3sliderContent {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 300px;
    list-style: none outside none;
    margin-left: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 582px;
    top:-2px;
  
}
.s3sliderImage {
    float: left;
    position: relative;
    width: 583px;
}
.s3sliderImage span {
    background-color: #000000;
    color: #FFFFFF;
    display: none;
    font-size: 12px;
    height: 300px;
    line-height: 16px;
    opacity: 0.7;
    overflow: hidden;
    padding: 10px 13px;
    position: absolute;
    right: 0;
    top: 0;
    width: 180px;
}
.s3sliderImage strong a {
    font-family: 'Myriad Pro',Helvetica,Arial,Sans-Serif;
    font-size: 20px;
}
.s3sliderImage strong a:hover {
    color: #FFFFFF;
}
9- Clique em "Visualizar", estando tudo correto clique em "Salvar Modelo".

Feito isso da maneira correta, seu slide estará pronto.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.

Comentários

 
Copyright ©2015 Canal Do MatheusBR Todos os Direitos reservados | Designed by Sinistro de BTN