Códigos para seu blog: Slide de destaques

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>