Podem comemorar, porque hoje eu vou ensinar como colocar esse slide divo que eu uso no seu blog. O nome dele é Nivo e vários sites profissionais usam ele. O que eu acho mais legal no Nivo é os diferentes efeitos de transição que ele tem (15 no total). Mas chega de enrolar, vamos ao tão esperado tutorial.
O resultado final será semelhante a este:
O resultado final será semelhante a este:
Cole esse código abaixo de </head>
<style type="text/css">
/* <![CDATA[ */
#w2bSlideContainer {position: relative;display: block; top:0px; left:0px; right:0px;/*Ajuste as posição do slide*/}
#w2bNivoSlider { position:relative;
width:640px !important; /*largura do slide*/height:300px !important; /*Altura do slide*/
background: #fff url("http://4.bp.blogspot.com/-TBMTXcO0VxM/T7dSfCUe9dI/AAAAAAAABgY/dmbkzgOPQI0/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px;
border: 3px solid #000;/*Coloque borda se quiser*/ }
#w2bNivoSlider img {position:absolute; top:0; left:0; display:none}
.nivoSlider {position:relative;width:100%;height:auto;}
.nivoSlider img {position:absolute;top:0;left:0}
.nivo-main-image {display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box {display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img {display:block}
.nivo-caption {padding: 5px;
font-family: Arial,sans-serif;position:absolute; /*Fonte da legenda*/Font-size: 14px; /*Tamanho da fonte da legenda*/background:#000; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8; width: 630px;/*Largura da legenda*/ z-index:8;}
.nivo-caption p {padding:2px;margin:0}
.nivo-caption a {display:inline!important}
.nivo-html-caption {display:none}
.nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;
background: url("URL_IMG_SETA") no-repeat;text-indent:-9999px;border:0}
.nivo-prevNav {left:10px}
.nivo-nextNav {background-position:-30px 0!important;right:10px}
.nivo-controlNav {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
.nivo-controlNav a {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;
background:url("URL_IMG_BULLETS") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
.nivo-controlNav a.active {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/y66747w/9hlmdpcpa/nivoslider.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('#w2bNivoSlider').nivoSlider({
effect : 'random',
slices : 10,
boxCols : 8,
boxRows : 4,
animSpeed : 500,
pauseTime : 4000,
startSlide : 0,
directionNav : true,
directionNavHide : true,
controlNav : true,
keyboardNav : false,
pauseOnHover : true,
captionOpacity : 0.8
});
});
/* ]]> */
</script>
Eu destaquei em negrito as partes que você irá precisar alterar para ficar mais fácil de encontrar. No fim do post tem algumas imagens de setas e das bolinhas de navegação para vocês usarem. Depois de fazer as alterações, visualize se está tudo ok e salve.
<div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<a href="LINK_DO_SLIDE_1"><img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/></a>
<a href="LINK_DO_SLIDE_2"><img src="URL_DA_IMAGEM_2" title="LEGENDA DA IMAGEM 2"/></a>
<a href="LINK_DO_SLIDE_3"><img src="URL_DA_IMAGEM_3" title="LEGENDA DA IMAGEM 3"/></a>
<a href="LINK_DO_SLIDE_4"><img src="URL_DA_IMAGEM_4" title="LEGENDA DA IMAGEM 4"/></a>
</div>
</div>
Substitua o endereço das imagens, os links e a legenda e pronto! Um slide lindo estará no seu blog. Agora as imagens que eu prometi:
Setas
![](http://3.bp.blogspot.com/-z1ExBV2odpg/UDp_9mexW-I/AAAAAAAACcM/LggHRLxYq0E/s1600/s-1.png)
![](http://3.bp.blogspot.com/-pd2z7d9CayE/UDp_-Tv7cxI/AAAAAAAACcU/X0OevuQdePc/s1600/s-10.png)
![](http://4.bp.blogspot.com/-d3ScpJJrDJY/UDp__G-woGI/AAAAAAAACcc/k5i2KTInfCI/s1600/s-11.png)
![](http://3.bp.blogspot.com/-jHZ1kB65wgQ/UDp__7gnPwI/AAAAAAAACck/y3X8PV6EFuQ/s1600/s-12.png)
![](http://3.bp.blogspot.com/-ceW42LTl6kk/UDqAAqqqTxI/AAAAAAAACcs/SOMIIIH2-k4/s1600/s-2.png)
![](http://4.bp.blogspot.com/-lZt1ZqpxGjw/UDqABWv_ywI/AAAAAAAACc0/YPXvDUXlo4M/s1600/s-3.png)
![](http://1.bp.blogspot.com/-8VGCQQxql7c/UDqACOWS34I/AAAAAAAACc8/v-dDCIzgPyA/s1600/s-4.png)
![](http://3.bp.blogspot.com/-xR8jESG0Leg/UDqAC3n0wcI/AAAAAAAACdE/-5ENzC0u5k0/s1600/s-5.png)
![](http://1.bp.blogspot.com/-yD7iTCniGz4/UDqAD3DXgJI/AAAAAAAACdM/xNDzodwT4kA/s1600/s-6.png)
![](http://2.bp.blogspot.com/-KzgJtZTfrOw/UDqAEnS5pcI/AAAAAAAACdU/IalbATdB4ig/s1600/s-7.png)
![](http://2.bp.blogspot.com/-8k_lN6_Ks4s/UDqAFXPPB3I/AAAAAAAACdc/PLHMgMdfvzI/s1600/s-8.png)
![](http://1.bp.blogspot.com/-gYLTyAKOUNk/UDqAGITZPxI/AAAAAAAACdk/OxyGgLtNFgE/s1600/s-9.png)
Bolinhas
![](http://1.bp.blogspot.com/-70mt9zydE9E/UDqAy1H37yI/AAAAAAAACds/1G2n6a7iv_0/s1600/b-1.png)
![](http://3.bp.blogspot.com/-LhqkgpvwPyY/UDqAzXNsj-I/AAAAAAAACd0/8hWOFkRQ_CY/s1600/b-2.png)
![](http://1.bp.blogspot.com/-YZWOCrT8ANQ/UDqA0LCHIfI/AAAAAAAACd8/tibccdjkSDY/s1600/b-3.png)
![](http://3.bp.blogspot.com/-nusaO6rzb9I/UDqA0rshmwI/AAAAAAAACeE/Fk37Rw75TWM/s1600/b-4.png)
![](http://4.bp.blogspot.com/-B-vq5_0Mw9Y/UDqA1ZFbVsI/AAAAAAAACeM/WRnFlBMGf0A/s1600/b-5.png)
![](http://2.bp.blogspot.com/-rQ783rJYsBI/UDqA2NIRiiI/AAAAAAAACeU/5tTb5VhkB3Y/s1600/b-6.png)
Vídeo Aula
0 comentários:
Postar um comentário