Neste tutorial irei ensinar como voc criar uma apresentao de slides com setas para avanar ou voltar,

como o do QUALO.COM.BR/. uma tima opo para mostrar as notcias mais importantes do seu blog, as promooes em destaque ou uma apresentao de fotos. Este cdigo fcil de colocar e no pesa no carregamento da pgina. Vamos colocar as mos na massa: 1 Recomendamos que salve o cdigo de seu blog antes de fazer qualquer alterao: Para fazer isto no blogger, basta ir na aba "Design", " Editar Html" e clicar em "Baixar modelo completo". 2 Na mesma aba "Editar HTML" procure (Ctrl+F) pelo cdigo abaixo: </head> 3 Abaixo deste cdigo coloque o seguinte cdigo: <script src='http://www.yourjavascript.com/12300300114/mootools.v1.11.js' type='text/javascript'/> <script src='http://www.yourjavascript.com/10162001424/jd.gallery.js' type='text/javascript'/> <link href='http://api.ning.com:80/files/SN3eeozgUFWu*rJrzfJnsEuXtQuTxjUiS6nF2kD5NjG*p341S M0ecKKlIYZHbbNpw-19mQEl257b2cGsvHx8uVz-IyRDaVdN/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/> 4 Em seguida procure pelo seguinte cdigo: ]]></b:skin> 5 Ento adicione ANTES dele o cdigo abaixo: #myGallery{ width: 300px !important; height: 200px !important; overflow: hidden; } OBS: Width a largura da sua caixa e Height a altura. 6 Salve e clique na aba "Elementos da Pgina" e depois em "adicionar uma gadget". Na janela que se abre clique em "HTML/Javascript", e cole o cdigo abaixo: <script type="text/javascript"> function startGallery() { var myGallery = new gallery($('myGallery'), { timed: true, showArrows: true, showCarousel: false,

}); } window.addEvent('domready', startGallery); </script> <div id="myGallery"> <div class="imageElement"> <a class="open" href="http://fnportuarios.blogspot.com/2011/04/federacao-dosportuarios-anula.html"/> <img src="http://img717.imageshack.us/img717/5266/igv4610.jpg" class="full" /> <h3>Federao dos Porturios Anula</h3> <p>Veja as melhores dicas... </p> </a></div> <div class="imageElement"> <a class="open" href="http://fnportuarios.blogspot.com/2011/08/plano-nacional-delogistica-portuaria.html"/> <img src="http://img684.imageshack.us/img684/2267/dscn3901c.jpg" class="full" /> <h3>plano Nacional de Logstica</h3> <p>Confira Matriap> </a></div> <div class="imageElement"> <a class="open" href="http://fnportuarios.blogspot.com/2011/08/ministro-recebetrabalhadores.html"/> <img src="http://img829.imageshack.us/img829/3236/id26125leonidasportuari.jpg" class="full" /> <h3>Ministro Recebe Trabalhadores Porturiosh3> <p>Veja na Integrap> </a></div> <div class="imageElement"> <a class="open" href="http://fnportuarios.blogspot.com/2011/08/governo-decretaintervencao-no-fundo-de.html"/> <img src="http://img197.imageshack.us/img197/9371/dscf4753l.jpg" class="full" /> <h3>Interveno do PORTUS</h3> <p>Acompanhe tudo sobre a Intervenop> </a></div> </div> Ento basta substituir com as suas imagens e os link de seu blog. Se voc no sabe como adicionar uma imagem em um cdigo preste ateno: 1 Voc precisa ter a imagem salva em seu computador; 2 Voc precisa hospedar esta imagem, eu recomendo hospedar no http://pt-br.tinypic.com/, ento voc cpia o cdigo que est em "link direto para layout"; o que termina com ".jpg". 3 Substitua no cdigo da sua gadget, na parte onde est src=. Faa isto para cada imagem.

4 Para adicionar o link no cdigo da sua gadget, copie o link da barra de navegao e adicione na frente de "href=".