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

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

Postar um comentário

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

Postagens mais visitadas deste blog

Download : Use a Cabeça HTML com CSS e XHTML: Livro

Tema Base