Tutorial - Colocando slide no blog!

Um tutorial muito útil! A maioria dos blogs já tem, mas ainda tem muita gente que não sabe como colocar! Super simples!

Passo à Passo:

Abra um widget "HTML/Javascript" e copie e cole o código abaixo, coloque as imagens e o link que quiser, e salve!

<br /> <style type="text/css"> #slider { width: 550px; /* Largura das as imagens */ height: 100px; /* Altura das as imagens */ position: relative; overflow: hidden; } #sliderContent { width: 550px; /* Largura das as imagens */ position: absolute; top: 0px; margin: 0px; padding: 0px; } .sliderImage img{ width: 550px; /* Largura das as imagens */ height: 100px; /* Altura das as imagens */ } .sliderImage { float: left; position: relative; display: none; } .sliderImage span { position: absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 100%; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; display: none; } .clear {clear: both;} .sliderImage span strong {font-size: 14px;} .top {top: 0px;left: 0px;} .bottom {bottom: 0px;left: 0px;} ul { list-style-type: none;} </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"> $(document).ready(function() { $('#slider').s3Slider({ timeOut: 3000 /*Representa em milesimos de segundo o tempo de troca de imagem (neste caso temos 3 segundos)*/ }); }); </script> <br /> <div id="slider"> <ul id="sliderContent"> <li class="sliderImage"> <br /> <a href="LINK AQUI"><img src="http://data.whicdn.com/images/24082561/tumblr_m06pssa0Vl1r03qt3o1_500_large.jpg" border="0"/> <br /> <span class="top"></span></a> <br /> </li> <li class="sliderImage"> <br /> <a href="LINK AQUI"><img src="http://data.whicdn.com/images/24081902/tumblr_m02tn5Ox2I1r2mfiro1_500_large.png" border="0"/> <br /> <span class="top"></span></a> <br /> </li> <li class="sliderImage"> <br /> <a href="LINK AQUI"><img src="URL DA IMAGEM" border="0"/> <br /> <span class="top"></span></a> <br /> </li> <div class="clear sliderImage"> </div> </ul> </div>