Como colocar o Slider

Para colocar o Slider neste template você deve seguir o passo-a-passo:

O tamanho da imagem é de 1000px X 350px;
É preciso hospedar as imagens em algum lugar e substituir os links no código abaixo.

Ir em Layout > Adicionar Gadget > HTML/JavaScript
Colar o código abaixo e Salvar
Posicionar o widget acima da área de postagem.

Código:

<p align="center">
<style type="text/css">
/* http://dimpost.com | Code By Haakblog | Adapted by Rafaella Ribeiro */ 
#sliderFrame {
 position:relative; 
 width:1000px; 
 margin: 0 auto 40px;} 
#slider { 
 width:1000px; 
 height:350px; 
 background:#e5e5e5 url(http://183.111.144.100:7017/images/common/loading.gif) no-repeat 50% 50%; 
 position:relative; 
 margin:0 auto;} 
#slider img {  
 clip: auto;  
 position:absolute;  
 border:none;  
 display:none;}
 
/* LINKS (if an image is wrapped in a link) */ 
#slider a.imgLink {  
 z-index:2;  
 display:none; position:absolute;  
 top:0px;left:0px;border:0;padding:0;margin:0;  
 width:100%;height:100%;}

/* Legendas */ 
div.mc-caption-bg, div.mc-caption-bg2 {  
 position:absolute; 
 width:100%;  
 height:auto;  
 padding:0;  
 left:0px;  
 z-index:3;  
 overflow:hidden;  
 font-size: 0; 
 bottom:0;} 
div.mc-caption-bg {background-color:black;} 
div.mc-caption { 
 font-size: 15px; 
 font-family: 'Montserrat', sans serif; 
 color:#fff; 
 z-index:4; 
 padding:10px 0; 
 text-align:center;} 
div.mc-caption a {color:#FB0;} 
div.mc-caption a:hover {color:#DA0;}

/* --------- Outros ------- */ 
#slider {  
 transform: translate3d(0,0,0);     
 -ms-transform:translate3d(0,0,0);
 
TEMPLATE FREE PARA BLOGGER – WINTER IS COMING DESENVOLVIMENTO:  COFFEEPOCKET Não remova os créditos – Do not remove the credits

-moz-transform:translate3d(0,0,0);     
 -o-transform:translate3d(0,0,0);} 
 
</style>

</div>
</div>

Após seguir o passo-a-passo, seu slider estará pronto e funcionando!

13 fevereiro 2016

Como colocar o Slider

0 comentários:

Postar um comentário

FOLLOW ME

PESQUISE

ARQUIVO

CATEGORIAS

Postagens populares