Slide Horizontal no blogger com setas
Autor: Downspv | Publicado: 2011-05-28T23:47:00-03:00

Um slide é uma seleção de imagens que aparecem aleatóriamente, este slide possui setas de ir e voltar facilitando a visualização de conteúdo em destaque, você coloca o link e a descrição para os seus melhores artigos facilitando assim, os seus visitantes encontrarem facilmente o que procuram, um deslumbrante efeito no seu Blogger vamos começar a aplicação:

1.Faça login no Blogger
2- Vá para Layout ☺ Editar Html
Obs:&nbsp;É sempre bom fazer um backup do seu template pois se algo der errado você pode reverter facilmente.
3- Procure pelo seguinte código no seu template ultilize as teclas CTRL + F:
&lt;/head&gt;
4- Agora antes dele cole o seguinte:
&lt;script src='http://api.ning.com/files/NQ48wH9Dt2TYyEsHWrdC-l46KzpTgAcAr1Y41Nwwou7MQsKitzH2tr-ZIl4DisJfhkbfKH1UPbVj*xijSVgSeRtF3RMPmpT8/slider.js' type='text/javascript'/&gt;
&lt;script src='http://api.ning.com/files/2t9WTY*Gu2xB77vgojGMzTojL3HTIDZtL6YoqRKTtBykmlvBk9CfBn-ljBgSfMWJ53c0U2ZRrH-JUdR7GsiDqtW9kjRkyvwP/jquery1.2.6.min.js' type='text/javascript'/&gt;
&lt;style type='text/css'&gt;
#mygallery{overflow: hidden;}
&lt;/style&gt;
&lt;script type='text/javascript'&gt;
stepcarousel.setup({
galleryid: &amp;#39;mygallery&amp;#39;, //id of carousel DIV
beltclass: &amp;#39;belt&amp;#39;, //class of inner &amp;quot;belt&amp;quot; DIV containing all the panel DIVs
panelclass: &amp;#39;panel&amp;#39;, //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true,&nbsp;moveby: 3, leftnav: [&amp;#39;http://1.bp.blogspot.com/_8AL-4bHE9zs/TLmUl67f0BI/AAAAAAAAB4w/qEEz0JT4_qU/left.jpg&amp;#39;, -48, 0], rightnav: [&amp;#39;http://1.bp.blogspot.com/_8AL-4bHE9zs/TLmU4-7wJqI/AAAAAAAAB40/5tP3IR9phQg/right.jpg&amp;#39;, 0, 0]},
statusvars: [&amp;#39;statusA&amp;#39;, &amp;#39;statusB&amp;#39;, &amp;#39;statusC&amp;#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&amp;#39;external&amp;#39;] //content setting [&amp;#39;inline&amp;#39;] or [&amp;#39;external&amp;#39;, &amp;#39;path_to_external_file&amp;#39;]
})
&lt;/script&gt;
Nota:&nbsp;Os códigos em vermelho devem ser substituído pelo seu servidor pois se algum dia eu resolver retira-los do ar você não irá ser prejudicado, o código em rosa é velocidade da passagem com as setas, o código em verde são as setas que podem ser substituídas por suas próprias setas.

5. Agora vamos inserir o CSS no template procure pelo seguinte código:
]]&gt;&lt;/b:skin&gt;
6.Agora acima dele cole o código abaixo:
#myslides{
background:#000 url(http://1.bp.blogspot.com/_xfdD6S9fOk4/Sd1SjSaUrXI/AAAAAAAAA20/ndvDf0nTslY/s1600/mslid.jpg) repeat-x;
width:&nbsp;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 código em vermelho é o fundo e pode ser alterado pelo seu fundo para que combine com seu template. O código em laranja é largura e altura do slide ajuste conforme o seu template.6- Agora salve as alterações feitas no template.
7- Agora vamos em Layout&gt; Elementos da página&gt; Adicionar um gadget&gt; HTML / JavaScript, cole o código abaixo no conteúdo do gadget:
&lt;div id="myslides"&gt;
&lt;div id="mygallery" class="stepcarousel"&gt;
&lt;div class="belt"&gt;
&lt;!-- 1st Template --&gt;
&lt;div class="panel"&gt;
&lt;a href="http://anshuldudeja.blogspot.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"&gt; &lt;img width="160" alt="Two Column Denim Template" src="http://4.bp.blogspot.com/_v5IxGTiMTD8/SQTQLthrdvI/AAAAAAAAAHk/JY-ySDnZ8Xw/s400/newtwocolumndenimtemplate.jpg" height="110"/&gt; &lt;/a&gt;
&lt;/div&gt;
&lt;!-- end code of 1st --&gt;

&lt;!-- 2nd Template --&gt;
&lt;div class="panel"&gt;
&lt;a href="http://anshuldudeja.blogspot.com/2009/02/simple-blog-writing-template.html" target="blank" title="Simple Blog Writing Template"&gt; &lt;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"/&gt; &lt;/a&gt;
&lt;/div&gt;
&lt;!-- end code of 2nd --&gt;

&lt;!-- 3rd Template --&gt;
&lt;div class="panel"&gt;
&lt;a href="http://anshuldudeja.blogspot.com/2009/05/woork-style-blogger-template-design.html" target="blank" title="Woork Style Blogger Template"&gt; &lt;img width="160" alt="Woork Style Blogger Template" src="http://img2.pict.com/91/27/d5/ad3dbaa7835b554ec0d06a4e0c/XG7ZL/800/woork2520257c2520web2520design25.png" height="110"/&gt; &lt;/a&gt;
&lt;/div&gt;
&lt;!-- end code of 3rd --&gt;

&lt;!-- 4th Template --&gt;
&lt;div class="panel"&gt;
&lt;a href="http://anshuldudeja.blogspot.com/2009/05/blogger-buster-style-blogger-template.html" target="blank" title="Blogger Buster Style"&gt; &lt;img src="http://img23.imageshack.us/img23/8537/bloggertemplate.jpg"/&gt; &lt;/a&gt;
&lt;/div&gt;
&lt;!-- end code of 4th --&gt;

&lt;!-- 5th Template --&gt;
&lt;div class="panel"&gt;
&lt;a href="http://anshuldudeja.blogspot.com/2009/05/free-lenomag-blogger-template.html" target="blank" title="Lenomag Blogger Template"&gt; &lt;img width="160" alt="Lenomag Blogger Template" src="http://2.bp.blogspot.com/_nX0wvumD9VU/ShkEH2GD1nI/AAAAAAAAAOY/xeVepHCMH2M/s400/Preview.jpg" height="110"/&gt; &lt;/a&gt;
&lt;/div&gt;
&lt;!-- end code of 5th --&gt;

&lt;!-- 6th Template --&gt;
&lt;div class="panel"&gt;
&lt;a href="http://anshuldudeja.blogspot.com/2009/06/money-blogger-blogger-template.html" target="blank" title="Money Blogger Template"&gt; &lt;img width="160" alt="Money Blogger Template" src="http://1.bp.blogspot.com/_nX0wvumD9VU/SiuAxR7uKDI/AAAAAAAAAPE/BYtw4ToMfr4/s320/money2520blogger.png" height="110"/&gt; &lt;/a&gt;
&lt;/div&gt;
&lt;!-- end code of 6th --&gt;

&lt;!-- 7th Template --&gt;
&lt;div class="panel"&gt;
&lt;a href="http://anshuldudeja.blogspot.com/2009/06/digital-statement-blogger-template.html" target="blank" title="Digital Statement Blogger Template"&gt; &lt;img width="160" alt="Digital Statement Blogger Template" src="http://img2.pict.com/fd/ad/16/9de4e09426b4090113f40930f2/bnaeY/800/digital2520statement.png" height="110"/&gt; &lt;/a&gt;
&lt;/div&gt;
&lt;!-- end code of 7th --&gt;

&lt;!-- 8th Template --&gt;
&lt;div class="panel"&gt;
&lt;a href="http://anshuldudeja.blogspot.com/2009/06/orkut-theme-blogger-template.html" target="blank" title="Orkut Theme Blogger Template"&gt; &lt;img width="160" alt="Orkut Theme Blogger Template" src="http://img2.pict.com/f3/ec/dd/06efff55a05477591153094b2f/rDVvV/800/orkut2520theme2520blogger2520tem.png" height="110"/&gt; &lt;/a&gt;
&lt;/div&gt;
&lt;!-- end code of 8th --&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
Obs: Eu adicionei cores apenas no primeiro para explicar mas o que está abaixo deve ser feito em todos, veja:
O código em vermelho é o link da postagem, o código em verde é a descrição da imagem, o código em azul é o link da imagem.

Se você fez tudo como o explicado você já estará com seu slide pronto
Fonte:&nbsp;Anshuldudeja