Olá galera! Neste post trazemos um tutorial de como colocar no tumblr imagens em slide. Siga os passos abaixo e aprenda a coloca no seu. Fácil e rápido! Exemplo aqui: http://testandocodigoswlt.tumblr.com/
<div id="slideShowContainer"> <div id="slideShow"><div id="slideShow2">
<a href=""><img src="Link_da_img"/></a>
<a href=""><img src="Link_da_img"/></a>
<a href=""><img src="Link_da_img"/></a>
<a href=""><img src="Link_da_img"/></a>
</div></div></div>
OBS: No lugar de Link_da_img coloque os links das imagens.
2º Passo) Copiar o código abaixo, vá no Customize >> Advanced e cole o código lá, caso não funcione desse jeito cole o código logo após <style>
/*** IMAGENS ***/
</div></div></div>
OBS: No lugar de Link_da_img coloque os links das imagens.
2º Passo) Copiar o código abaixo, vá no Customize >> Advanced e cole o código lá, caso não funcione desse jeito cole o código logo após <style>
/*** IMAGENS ***/
#slideShowContainer{ width:420px; height: 218px; position: fixed; background-color: #000;}
#slideShow{position:absolute; width: 400px; height: 198px; background-color:#fff; margin: 10px 0px 0px 10px; z-index:100; overflow: hidden;}
#slideShow a{float: left; width: 39px; transition: 1s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s;}
#slideShow a:hover{float: left; width: 283px;} #slideShow2 {margin: 5px 0px 5px 0px }
#slideShow2 img{max-width: 285px;}
#slideShow{position:absolute; width: 400px; height: 198px; background-color:#fff; margin: 10px 0px 0px 10px; z-index:100; overflow: hidden;}
#slideShow a{float: left; width: 39px; transition: 1s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s;}
#slideShow a:hover{float: left; width: 283px;} #slideShow2 {margin: 5px 0px 5px 0px }
#slideShow2 img{max-width: 285px;}
Fonte: www.dicastumblr.com
0 comentários:
Postar um comentário