Como fazer apresentação de Slides com Banners! Esse efeito é simples e muito legal a sites/ blogs de animes ou design e até sites profissionais. Veja abaixo:
Primeiramente vá em seu painel > design> adicionar um gadget> Html/ JavaScript e cole o seguinte código:
Primeiramente vá em seu painel > design> adicionar um gadget> Html/ JavaScript e cole o seguinte código:
<style type="text/css"><br />#slider {<br />width: 400px; /* Largura das as imagens */<br />height: 300px; /* Altura das as imagens */<br />position: relative;<br />overflow: hidden;<br />}<br />#sliderContent {<br />width: 150px; /* Largura das as imagens */<br />position: absolute;<br />top: 0px;<br />margin: 0px;<br />padding: 0px;<br />}<br />.sliderImage img{<br />width: 400px; /* Largura das as imagens */<br />height: 300px; /* Altura das as imagens */<br />}<br />.sliderImage {<br />float: left;<br />position: relative;<br />display: none;<br />}<br />.sliderImage span {<br />position: absolute;<br />font: 15px Arial, Helvetica, sans-serif;<br />padding: 10px 13px;<br />width: 100%;<br />background-color: #000;<br />filter: alpha(opacity=70);<br />-moz-opacity: 0.7;<br />-khtml-opacity: 0.7;<br />opacity: 0.7;<br />color: #fff;<br />display: none;<br />}<br />.clear {clear: both;}<br />.sliderImage span strong {font-size: 14px;}<br />.top {top: 0px;left: 0px;}<br />.bottom {bottom: 0px;left: 0px;}<br />ul { list-style-type: none;}<br /></style><br /> <script src="http://dl.getdropbox.com/u/1659986/jquery.js" type="text/javascript"></script><br /> <script src="http://dl.getdropbox.com/u/1659986/s3Slider.js" type="text/javascript"></script><br /> <script type="text/javascript"><br />$(document).ready(function() {<br />$('#slider').s3Slider({<br />timeOut: 3000 /*Representa em milesimos de segundo o tempo de troca de imagem (neste caso temos 3 segundos)*/<br />});<br />});<br /></script><br /> <div id="slider"><ul id="sliderContent"> <li class="sliderImage"><br /> <a href="http://www.designfoxbrasil.co.cc/"><img src="http://i.imgur.com/eDFlR.gif" border="0" /><br /> <span class="top">DesignFOX</span></a><br /> </li> <li class="sliderImage"><br /> <a href="http://www.designfoxbrasil.co.cc/"><img src="http://i.imgur.com/veOqO.gif" border="0" /><br /> <span class="top">DesignFOX</span></a><br /> </li> <div class="clear sliderImage"></div></ul></div>
E edite de acordo com seu gosto. Praticamente é só modificar a linha:
<li class="sliderImage"><a href="http://www.designfoxbrasil.co.cc"><img src="http://i.imgur.com/veOqO.gif" border="0"/><span class="top">DesignFOX</span></a></li>
Espero ter ajudado!
0 comentários:
Postar um comentário