Slider Personalizado

Este é meu primeiro post aqui na ONBR  e aproveito para me apresentar tbm...
trago um tutorial ensinando como fazer uma postagem de imagen em slide com efeito, vc pode postar ate 6 imagens sem ocupar espaço com efeito de rolagem horizontal servindo para gadget ou postagem normal. [Continue Lendo]


Vá em Design - Elementos da Página - Adicionar um Gadget - HTML/Javascript e selecionar a opção HTML.

Copie o código abaixo:

<link rel="Stylesheet" type="text/css" href="http://gbscripts.webs.com/SmoothDivScroll-1.2/css/smoothDivScroll.css" /><br /> <style type="text/css"><br />     #makeMeScrollable<br />     {    <span style="color: #e69138;">width:530px</span>;<br />         <span style="color: #e69138;">height: 270px</span>;         position: relative;    }<br />     #makeMeScrollable div.scrollableArea img<br />     {    position: relative;<br />         float: left;<br />         margin: 0;<br />         padding-right: 5px;}<br /> </style><br /> <div id="makeMeScrollable"><br />     <a href=" <span style="color: #38761d;">LINK OPCIONAL </span>" target="_blank"><img src=" <span style="color: #e06666;">URL IMAGEM</span> " <span style="color: #e69138;">height="270</span>"border="0"/></a><br />     <a href=" <span style="color: #38761d;">LINK OPCIONAL</span> " target="_blank"><img src=" <span style="color: #e06666;">URL IMAGEM</span> " <span style="color: #e69138;">height="270</span>"border="0"/></a><br />     <a href=" <span style="color: #38761d;">LINK OPCIONAL</span> " target="_blank"><img src=" <span style="color: #e06666;">URL IMAGEM</span> " <span style="color: #e69138;">height="270</span>"border="0"/></a><br />     <a href=" <span style="color: #38761d;">LINK OPCIONAL</span> " target="_blank"><img src=" <span style="color: #e06666;">URL IMAGEM</span> " <span style="color: #e69138;">height="270</span>"border="0"/></a>     <br />     <a href=" <span style="color: #38761d;">LINK OPCIONAL</span> " target="_blank"><img src=" <span style="color: #e06666;">URL IMAGEM</span> " <span style="color: #e69138;">height="270</span>"border="0"/></a><br />     <a href=" <span style="color: #38761d;">LINK OPCIONAL</span> " target="_blank"><img src=" <span style="color: #e06666;">URL IMAGEM</span> " <span style="color: #e69138;">height="270</span>"border="0"/></a> </div><br /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><br /> <script src="http://gbscripts.webs.com/SmoothDivScroll-1.2/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script><br /> <script src="http://gbscripts.webs.com/SmoothDivScroll-1.2/js/jquery.mousewheel.min.js" type="text/javascript"></script><br /> <script src="http://gbscripts.webs.com/SmoothDivScroll-1.2/js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script><br /> <script type="text/javascript"><br />     $(document).ready(function () {<br />         $("div#makeMeScrollable").smoothDivScroll({<br />             mousewheelScrolling: true,<br />             manualContinuousScrolling: true,<br />             visibleHotSpotBackgrounds: "always",<br />             autoScrollingMode: "onstart"});});   <br /> </script>

Agora é so configurar de acordo com suas imagens:

LINK OPCIONAL = algum link se deseja redirecionar a imagem.
URL IMAGEM = link do url da sua imagem.
WIDHT = Largura acordo com o tamanho da sua imagem.
HEIGHT = Altura de acordo com o tamanho da sua imagem.