para Layout Editar HtmlObs: E sempre bom fazer um backup do seu template pois se algo der errado voce pode reverter facilmente.3- Procure pelo seguinte codigo no seu template ultilize as teclas CTRL + F:</head>4- Agora antes dele cole o seguinte:<script src='http://api.ning.com/files/NQ48wH9Dt2TYyEsHWrdC-l46KzpTgAcAr1Y41Nwwou7MQsKitzH2tr-ZIl4DisJfhkbfKH1UPbVj*xijSVgSeRtF3RMPmpT8/slider.js' type='text/javascript'/><script src='http://api.ning.com/files/2t9WTY*Gu2xB77vgojGMzTojL3HTIDZtL6YoqRKTtBykmlvBk9CfBn-ljBgSfMWJ53c0U2ZRrH-JUdR7GsiDqtW9kjRkyvwP/jquery1.2.6.min.js' type='text/javascript'/><style type='text/css'>#mygallery{overflow: hidden;}</style><script type='text/javascript'>stepcarousel.setup({galleryid: &#39;mygallery&#39;, //id of carousel DIVbeltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVspanelclass: &#39;panel&#39;, //class of panel DIVs each holding contentpanelbehavior: {speed:500, wraparound:true, persist:true},defaultbuttons: {enable: true, moveby: 3, leftnav: [&#39;http://1.bp.blogspot.com/_8AL-4bHE9zs/TLmUl67f0BI/AAAAAAAAB4w/qEEz0JT4_qU/left.jpg&#39;, -48, 0], rightnav: [&#39;http://1.bp.blogspot.com/_8AL-4bHE9zs/TLmU4-7wJqI/AAAAAAAAB40/5tP3IR9phQg/right.jpg&#39;, 0, 0]},statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panelscontenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]})</script>Nota: Os codigos em vermelho devem ser substituido pelo seu servidor pois se algum dia eu resolver retira-los do ar voce nao ira ser prejudicado, o codigo em rosa e velocidade da passagem com as setas, o codigo em verde sao as setas que podem ser substituidas por suas proprias setas.5. Agora vamos inserir o CSS no template procure pelo seguinte codigo:]]></b:skin>6.Agora acima dele cole o codigo abaixo:#myslides{background:#000 url(http://1.bp.blogspot.com/_xfdD6S9fOk4/Sd1SjSaUrXI/AAAAAAAAA20/ndvDf0nTslY/s1600/mslid.jpg) repeat-x;width: 650px;height:165px;margin-bottom:5px;}.stepcarousel{position: relative; /*leave this value alone*/overflow: scroll; /*leave this value alone*/width: 554px; /*Width of Carousel Viewer itself*/height: 160px; /*Height should enough to fit largest content's height*/margin: 0px 48px 5px 48px;}.stepcarousel .belt{position: absolute; /*leave this value alone*/left: 0;top: 0;}.stepcarousel .panel{float: left; /*leave this value alone*/overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/margin: 20px 10px ; /*margin around each panel*/width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */background:#0e1829;height:120px;border:1px solid #1d2c44;}.stepcarousel .panel p{text-align: left; /*leave this value alone*/overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/margin: 5px 5px ; /*margin around each panel*/}.stepcarousel .panel h2{text-align: left; /*leave this value alone*/height:20px;overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/margin: 2px 5px ; /*margin around each panel*/font-size:16px;font-weight:bold;text-align:center;font-family:Georgia,century gothic,Arial,verdana, sans-serif;}.stepcarousel .panel img{float: left; /*leave this value alone*/background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/margin: 5px 5px 5px 5px; /*margin around each panel*/padding:0px 0px;}Obs: O codigo em vermelho e o fundo e pode ser alterado pelo seu fundo para que combine com seu template. O codigo em laranja e largura e altura do slide ajuste conforme o seu template.6- Agora salve as alteracoes feitas no template.7- Agora vamos em Layout> Elementos da pagina> Adicionar um gadget> HTML / JavaScript, cole o codigo abaixo no conteudo do gadget:<div id="myslides"><div id="mygallery" class="stepcarousel"><div class="belt"><!-- 1st Template --><div class="panel"><a href="http://anshuldudeja.blogspot.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="http://4.bp.blogspot.com/_v5IxGTiMTD8/SQTQLthrdvI/AAAAAAAAAHk/JY-ySDnZ8Xw/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a></div><!-- end code of 1st --><!-- 2nd Template --><div class="panel"><a href="http://anshuldudeja.blogspot.com/2009/02/simple-blog-writing-template.html" target="blank" title="Simple Blog Writing Template"> <img width="160" alt="Simple Blog Writing Template" src="http://4.bp.blogspot.com/_v5IxGTiMTD8/SZpu68uI7xI/AAAAAAAAAM8/4qHvgwss23o/s400/simple+Blog+Template.png" height="110"/> </a></div><!-- end code of 2nd --><!-- 3rd Template --><div class="panel"><a href="http://anshuldudeja.blogspot.com/2009/05/woork-style-blogger-template-design.html" target="blank" title="Woork Style Blogger Template"> <img width="160" alt="Woork Style Blogger Template" src="http://img2.pict.com/91/27/d5/ad3dbaa7835b554ec0d06a4e0c/XG7ZL/800/woork2520257c2520web2520design25.png" height="110"/> </a></div><!-- end code of 3rd --><!-- 4th Template --><div class="panel"><a href="http://anshuldudeja.blogspot.com/2009/05/blogger-buster-style-blogger-template.html" target="blank" title="Blogger Buster Style"> <img src="http://img23.imageshack.us/img23/8537/bloggertemplate.jpg"/> </a></div><!-- end code of 4th --><!-- 5th Template --><div class="panel"><a href="http://anshuldudeja.blogspot.com/2009/05/free-lenomag-blogger-template.html" target="blank" title="Lenomag Blogger Template"> <img width="160" alt="Lenomag Blogger Template"