Cursos 24 Horas - Cursos 100% Online com Certificado

Slide Horizontal no blogger com setas

42 Comentários Autor : Notícia e blog 03 agosto 2009
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: É 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:
</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 DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
panelbehavior: {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 panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})
</script>

Nota: 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:
]]></b:skin>
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: 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> Elementos da página> Adicionar um gadget> HTML / JavaScript, cole o código abaixo no conteúdo 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" src="http://2.bp.blogspot.com/_nX0wvumD9VU/ShkEH2GD1nI/AAAAAAAAAOY/xeVepHCMH2M/s400/Preview.jpg" height="110"/> </a>
</div>
<!-- end code of 5th -->

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

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

<!-- 8th Template -->
<div class="panel">
<a href="http://anshuldudeja.blogspot.com/2009/06/orkut-theme-blogger-template.html" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://img2.pict.com/f3/ec/dd/06efff55a05477591153094b2f/rDVvV/800/orkut2520theme2520blogger2520tem.png" height="110"/> </a>
</div>
<!-- end code of 8th -->
</div></div></div>

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: Anshuldudeja

    42 Comentários

    Bboy Guil disse...
    20 de outubro de 2009 12:09 #

    Muito legal

    netSEMLIMITE disse...
    9 de dezembro de 2009 13:56 #

    Boas Fernando

    Sou iniciante e inexperiênte em matéria de construção de blog. Suas dicas tem sido exencias para o sucesso do nosso projeto. Estou fazendo um blog com a mulekada aqui de casa, onde eles irão falar sobre jogos com seus amigos e eu, sobre desenho técnico mecânico/elétrico e desenho 3D.
    Só vamos começar a usa-lo mesmo, quando estiver tudo do meu agrado. Usei este código nele, usando as mesmas skins só que com a cor laranja do blog, mas, não consigo mudar a imagem superior, não encontro ela no código...só aparece a inferior que eu ja mudei.
    Se puder me ajudar amigo, ficaria mto grato.
    Da uma olhada como ficou...fica bem em baixo do blog.
    http://www.netsemlimite.blogspot.com
    abraços

    Notícia e blog disse...
    9 de dezembro de 2009 15:16 #

    @netSEMLIMITE o erro está nessa imagem abaixo pois você alterou apenas a parte de baixo da imagem e esqueceu da parte de cima veja:

    http://i653.photobucket.com/albums/uu256/netsemlimite/mslid.jpg

    netSEMLIMITE disse...
    9 de dezembro de 2009 16:37 #

    Boas...Puxa ! que discuido meu !...(kkkkkk)...obgd
    Só mais uma coisa...no IE fica perfeito, porém, no Firefox, ele fica alinhado a esquerda, sendo que é um elemento de página centralizado e as setas, ficam lá em cima, no meio da postagem.
    Tem alguma coisa que eu possa fazer para consertar isso?..
    Mais uma vez, muito obrigado.
    abraços !

    Notícia e blog disse...
    9 de dezembro de 2009 20:35 #

    Olha até que há uma solução mas se você alterar para um navegador você vai fazer com que o IE, Google Chrome, Safari, fiquem descentralizado e só o firefox fique certo :-)

    RossEdition® disse...
    11 de dezembro de 2009 15:16 #
    Este comentário foi removido pelo autor.
    Victor Andrade disse...
    12 de março de 2010 18:12 #

    Cara sinceramente, muito obrigado, eu ja tinha visto esse slide no site do proprio desenvolvedor, ja tinha feito tudo que foi dito la e não estava conseguindo fazer ele funcionar, mas então seguindo seu método consegui fazêlo funcionar 100% vlw mesmo ! muito obrigado

    3º Grupamento de Bombeiros Militar disse...
    17 de março de 2010 14:09 #

    Poxa, muito bom mesmo... de tanto eu ir atrás de tutoriais e encontrar erros na hora H, estava meio sem esperança, mas esse realment funcionou... e muito BEM!!!

    Parabéns pelo nice post!!! Funcionou perfeitamente e a explicação está muito boa, até pra iniciantes como eu!!

    Vlw!!

    Se quiser ver o resultado do seu post no meu blog, pode acessar: http://3gbm-imperatriz.blogspot.com

    Anônimo disse...
    4 de abril de 2010 23:00 #

    Amigo, excelente tutorial. segui todos os procedimentos e deu tudo certo, só adequei ao meu blog. ficou muito bom.
    só vou abusar um pouco do teu conhecimeto. como consigo fazer esse mesmo procedimento no "wordpress"
    desde ja agradeço.

    Gabriel disse...
    5 de abril de 2010 00:23 #

    olà amigo não consiguir por ele não aparece, poderia me ajudar ? Adicione meu msn por favor > gabrielmoreira.10@hotmail.com

    Baixe Tudo e Mais um Pouco disse...
    20 de abril de 2010 09:37 #

    Cara Achei Otimo só tem um problema que estou tentando resolver o BackGround fica com o tamanho menor que o os botões criando uma faixa branca da uma olhada na imagem

    http://img263.imageshack.us/img263/6782/imagemexg.png

    andraD disse...
    24 de agosto de 2010 12:26 #

    como modifico a descrição das imagens de setas!!!

    Notícia e blog disse...
    16 de outubro de 2010 09:12 #

    @andraD
    Não tem como, pois as imagens de setas estão dentro do script e não do HTML

    José Filho disse...
    25 de novembro de 2010 10:09 #

    Me ajuda por favcor. Eu estava procurando muito esse slide, e agora que eu achei eu queria agarrar essa chance. Tipo, o slide ficou atrás das postagens dá uma olhada: http://4.bp.blogspot.com/_AQy-fk0dekg/TO5RoCWs_hI/AAAAAAAAAlk/LdYljcF4PTE/s1600/erro.jpg
    Tem como me ajudar?

    J V I C T O R disse...
    30 de novembro de 2010 16:02 #

    Amigo qual é o servidor do Blog? Você pede para colocar o primeiro código em vermelho o endereço do meu servidor. Qual o servidor do Blog? desde já grato!

    andraD disse...
    4 de dezembro de 2010 19:12 #

    como coloco uma descrição abaixo de cada imagem?

    Baixe A Mais disse...
    30 de dezembro de 2010 10:38 #

    @J V I C T O R

    O servidor que ele diz é tipo o Dropbox pra vs hospeda o script!mas se quiser pode usar a hospedagem dele msmo! Eu só salvei se caso algun dia der problema fasso upload do script novamente!

    wilson disse...
    15 de janeiro de 2011 16:57 #

    muito legal...como eu posso aumentar a quantidade de imagens de 3 para 5?

    Andson disse...
    31 de janeiro de 2011 10:07 #

    valeu vc mi ajudou bastante conhesa seu blog andsondownload.blogspot.com
    ele tem um mmail legal do que esse conhesa.

    ABENÇOADO disse...
    9 de fevereiro de 2011 05:04 #

    JOSE VC ESTA DEIXANDO A GADGET NA PARTE LATEAL DO LOG VC TEM QUE COLOCAR ACIMA NA PARTE ORIZONTAL E ELE FICA NORMAL

    AGORA MINHA PERG TEM COMO EU COLOCAR MAIS IMAGENS NO CASO SO APARECEM 3 EU QRIA COLOCAR 5 A AMOSTRA

    MUDAR A IMAGEM DO FUNDO E FACIL QUEM QSER SABER E SO ME ADD NO MSN

    MARCIO-MMG@HOTMAIL.COM EU AJUDO SEI VARIAS COIAS VLW

    Anônimo disse...
    16 de março de 2011 01:33 #

    Salve Gnt boa , aqui queria saber como faço para diminuir o tamanho da "caixa" geral e das setas , jah diminui a caixa dos slides e as imagens soh q não acho onde diminuir a caixa toda quero ''apertar'' horizontalmente , para diminuir o tamanho e encaixa-la em um local especifico ,se puder tirar essa duvida agradeço , se alguem ai souber comenta será de muita valia vlws galera . Excelente Blog kra continue assm.

    Anônimo disse...
    16 de março de 2011 01:36 #

    Ops desculpa é q eu errei , quis dizer que eu quero ''apertar" verticalmente , ou seja qro diminuir a caixa ela tah grande d+ aqui .

    Srº(¯` · _ å†ÿ£å Moza®t Rizzon_.· ´¯) disse...
    6 de abril de 2011 14:59 #

    aff deu tudo errado affffffffffffffffffffffffffffff

    Jefferson disse...
    1 de maio de 2011 00:25 #

    Muito bom, usava esse slide no layout do meu antigo blog. Estou querendo implantar no tema do meu atual blog também, mais estou esperando mais movimento!

    web10 disse...
    24 de maio de 2011 12:41 #

    para mudar a 3 imagens para 5 editem a parte (width: 870px;) no codigo ABAIXO E DEPOIS SALVE.

    .stepcarousel{
    position: relative; /*leave this value alone*/
    overflow: scroll; /*leave this value alone*/
    width: 870px; /*Width of Carousel Viewer itself*/
    height: 160px; /*Height should enough to fit largest content's height*/
    margin: 0px 48px 5px 48px;

    «-·¤|51ÐCl3¥|¤·-» disse...
    2 de julho de 2011 10:46 #

    Olá!
    Essa parte não sei fazer...

    "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."

    Alguém poderia me ajudar?
    Obrigado!

    Fael disse...
    7 de julho de 2011 16:13 #

    Pra variar não deu certo no meu!! Aff!
    Que raiva!!

    weslynhu disse...
    3 de agosto de 2011 10:26 #

    Cara muito bom, só queria saber se tem como adicionar mais imagens, para aparecer mais que 3 no começo, obg.

    Letícia Molon disse...
    9 de agosto de 2011 20:06 #

    Nota: 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.


    Desculpa a ignorancia, mas não entendo quase nada de html, como eu pego o html do servidor? =/

    Guilherme disse...
    21 de agosto de 2011 16:28 #

    Cara, muito bonito esse slide ai... Mas seguinte, eu que vou ter de por manualmente sempre os posts q vão aparecer nele ? Ele não aparece posts relacionados ou aleatórios automaticamente ? =s

    Só Para Elite disse...
    9 de janeiro de 2012 11:26 #

    MUITO LEGAL A INFO MAS HJ EM DIA PARECE QUE ESTÁ MEIO EM DESUSO, MAS LEGAL ESTOU ALTERAMNDO PARA FAZER UM MENU DE VIDEOS DO YOUTUBE COM ABERTURA VIA SHADOWBOX TUDO PERFEITO POREM NÃO ENCONTRO OS PARAMETROS PARA ALTERAR A QUANTIDADE DE LINKS NO SCRIPT. EXMPLO O SCRIPT É PARA 8, POREM USANDO A MESMA LÓGICA DOS 8 PRIMEIROS NÃO CONSIGO INSERIR MAIS 7 LINKS QUE NECESSITO A MAIS. TALVEZ NEM RESPONDA MAS BLZ SE TIVER UMA SOLUÇÃO AGRADESÇO VLW.

    Anônimo disse...
    14 de março de 2012 18:04 #

    hello babies


    fico muito feliz por vos ver e tambem porque isto é muito legal!!

    Beatriz Marks disse...
    28 de março de 2012 00:56 #

    Eu fiz tudo certo, mas só aparecem duas imagens sem setas. Segui passo a passo. Vale para o novo modelo do Blogger? bjos

    Victor Rocha disse...
    28 de março de 2012 10:10 #

    @Beatriz Marks Parece que o autor excluiu os arquivos .js e sem eles as setas não funcionam! Queria então que o autor, se puder, disponibilizar o arquivo de novo, para assim salvar em nossos servidores! Obrigado!

    Restaurante e Lanchonete Tillmann disse...
    29 de março de 2012 21:27 #

    Achei um arquivo.js agora vai. abrs.

    http://btemplatescripts.googlecode.com/files/slider.js

    http://ajax.googleapis.com/ajax/libs/jquery / 1.2.6/jquery.js

    Victor Rocha disse...
    2 de abril de 2012 18:20 #

    @Restaurante e Lanchonete Tillmann Valeu amigão, procurei em vários lugares e não achei!

    Redação disse...
    20 de maio de 2012 12:57 #

    Alguem sabe qual é o arquivo .js ???

    Tiago Britto disse...
    18 de julho de 2012 09:44 #

    Não consigo mudar o fundo somente alterando o link...como eu faço?

    Blog Cultura Alternativa disse...
    16 de agosto de 2012 15:39 #

    só aparece dois quadros no meu

    Anônimo disse...
    10 de setembro de 2012 13:57 #

    o meu fica sem setas !

    krissennin disse...
    13 de setembro de 2012 23:54 #

    ajuda por favor...
    o meu so fica com 2 quadros e sem a setas e ele nem se mexe !
    eu acredito q seja o servidor né? + o q eu faço?

    Carlos Frederico Braga disse...
    16 de novembro de 2014 03:18 #

    Teria um arquivo.js para substituir o que não funciona mais, por favor.

    Atenciosamente
    Frederico Braga
    info@websolucoesimobiliarias.com

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.