Slide de destaques

Views:
<style type="text/css">
* html #jslider-container{
width: 1080px; /*LARGURA DO SLIDE, MANTENHA COMO ABAIXO*/
 }
.slider-box {
    background: #fafafa; /*COR DE FUNDO DO SLIDE*/
    border-radius: 5px 5px 5px 5px; /*ARREDONDAMENTO DO SLIDE*/
    border: 10px solid #E8657B !important; /*COR E ESPESSURA DA BORDA EXTERNA*/
-webkit-box-shadow: 2px 5px 5px -2px rgba(103,103,103,1);
 -moz-box-shadow: 2px 5px 5px -2px rgba(103,103,103,1);
 box-shadow: 2px 5px 5px -2px rgba(103,103,103,1);
padding:0px !important;
    margin: 0 auto;
margin-left: -30px; /*LEVA O SLIDE PARA A ESQUERDA, AJUSTE SE PRECISAR*/
    width: 1080px; /*LARGURA TOTAL DO SLIDE, MANTENHA COMO ACIMA*/
}
#slider-wrapper {
    margin: 0 auto;
    padding: 10px;
}
#jslider-container {
    border: 2px solid #FFFFFF; /*COR DA BORDA DAS MINIATURAS*/
    max-width: 945px;

    position: relative;
    text-align: left;
    z-index: 90;
}
#jslider-container .jslider_images ul{
 position:relative;
 width: 10000%;
 height:auto;
 left:0;
 list-style:none;
 margin:0;
 padding:0;
 border-spacing:0;
 overflow: visible;
 /*table-layout:fixed;*/
}
#jslider-container .jslider_images ul li{
 width:1%;
 line-height:0; /*opera*/
 float:left;
 font-size:0;
 padding:0 0 0 0 !important;
 margin:0 0 0 0 !important;
}

#jslider-container .jslider_images{
 position: relative;
 left:0;
 top:0;
 width:100%;
 height:100%;
 overflow:hidden;
}
#jslider-container .jslider_images a{
 width:100%;
 display:block;
 color:transparent;
}
#jslider-container img{
 max-width: none !important;
}
#jslider-container .jslider_images img{
 width:100%;
 border:none 0;
 max-width: none;
 padding:0;
}
#jslider-container a{
 text-decoration: none;
 outline: none;
 border: none;
}
#jslider-container  a.wsl{
 display:none;
}

/* separate */
#jslider-container .ws-title{
 position: absolute;
 display:block;
 bottom:20px;
 left:25px;
 margin-right:25px;
 z-index: 50;
 font-family: Arial,sans-serif; /*FONTE DOS TÍTULOS*/
 font-size: 17px; /*TAMANHO DA FONTE DOS TÍTULOS*/
 line-height: 24px;

}
#jslider-container .ws-title div,#jslider-container .ws-title span{
 display:inline-block;
 margin-top:10px;
 padding: 7px;
 background:#E8657B; /*COR DE FUNDO DAS CATEGORIAS*/
color: #ffffff; /*COR DA FONTE DAS CATEGORIAS*/
 font-weight: normal;
 border-radius:0;
 opacity:0.9;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);

}
#jslider-container .ws-title div{
 display:block;
 margin-top:10px;
 background:#000000; /*COR DE FUNDO DOS TÍTULOS*/
 color: #FFFFFF; /*COR DA FONTE DOS TÍTULOS*/
}

#jslider-container  .jslider_thumbs {
 font-size: 0px;
 position:absolute;
 overflow:auto;
 z-index:70;
}
#jslider-container .jslider_thumbs a {
 position:relative;
 text-indent: -4000px;
 color:transparent;
 opacity:0.85;
}
#jslider-container .jslider_thumbs a:hover{
 opacity:1;
}
#jslider-container .jslider_thumbs a:hover img{
 visibility:visible;
}
#jslider-container  .jslider_thumbs {
    right: -106px;
    top: 0;
 width:101px;
 height:100%;
}
#jslider-container  .jslider_thumbs div{
 position:relative;
 width:100%;
}
#jslider-container .jslider_thumbs  a img{
 margin:3px;
 text-indent:0;
    border: 5px solid #FFFFFF;/*COR DE BORDA DAS MINIATURAS EM ESTADO NORMAL*/
 max-width:none;
}
#jslider-container .jslider_thumbs .ws_selthumb img{
 border-color:#000000; /*COR DE BORDA DAS MINIATURAS ATIVAS*/
}

#jslider-container .jslider_images ul{
 animation: wsBasic 24s infinite;
 -moz-animation: wsBasic 24s infinite;
 -webkit-animation: wsBasic 24s infinite;
}
@keyframes wsBasic{0%{left:-0%} 8.33%{left:-0%} 16.67%{left:-100%} 25%{left:-100%} 33.33%{left:-200%} 41.67%{left:-200%} 50%{left:-300%} 58.33%{left:-300%} 66.67%{left:-400%} 75%{left:-400%} 83.33%{left:-500%} 91.67%{left:-500%} }
@-moz-keyframes wsBasic{0%{left:-0%} 8.33%{left:-0%} 16.67%{left:-100%} 25%{left:-100%} 33.33%{left:-200%} 41.67%{left:-200%} 50%{left:-300%} 58.33%{left:-300%} 66.67%{left:-400%} 75%{left:-400%} 83.33%{left:-500%} 91.67%{left:-500%} }
@-webkit-keyframes wsBasic{0%{left:-0%} 8.33%{left:-0%} 16.67%{left:-100%} 25%{left:-100%} 33.33%{left:-200%} 41.67%{left:-200%} 50%{left:-300%} 58.33%{left:-300%} 66.67%{left:-400%} 75%{left:-400%} 83.33%{left:-500%} 91.67%{left:-500%} }
</style>

<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
 <div class="jslider_images">
      <ul>

  <li><a href="LINK AQUI">
  <img src="ENDEREÇO HTTP DA IMAGEM AQUI" title="Aqui o nome do marcador"/>
  </a>Aqui a descrição do post ou da categoria</li>

  <li><a href="LINK AQUI">
  <img src="ENDEREÇO HTTP DA IMAGEM AQUI" title="Aqui o nome do marcador"/>
  </a>Aqui a descrição do post ou da categoria</li>

  <li><a href="LINK AQUI">
  <img src="ENDEREÇO HTTP DA IMAGEM AQUI" title="Aqui o nome do marcador"/>
  </a>Aqui a descrição do post ou da categoria</li>

  <li><a href="LINK AQUI">
  <img src="ENDEREÇO HTTP DA IMAGEM AQUI" title="Aqui o nome do marcador"/>
  </a>Aqui a descrição do post ou da categoria</li>

  <li><a href="LINK AQUI">
  <img src="ENDEREÇO HTTP DA IMAGEM AQUI" title="Aqui o nome do marcador"/>
  </a>Aqui a descrição do post ou da categoria</li>

  <li><a href="LINK AQUI">
  <img src="ENDEREÇO HTTP DA IMAGEM AQUI" title="Aqui o nome do marcador"/>
  </a>Aqui a descrição do post ou da categoria</li>

   </ul>
    </div>
 
 <div class="jslider_thumbs">
        <div>

<a href="LINK AQUI" title="NOME DO POST 1 AQUI">
<img src="ENDEREÇO HTTP DA MINIATURA 1 AQUI"/></a>

  <a href="LINK AQUI" title="NOME DO POST 2 AQUI">
<img src="ENDEREÇO HTTP DA MINIATURA 2 AQUI"/></a>

  <a href="LINK AQUI" title="NOME DO POST 3 AQUI">
<img src="ENDEREÇO HTTP DA MINIATURA 3 AQUI"/></a>

  <a href="LINK AQUI" title="NOME DO POST 4 AQUI">
<img src="ENDEREÇO HTTP DA MINIATURA 4 AQUI"/></a>

  <a href="LINK AQUI" title="NOME DO POST 5 AQUI">
<img src="ENDEREÇO HTTP DA MINIATURA 5 AQUI"/></a>

<a href="LINK AQUI" title="NOME DO POST 6 AQUI">
<img src="ENDEREÇO HTTP DA MINIATURA 6 AQUI"/></a>

 </div>
 </div>
 
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript" src="http://yourjavascript.com/192317683/slidedestaquesbyelainegaspareto.js"></script>



IMPORTANTE
caso seu blog não use domínio próprio e comece com https substitua a última linha do código por esta:

<script type="text/javascript" src="https://sites.google.com/site/codigoselainegaspareto/scripts/slidedestaquesbyelainegaspareto.js
"></script>


Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage