Blogger: Slider automático com posts recentes | Follow your dreams
Blogosfera

Blogger: Slider automático com posts recentes

Oi pessoal, como estão?

Essa semana perguntei na página do Facebook que tutorial vocês gostariam de ver aqui no blog e o campeão de solicitações foi o slider, então cá estou eu! Esse tutorial é um pouco compridinho então preciso que vocês sigam com muita atenção, combinado?

O slider fica assim:

BloggerSliderComPostsRecentesAutomatico#Demonstracao

Mas ele é completamente customizável e como sempre faço, também vou mostrar todas as opções de customização pra vocês. Vamos lá?

 

  • 1 – No painel do Blogger vá em MODELO -> Editar HTML. Clique na área de códigos do template e aperte Ctrl + F para abrir a caixa de pesquisa.

 

Atenção: No novo modelo do blogger você só deve abrir a barra de pesquisa (Ctrl + F) após clicar dentro da caixa de códigos, caso contrário a sua pesquisa não apresentará resultados. A caixa de pesquisa deve aparecer assim:

PesquisandoNoNovoModeloBlogger

 

  • 2 – Pesquise por ]]></b:skin> e logo acima disso adicione o código seguinte:

/*—– INÍCIO DO SLIDER  —————————————-*/
.theme-default .nivoSlider {
position:relative;
background:#fff url(http://4.bp.blogspot.com/-ly7fzdRVYSw/Unaw16dpWOI/AAAAAAAAB98/Y-MCamn7gTg/s1600/loading.gif) no-repeat 50% 50%;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
position:absolute;top:0px;left:0px;display:none;
}
.theme-default .nivoSlider a {
border:0;display:block;
}
.theme-default .nivo-controlNav {
position:absolute;left:50%;bottom:-42px;
margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
display:block;width:22px;height:22px;
background:url(https://lh6.googleusercontent.com/-0EkJ0yn2heg/VFk-76AZAZI/AAAAAAAADjs/93B4rr-mLvA/s40/BolinhaCinza.png) no-repeat;
text-indent:-9999px;border:0;margin-right:3px;float:left;
}
.theme-default .nivo-controlNav a.active {
background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
display:block;width:30px;height:30px;
background:url(http://2.bp.blogspot.com/-ZfMy0_axq9I/UnaxF7X_BgI/AAAAAAAAB-M/F4rPrDMd2Xo/s1600/arrows.png) no-repeat;
text-indent:-9999px;border:0;
}
.theme-default a.nivo-nextNav {
background-position:-30px 0;right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
}
.theme-default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
color:#fff;
}

/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;top:0px;left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;
padding:0;margin:0;z-index:6;display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#888888;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
height:50px;
z-index:8;
}
.nivo-caption p {
padding:10px;
margin:0;
font-size:15px;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3…) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
.theme-default #slider {
margin:10px -20px 60px 10px; /* Aqui você define a posição do slide */
width:600px;
height:300px;
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
margin-top:150px;
}
.clear {
clear:both;
}
/*—– FIM DO SLIDER —————————————-*/

Em azul está o tamanho em pixels da altura de cada slide.
Em verde está o tamanho em pixels da largura de cada slide.
Em lilás está o código da imagem dos controladores (os coraçõezinhos que controlam os slides).
Em rosa está a cor do plano de fundo das legendas.

 

  • 3 – Pesquise por </head> e acima cole o código:

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js’ type=’text/javascript’/>
<script src=’http://yourjavascript.com/9634421461/nivo-slider-modified-min.js’ type=’text/javascript’/>
<script type=’text/javascript’> $(window).load(function() { $(&#39;#slider&#39;).nivoSlider(); }); </script>

 

  • 4 – Agora vá na aba LAYOUT. Adicione um novo gadget e escolha HTML/Java Script. Nele, cole o código:

<div class=”slider-wrapper theme-default”>
<div class=”ribbon”></div>
<script style=”text/javascript” src=”http://yourjavascript.com/9644611160/galleryslide.js”></script>
<script style=”text/javascript”>
var numposts_gal = 4;   //number of posts
var image_height = 300; //image height
var image_width = 600;  //image width
</script>
<script src=”http://ENDEREÇO DO SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts”></script>
</div>

Troque o trecho rosa pelo endereço do seu blog.
Em vermelho está o número de slides.
Em azul está o tamanho em pixels da altura de cada imagem do slide.
Em verde está o tamanho em pixels da largura de cada imagem do slide.
Lembre-se de deixar o tamanho das imagens igual ao tamanho dos slides no passo 2.

 

Modificando os controladores

Caso prefira modificar os controladores fiz alguns modelos que vocês.

BloggerSliderComPostsRecentesAutomatico#CoracaoAzul

BloggerSliderComPostsRecentesAutomatico#CoracaoAzul2

BloggerSliderComPostsRecentesAutomatico#CoracaoRosa

 

BloggerSliderComPostsRecentesAutomatico#CoracaoRoxo

 

BloggerSliderComPostsRecentesAutomatico#EstrelaCinza

BloggerSliderComPostsRecentesAutomatico#EstrelaRosa

DOWNLOAD

 

Depois de baixar, faça o upload da imagem escolhida no seu álbum do Picasa Web, copie a URL da imagem e substitua pelo trecho lilás no passo 2.

 

O slider não apareceu? Tente as soluções abaixo:

1: Adicione o gadget “Seguir por e-mail”.

2: Vá em Configurações-> Outro e certifique-se de que em “Permitir feed de blog” esteja selecionada a opção “Completa“.

3: No passo número 3 do tutorial, em vez de colocar o código acima de </head> coloque-o depois de  <body>.

 

Espero que tenham conseguido. Qualquer dúvida comentem! :)

Tags : Blogger

125 Comentários

  1. Suas postagens estão cada vez melhores. Tenho um blog e estou tentando fazer tudo sozinha, e você está me ajudando muito.. Não sou muito de comentar mas sempre estou por aqui aprendendo e admirando seu trabalho. Bjs

  2. quando eu vou colocar o código acima de aparece um aviso em vermelho e não salvar, diz que esta alguma coisa errada no código…

  3. O que será que eu fiz de errado? :(
    É só clicar no meu nome que vai dar no meu blog e entender o que eu quero dizer. O slide fica só rodando mas não aparecem as postagens, não entendi. :(

  4. Guria!!! Entrei no teu blog por conta de um layout que tu fez. Amei o teu layout e teus posts, daí fiquei navegando pelo teu blog até cansar. Então em algum momento vi que tu estuda arquitetura e fiquei “meu deus! ela é blogueira e estuda arquitetura! quero abraçar”haha. Brincadeiras a parte, adorei tudo e já tou te seguindo.
    Abração.
    A.

    1. Oi Amanda, amei! hahah Você também estuda arquitetura? Que legal! Difícil achar blogueiras que fazem esse curso. Obrigada pelo comentário, seu bar café tá ficando lindo! <3
      Bjs

  5. Karol, boa noite! Gostaria muito de tirar uma dúvida com você, pode ser? Rs
    Então, eu estou usando um template que baixei do seu blog no meu “littlethings” eu amei ele! Só que eu no início do post mostra quem publicou, e os comentários, mas no meu sempre aparece “comentários desabilitados” como eu faço para reverter isso? Um beijo, e parabéns pelo seu trabalho!

    1. Oi Glaucia, nas configurações do Blogger em “Configurações > Postagens e comentários > Quem pode comentar?” a opção escolhida deve ser Incorporado. Além disso, em cada postagem é possível habilitar ou desabilitar comentários, então se o problema estiver acontecendo em uma postagem só você pode ter desabilitado por engano, nesse caso é só editá-la e habilitar.
      Bjs

  6. Karol, deu tudo certo dessa vez! O antigo tema que não deixava eu colocar o slide… não sei pq. Enfim, eu queria saber se tem como tirar aquela “sombra” em volta do slide, você pode me ajudar? Obrigada, adoro seu blog!

    1. Oi Carolina, obrigada! Para remover a sombra pesquise a remova o trecho:
      -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
      -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
      box-shadow: 0px 1px 5px 0px #4a4a4a;

  7. Oi, Karoline!
    Não tenho como encomendar um layout, então amo suas dicas, pois estou conseguindo organizar o meu blog com as suas postagens e downloads de tanta coisa linda que você disponibiliza aqui. Muito obrigada mesmo. <3
    Beijos

  8. Amei o tutorial, fiz no meu blog e ficou ótimo. Junto com o layout violeta do seu blog. Quero agradecer pela ajuda.E gostei também que você permite alterar o template pra deixar com a nossa cara, foi o que mais tive dificuldade porque muitos que disponibilizam templates, não permitem alterar nada.

    Enfim, obrigado.

  9. olá! estou tentando colocar em meu blog com os corações cor-de-rosa. eu faço, e dá certo, tamanho 350px/980px, mas não aparece :(

    me ajuda?
    beijos <3

      1. Oi… eu coloquei, a principio deu certo, mas agora não sei o que aconteceu, só fica carregando, carregando e não aparece nada… Já tentei arrumar e nada… coloquei no meu outro blog e fica do mesmo jeito… Já tentei também apagar tudo e começar de novo, mas não volta a pegar :(

    1. Oi Laura, pode ser porque o slider é maior do que a área de posts e força a barra lateral a ir pra baixo. Não tenho certeza porque não analisei os dois códigos.
      Bjs

  10. Achei lindo! No começo não estava aparecendo, mas depois segui as tuas dicas e funcionou.

    Agora preciso acertar o tamanho das imagens, que estão ficando desconfiguradas.

    Um beijo e obrigada!

    Amei o tutorial!!

    1. Querida, eu também estava com esse problema, tentei muito e nada… Como a minha tag estava modificada, acrescentei o código do passo 3 ANTES da tag de fechamento, ou seja, antes de e, quando eu já estava desistindo, porque era minha última tentativa, o slider carregou.

      Karoline, obrigada pelo tutorial. :D

      1. Não apareceram as tags no comentário.
        Enfim, coloque o código antes de (sem espaço, claro), no meu caso deu certo. Bjs

      2. Fran, você salvou a minha vida kkkk

        Coloquei antes do fim da tag body e deu super certo… obrigadaaaa…

        FollowYourDreams é o melhor blog de tutoriais do mundo!!

        Estava procurando muito esse tutorial

        1. Por nada, Aline. Deus iluminou o meu entendimento na última hora, só assim pra dar certo rs. O ruim é quando o nosso template tem algum javascript que interfere e não sabemos qual e onde mexer, mas graças a Deus que meu comentário ajudou, apesar da tag body não ter aparecido (nem quando pus espaços) e deu pra entender assim mesmo. rs Realmente este é um ótimo blog. Beijos, e tenha um lindo e abençoado dia.

          1. Obrigada, meninas! :)
            Essa solução de colocar dentro de “body” está no post, junto com outras possíveis soluções.
            Beijos

            1. Sim, querida, a dica você já havia dado, mas no meu caso a tag body estava modificada, e como eu não entendia NADA de HTML na época (digamos que hoje sei me virar), então eu não sabia onde mexer e estava muito confusa, nada dava certo e aquela agonia toda de não conseguir rs, já estava desistindo, mas, graças a Deus e ao seu blog, consegui no finalzinho. A você, os meus sinceros agradecimentos. Deus te abençoe!

  11. Karol, eu coloquei o slide no meu blog e ele não aparece as imagens, fica sempre como se estivesse carregando…. já tirei, coloquei de volta e não sei o que acontece, eu estou usando o seu template Petit Formal… me ajudaa <3

    1. Oi Anne, isso aconteceu comigo quando coloquei pra aparecer nos slides um número maior do que a quantidade de posts que eu tinha publicado. Por exemplo, coloquei pra aparecer 5 slides mas no blog só tinha 1 post publicado, aí ocorreu esse erro.
      Bjs

    1. Stefani, quando ele fica branco e carregando pra sempre eu corrijo com a solução 3 que está no fim do post. Mas já vi que você conseguiu resolver.
      Um beijo! :)

  12. Muuuuutio bom o seu blog Karol de verdade, crei um blog a pouco tempo e uso muito das suas dicas pra deixar ele cada dia mais a minha cara. Inclusive coloquei o slider apareceu tudo certinho só não carregou as imagens é normal?

      1. Karol muito Obrigada deu super certo, não tava achando porque no meu tava como com ‘/’ depois que eu coloquei assim eu encontrei haha’. Como faço pra creditar? Você faz um belíssimo trabalho aqui!

  13. Olá, boa noite

    Encontrei teu blog, e até o momento, foi o único que me quebrou o galho. Porém, eu estou com um probleminha: queria pôr o texto mais ao centro, e diminuir a barrinha escura, ela está passando um pouco.

    Eu acho que fica na parte (((

    /* Caption styles */
    .nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    height:50px;
    z-index:8;
    }

    )))

    E eu simplesmente não consigo alterar o tamanho da barra, mesmo colocando -10px no left. Ele corre pro outro lado ou ainda deixa a barra.

    Agradeço sua resposta desde já, e muito obrigada por disponibilizar o código!

  14. Karol, me ajuda! como eu faço para definir a posição do slide? vc pode dar um exemplo?
    é que nos códigos acima tem dizendo para definir a posição dos slides me ajuda.

      1. é o seguinte: No passo 2, naquele código grande, se olharmos aparece lá pra definir a posição do slide, olha eu vou colocar o trechinho que fala disso: ”margin:10px -20px 60px 10px; /* Aqui você define a posição do slide */”
        não entendi. como faço pra definir a posição do slide, e queria que ele ficasse em cima antes da postagem, abaixo do menu. eu uso aquele seu template petite formal. desde de já obg ;)

  15. Oi Karol :D gostei muito dos seus posts de ajudas aos blogs, eu queria pedir que você ensinasse a fazer um widget “categorias” com a foto da categoria, igual está o seu. Muito obrigada pelas dicas, me ajudou muito :D

  16. oi karol pf me ajuda na segunda tag e head quando colo acima dele no finalzinho fica vermelho ou seja ta dizendo que ta errado pf me ajuda

    olha qual e #39;#slider').nivoSlider(); }) ;

  17. Adorei ! Deu certo, mas não ficou centralizado :/ Queria saber se tem como arrumar isso… Você pode me ajudar por favor ? Ah, e também explica como tirar por favor ? (caso eu queira tirar no futuro…)
    Bom, é isso. Obrigada de qualquer forma, aguardo sua resposta.
    Beijos !

    1. Letícia, pra tirar é só remover os códigos que você adicionou. Pra centralizar você altera os números nessa linha, no código do passo 2 desse tutorial:
      margin:10px -20px 60px 10px; /* Aqui você define a posição do slide */

      Bjs

  18. Funcionou, obrigado, me tira uma duvida, em vez do feed eu posso trocar pra postagens? se sim como que fica as url? tipo o post de feed muda logico, ai eu vou ter que abrir mais codigos pra por as postagens que eu quero, como que faço isso? .-.

  19. Oi Karol, tudo bem?
    Por favor, preciso de uma ajuda…
    O meu deu certo, mas eu queria que ele pegasse da parte esquerda de onde tem a pagina do post ate o final da minha foto, ou seja, vai ficar grande, e que ficasse acima da minha foto e do post, tem como?
    O meu template é o Aquarela.
    Beijos

    1. Vivianne, você precisa criar outro espaço para widget e configurar para que ele tenha a largura total do template (que é 1060 pixels). Aí você coloca o widget do slider nesse novo espaço.
      Bjs

  20. Oi Karoline, estou tentando seguir o passo a passo mas ao colar a primeira da solucao 2 aparece a seguinte mensagem de erro :Não foi possível carregar a visualização do modelo: Erro ao analisar XML, linha 657, coluna 37: The entity name must immediately follow the ‘&’ in the entity reference
    o que faco para corrigir?

  21. Oi, tudo bem? Adorei o seu post, mas não consegui colocar o slider no meu bolg. Fiz tudo direitinho, até conferi a parte das configurações. Mas quando chegou na parte de mudar a posição do código do passo 3 não achei no modelo. Pode me ajudar?

  22. Oi, tudo bem?
    Será que pode me ajudar?? Eu baixei um template pronto e ja veio com o slide, os links e nomes que aparecem no slide estão corretos, o único problema é que não aparece imagem nenhuma, mesmo tendo imagem no post. aparece um ícone de fundo como uma bola e um risco no meio, como se fosse bloqueado ou negado. SOCORRRRRRRRRRRRO

    1. Andressa, isso acontece porque deu erro na imagem, provavelmente foi excluída. Para resolver você precisa hospedar as imagens novamente e trocar os links no código do template.

Deixe uma resposta