Slide Com Opções Laterais Para Blogger

Slide com alta definição para destacar seus melhores trabalhos.

Seus melhores posts com imagens em alta definição na página inicial do blog, essa é a proposta que apresentamos para você que desejar esse slide. Com ele, você poderá mostrar ou divulgar algo aos visitantes de seu blog de uma maneira que não passará despercebido pela possibilidade de colocar imagens maiores e ocupando a totalidade da largura disponibilizada em sua página.

Esse slide conta com opções laterais para passar manualmente para a visualização seguinte ou retornar a anterior, acima contém um espaço para o título da postagem referida com o link direto e na parte de baixo um controle que determina a posição do slide em questão e todos eles contendo o background com um efeito que o deixa transparente.

No tutorial abaixo, mostramos como instalar, configurar corretamente e até certas possibilidades de personalização para que você possa deixá-lo da melhor maneira possível em seu blog.
Antes de começar, hospede as imagens que farão parte de seu slide em um servidor de sua preferência. Recomendamos que sejam imagens com uma boa definição, acima de 900x380 px.

 OBSERVAÇÃO: Esse slide está configurado para aparecer somente na página inicial de seu blog.

 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.


Tutorial

>> Acesse seu Blogger, vá em "Modelo" e "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise por </head>

>> ACIMA da tag pesquisada cole o seguinte código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: &#39;en-US&#39;}
</script>
<script type='text/javascript'>
//<![CDATA[
/****************************
 Z-Kreations - simple Slider V2
****************************/
$(document).ready(function() {
    var slider = {};
     // Especificamos el id
    slider.initQuery = '#slider';
    //Variables
    slider.slider = $( slider.initQuery + " ul,ul"+slider.initQuery);
    slider.slides = slider.slider.find('li');
    slider.number = slider.slides.length;
    slider.actual = 0;
    slider.height = 0;
    slider.width = 0;
    // Calculamos el el alto y ancho de cada slide
    for(i=0;i<slider.number;i++)
    {
        var w = $(slider.slides[i]).width();
        var h = $(slider.slides[i]).height();
        slider.height = ( h > slider.height  ) ?  h : slider.height; 
        slider.width = ( w > slider.width  ) ? w : slider.width; 
    }
        slider.slider.css({
        overflow: "hidden",
        width: slider.width,
        height: slider.height,
        position: 'relative'
    });
    for (var i=0;i<slider.number;i++)
    {
        var sl = $(slider.slides[i]);
        sl.attr('class',sl.attr('class') + " slider-slide-"+i);
        sl.css({
        position : 'absolute',
        left : slider.width * i 
    });
}
//Ir hacia un slide seleccionado
    slider.go = function (where) {
        if (where == 'next')
        {
            slider.actual = ( slider.actual < slider.number-1) ? slider.actual*1 + 1 : 0;
        }
        else if (where == 'prev')
        {
            slider.actual = ( slider.actual > 0) ? slider.actual - 1 : slider.number-1;
        }
        else
        {
        slider.actual = where;
        }
        for (var i=0;i<slider.number;i++)
        {
        var sl = $(slider.slides[i]);
        sl.animate({
       left : slider.width * (i - slider.actual)
    },400);
  }
};
        //Controles del slider
        var autoSlider = setInterval(function () {
            slider.go("next");
            $("a.slider-button-"+slider.actual).click();
        },4000);
        slider.pages = '<ul class="controles-slider">';
            for (var i=0;i<slider.number;i++)
        {
        var sclass = (i==0) ? ' class="selected" ' : '';
        slider.pages = slider.pages + '<li' + sclass + '><a href="#slider-slide-'+i+'" class="slider-button-'+i+'"></a></li>'}
    
        slider.pages = slider.pages + '</ul>';
        slider.slider.after( slider.pages );
        $('ul.controles-slider li a').click(function () {
        clearInterval(autoSlider);
        slider.go( $(this).attr('href').substring(14) );
        $(this).parent().parent().find("li").attr("class","");
        $(this).parent().attr("class","selected");
        return false;
});
        //Controles del slider
        var autoSlider = setInterval(function () {
            slider.go("next");
        },4000);


//Agregamos los botones siguiente y atras
$(slider.initQuery).append("<a href='#next' class='anterior'>Anterior</a><a href='#next' class='siguiente'>Proxima</a>");
    //Boton adelante
    $(slider.initQuery + " .siguiente").click(function () {
    slider.go('next');
    $("a.slider-button-"+slider.actual).click();
    return false; 
    });
    //Boton atras
    $(slider.initQuery + " .anterior").click(function () {
    slider.go('prev');
    $("a.slider-button-"+slider.actual).click();
    return false; 
    });

    });
//]]>
</script>

>> Pesquise agora por ]]></b:skin>

>> ACIMA da tag pesquisada cole o seguinte código:
/*STARTED CSS SLIDER*/
#slider {
    margin: 0 auto;
    padding: 0;
    width: 900px; /*Tamanho do slider*/}
.slide {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiieB03SipsgH2EIWCrlomVFtDMx8qLmluVp7mS7xIhWWIc-arBQ3EHx3876NQqogzE0Mrta9p3Zmt4I0Lcq3vYTbzEMCQZshzeYcr5pmIFAFzA-jbG9Ttc_-PtH_3OBh1OxOkKMbXOMqjn/s1600/loading.gif") no-repeat scroll center center;
    display: block;
    height: 350px;
    list-style: none outside none;
    overflow: hidden;
    width: 900px;
}
.slide img {
    max-width: 1024; /*Tamanho maximo das imagens*/}
.anterior, .siguiente {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    display: block;
    font-family: Arial,Helvetica;
    font-size: 16px;
    font-weight: bold;
    line-height: 15px;
    padding: 20px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    top: 43%;
    z-index: 9999;
}
.anterior {
    left:0;
}
.siguiente {
    right:0;
}
.contenido-del-slider {
    border: 10px solid #FFFFFF;
    height: 350px;
    position: relative;
    width: 900px; /*Tamanho do slider*/}
.border-del-slider {
    background-color: #CCCCCC;
    box-shadow: 0 1px 2px #CCCCCC;
    display: block;
    height: 370px;
    margin: 25px auto;
    padding: 1px;
    width: 920px; /*Tamanho do slider com bordas*/}
.slide h1 {
    background-color: rgba(0, 0, 0, 0.65); /*Cor de fundo para o texto*/   
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    color: #FFFFFF; /*Cor do texto*/   
   display: block;
    font-family: Arial,Helvetica;
    font-size: 1.2em;
    font-weight: bold;
    left: 0;
    margin: 0;
    padding: 20px;
    position: absolute;
    text-shadow: 1px 1px 0 black;
    top: 0;
    width: 400px;
    z-index: 50;
}
ul.controles-slider {
    bottom: 0;
    left: 15px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
}
ul.controles-slider li {
    float: left;
}
ul.controles-slider li a {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px 10px 10px 10px;
    display: block;
    height: 10px;
    line-height: 1;
    margin-bottom: 10px;
    margin-right: 10px;
    text-indent: -9999px;
    width: 10px;
}
ul.controles-slider li.selected a {
    background-color: #00C2FF;
    box-shadow: 0 0 3px #00C2FF;
}
* Os comentários destacados em VERMELHO, indicam o que você pode alterar no CSS para adaptar de acordo com seu blog.

>> Pesquise agora por </header>

>> ABAIXO da tag pesquisada cole o seguinte código:
<!-- Featured Content Slider Started -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<nav><div class='border-del-slider'>
<div class='contenido-del-slider'>
<ul id='slider'>
        <li class='slide'>
            <img src='URL DA IMAGEM 1'/>
            <h1>SLIDE 1 TÍTULO <a href='LINK POST'>Mais informações &#187;</a></h1>
        </li>
        <li class='slide'>
            <img src='URL DA IMAGEM 2'/>
            <h1>SLIDE 2 TÍTULO <a href='LINK POST'>Mais informações &#187;</a></h1>
        </li>
        <li class='slide'>
            <img src='URL DA IMAGEM 3'/>
            <h1>SLIDE 3 TÍTULO <a href='LINK POST'>Mais informações &#187;</a></h1>
        </li>
        <li class='slide'>
            <img src='URL DA IMAGEM 4'/>
            <h1>SLIDE 4 TÍTULO <a href='LINK POST'>Mais informações &#187;</a></h1>
        </li>
</ul>
</div>
</div></nav>
</b:if></b:if>
<!-- Featured Content Slider End -->

Atenção para as partes destacadas

Em VERMELHO, substitua pelas urls das imagens que você hospedou.
Em AZUL, substitua pelos títulos referentes a cada slide.
Em VERDE, substitua pelos links referentes a cada postagem que o slide representa.

Observação: Caso desejar inserir mais slides, acrescente antes da tag </ul> um trecho de código como o abaixo fazendo as alterações necessárias:
<li class='slide'>
            <img src='URL DA IMAGEM 5'/>
            <h1>SLIDE 5 TÍTULO <a href='LINK POST'>Mais informações &#187;</a></h1>
        </li>

>> Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".

>> Vá em seu blog e veja como ficou.

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