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
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?
ResponderExcluirespero q vc possa me ajudar
brigada.
não entendi , como assim dentro deles ?
Excluirtipo em sobre: tem sobre oq eh , em contato: tem seus contatos e assim por diante sera q podia me ajudar??
ExcluirAi isso é muito fácil é só fazer isso http://static.tumblr.com/um2zssm/DIGmi6ghn/pos.jpg
Excluirbrigada! mas e agora como posto, tipo em contato como eu coloco meus contatos nessa pagina??
ExcluirMuito Obrigada esta ajudando mto so preciso agora saber disso