Seja bem vindo(a) ao Sugoi tutoriais =)
Temos temas para blogger, wordpress e outros!
Acompanhe nosso blog pela FANPAGE!
Peça o seu tutorial aqui!

2/12/2013

Colocando Nivo Slide no Wordpress

Esse tutorial é muito simples os códigos são do tumblr Html Strew então clica em mais informações e confira 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
                                             
Meu Resultado

Se Foi util comente e se reblogar credite

5 comentários:

  1. Anônimo12.2.13

    Ola sou iniciante (tipo mto iniciante kk) no mundo do blog so sei um poko mas de html sei, entao vc poderia me ensinar como postar algo no menu, tipo no seu tem sobre, contato, .... e assim, e eu qria saber como vc posta algo dentro deles. me entendeu?
    espero q vc possa me ajudar
    brigada.

    ResponderExcluir
    Respostas
    1. não entendi , como assim dentro deles ?

      Excluir
    2. Anônimo13.2.13

      tipo em sobre: tem sobre oq eh , em contato: tem seus contatos e assim por diante sera q podia me ajudar??

      Excluir
    3. Ai isso é muito fácil é só fazer isso http://static.tumblr.com/um2zssm/DIGmi6ghn/pos.jpg

      Excluir
    4. Anônimo17.2.13

      brigada! mas e agora como posto, tipo em contato como eu coloco meus contatos nessa pagina??
      Muito Obrigada esta ajudando mto so preciso agora saber disso

      Excluir

Seja educado , nossa educação depende da sua.
Criticas e sugestões são bem vindos.
Se reblogar por favor nos avise.