Slide com Miniaturas para Blogger

Coloque um Slide com miniaturas laterais perfeito para seu blog.

Apresentamos para você mais uma opção de slide para blogger. Esse slide com miniaturas é perfeito para destacar suas melhores postagens e/ou algo de sua preferência, pela sua funcionalidade e beleza.

Para mais slides acesse, o menu  slides.

O seu script é leve e portanto não afetará tanto o carregamento de seu blog. Sua configuração é simples mas requer atenção para que não tenha erros e desfigure seu slide ou que afete o rendimento de seu blog, portanto, faça o tutorial com bastante atenção.

Se você deseja um slide prático, leve, cheio de estilo e principalmente que funciona muito bem, veja abaixo no tutorial e instale em seu blog agora mesmo.

 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

1- Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

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

3- Logo ACIMA, cole o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

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

5- Logo ACIMA, cole o seguinte código:

/* Featured */
#featured{
  float:left;
  width:620px;
  height:292px;
  padding:0;
  margin-bottom:20px;
  position:relative;
  overflow:hidden;
}
#featured ul.ui-tabs-nav{
  position:absolute;
  top:0;
  left:415px;
  list-style:none;
  padding:0;
  margin:0;
  width:205px;
  height:292px;
  overflow:auto;
  overflow-x:hidden;
  z-index:100;
  border:0px;
}
#featured ul.ui-tabs-nav li{
  padding:0 0 0 15px;
}
#featured ul.ui-tabs-nav li img{
  float:left;
  margin:0 5px 0 0;
  background:#fff;
  padding:3px;
  width:70px !important;
  height: 57px !important;
}
#featured ul.ui-tabs-nav li span{
  position:relative;
  left:0;
  top:13%;
  line-height:1.3em;
}
#featured li.ui-tabs-nav-item a{
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW0crP5UbJmK-sFhfy6I9mumxNgKkKq2Ni3tU9_e74sIlEGLH2ituA2N0YRJKawiHIrK5Z6LYsFUV1JBma1pl-OA6W0FHPPtNlAgBQePcaLRoLJf0toCWlKhdVYtoEc1eXRUiFgEFStMw/s1600/panel-bg.jpg) no-repeat;
  color:#fff;
  display:block;
  padding:5px;
  height:63px;
  text-decoration:none;
  line-height:1.2em;
  outline:none;
  border:0px;
}
#featured li.ui-tabs-selected{
  background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLmTbvZXR8_0qf2OaP5CkdnhZGH6Km_mk0SPS4sbfCP-cV0JwbKhawnkSw_Gdl28PO2_m2E1gRzp_aF8ywstfp_mxdTsoKDIe7hvwYmLgsGYRIZd9-ItKeoewxbUpsUMJVGJB1hcPuBmU/s1600/arrow.png') center left no-repeat;
  z-index:100;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
  background:#f8ac00;
  color:#333
}
#featured .ui-tabs-panel{
  width:430px;
  height:292px;
  position:relative;
  padding:0;
  margin:0;
  z-index:50;
}
#featured .ui-tabs-panel img{
  width:430px !important;
  height:290px !important;
  z-index:50;
}
#featured .ui-tabs-panel .info{
  position:absolute;
  padding:5px 10px;
  bottom:0;
  left:0;
  overflow:hidden;
  height:63px;
  width:410px;
  background:#111;
  opacity:0.85;
  filter:alpha(opacity=85);
  .width: 100%; /* IE */
  z-index:50;
}
#featured .info h3{
  font-size:20px;
  padding:0;
  margin:0;
  overflow:hidden
}
#featured .info p{
  margin:0;
  line-height:1.4em;
  color:#fff
}
#featured .info a, #featured .info a:visited{
  text-decoration:none;
  color:#f8ac00
}
#featured .info a:hover{
  text-decoration:underline;
}
#featured .ui-tabs-hide{
  display:none
}

* Se você tem experiência com CSS, pode alterar alguns trechos e personalizar a seu gosto.

6- Clique em "Salvar Modelo".

7- No menu lateral de seu Blogger, clique em "Layout".

8- Clique em "Adicionar um gadget" e escolha por "HTML/Javascript".

9- Dentro do conteúdo do gadget coloque o seguinte código:

<div id="featured">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item" id="nav-fragment-1"><a href="#fragment-4"><img alt="testing" height="60" src="http://i42.tinypic.com/axitsg.jpg" width="80"><span>Titulo do post 1</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-3"><img alt="testing" height="60" src="http://i40.tinypic.com/2irxnhv.png" width="80"><span>Titulo do post 2</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-2"><img alt="testing" height="60" src="http://i43.tinypic.com/2rqilbl.jpg" width="80"><span>Titulo do post 3</span></a></li>
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-4"><a href="#fragment-1"><img alt="testing" height="60" src="http://i40.tinypic.com/358vts7.jpg" width="80"><span>Titulo do post 4</span></a></li>
</ul>
<!-- First Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-4" style="">
<img alt="testing" height="290" src="http://i42.tinypic.com/axitsg.jpg" width="430">
<div class="info">
<h3><a href="LINK DA POSTAGEM">Titulo do post 1</a></h3>
<p>Coloque aqui uma breve descrição da postagem em destaque ...<a href="LINK DA POSTAGEM">LEIA MAIS..</a></p>
</div>
</div>
<!-- Second Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-3" style="">
<img alt="testing" height="290" src="http://i40.tinypic.com/2irxnhv.png" width="430">
<div class="info">
<h3><a href="LINK DA POSTAGEM">Titulo do post 2</a></h3>
<p>Coloque aqui uma breve descrição da postagem em destaque ...<a href="LINK DA POSTAGEM">LEIA MAIS..</a></p>
</div>
</div>
<!-- Third Content -->
<div class="ui-tabs-panel" id="fragment-2" style="opacity: 0.5898303742965963;">
<img alt="testing" height="290" src="http://i43.tinypic.com/2rqilbl.jpg" width="430">
<div class="info">
<h3><a href="LINK DA POSTAGEM">Titulo do post 3</a></h3>
<p>Coloque aqui uma breve descrição da postagem em destaque ...<a href="LINK DA POSTAGEM">LEIA MAIS..</a></p>
</div>
</div>
<!-- Fourth Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-1" style="">
<img alt="testing" height="290" src="http://i40.tinypic.com/358vts7.jpg" width="430">
<div class="info">
<h3><a href="LINK DA POSTAGEM">Titulo do post 4</a></h3>
<p>Coloque aqui uma breve descrição da postagem em destaque ...<a href="LINK DA POSTAGEM">LEIA MAIS..</a></p>
</div>
</div>
</div>

Atenção para as partes destacadas:

Em VERMELHO, troque pelos urls das imagens que aparecerão no slide.

Em AZUL, troque pelos títulos das postagens em destaque.

Em VERDE, troque pelos links das postagens em destaque.

10- Clique em "Salvar". Arraste o gadget para a parte que deseja que o slide apareça e clique em "Salvar Organização".

11- Vá em seu blog e veja o resultado.

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