2013/02/13

Tutorial Colocando Nivo Slide no Wordpress !

Tutorial Achado no : SugoiTutoriais Codigos do tumblr Html Strew Clique em Leia mais para ver o tutorial ! 


1 - Faça o login e vai em Aparencia > Editor > Cabeçalho (header.php) e cole esse código antes do </head>  {código clica}
 2 - Salve e Cole este no Código no Folha de Estilo (style.css)

/* The Nivo Slider styles */ 
#slider {position:relative;} 
#slider img {position:absolute; top:0px; left:0px; display:none;} 
#slider a {border:0; display:block;} 
.nivoSlider {position:relative; width: LARGURApx;} 
.nivoSlider img {position:absolute; top:0px; left:0px;} 
/* If an image is wrapped in a link */ 
.nivoSlider a.nivo-imageLink {position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0;margin:0; z-index:6; display:none;} 
/* The slices and boxes in the Slider */ 
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;} 
.nivo-box {display:block;position:absolute;z-index:5;} 
/* Caption styles */ 
.nivo-caption {position:absolute;left:0px; bottom:0px; background:#FUNDO DO CAPTION; color:#COR DA LETRA; text-transform: uppercase; width: 100%; z-index:50; border-right: 5px solid #;padding: 5px 0;} 
.nivo-caption p {padding:0 20px;margin:0;font-size:14px;} 
.nivo-caption a {display:inline !important;} 
.nivo-html-caption {display:none;} 
/* Direction nav styles (e.g. Next & Prev) */ 
.nivo-directionNav a {position:absolute;top:45%;z-index:99;cursor:pointer;} 
.nivo-prevNav {left:0px;} .nivo-nextNav {right:0px;} 
/*============================*/ 
/*=== Custom Slider Styles ===*/ 
/*============================*/ 
.slider {width:100%;} 
.slider img {position:absolute;top:0px;left:0px;display:none;} 
.slider a {border:0;display:block;} 
.nivo-controlNav {display:none;} 
.nivo-directionNav a {display:block; width:31px; height:34px; background:url(http://twizonebr.com/Novidades/wp-content/themes/twizonebrvrs1/arrowswleft.png) no-repeat;text-indent:-9999px;border:0; } 
a.nivo-nextNav {background-position:-30px 0;right:15px;} 
a.nivo-prevNav { left:15px;} .nivo-caption {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;} 
.nivo-caption a {color:#efe9d1; text-decoration:underline;} 

 
Mude os que estão em negrite e cole esse código antes de </header>

<div id="slide">
<div id="slider">
<a href="LINK" target="_blank"><img src="SUAIMAGEM" title="SUA_DESCRIÇAO" width="LARGURA_DA_IMAGEM" height="ALTURA_DA_IMAGEM" /></a>
<a href="LINK" target="_blank"><img src="SUAIMAGEM" title="SUA_DESCRIÇAO" width="LARGURA_DA_IMAGEM" height="ALTURA_DA_IMAGEM" /></a>
<a href="LINK" target="_blank"><img src="SUAIMAGEM" title="SUA_DESCRIÇAO" width="LARGURA_DA_IMAGEM" height="ALTURA_DA_IMAGEM" /></a></div></div> 
 Créditos dos Códigos : Html Strew
Tutorial Feito Por : Sugoi Tutoriais
Eai gostaram comentem ? !

Nenhum comentário:

Postar um comentário