19 de maio de 2016

Instalando um slide de destaque responsivo com posts recentes no Blogger [ATUALIZADO]

Hoje ensinarei a colocar um slide com posts automático no blog, ou seja assim que sair um novo post, o slide se encarrega de atualizar automaticamente. O slide em si é igual representado na imagem acima.

Entenda como funciona o Slider

Para fazer a atualização automática, usaremos o FeedBurner para captar o feed do blog, assim sempre que atualizar o blog, o slide vai fazer uma consulta no feed e se atualizará. Então é importante que seu blog já esteja com  o FeedBurner configurado.

Adicionando no seu Blog

Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.

Atualização 24/05/2016

Alguns leitores reportaram que fizeram tudo certo e o slider não aparecia. Atualizemos os códigos e agora deve funcionar corretamente. Veja a demonstração aqui



1- Acesse o Painel do Blogger.
2- Vá até Modelo do seu blog desejado e clique em Editar HTML.
3- No editor, tecle CTRL+F e procure por ]]></b:skin>

E acima dele cole o seguinte código:
/* Slider Responsivo by CodigosBlogger */
#featuredpost {margin:0 auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;border:5px solid #fff;position:relative;}
#slides ul{height:600px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:50%;height:50%}
#slides li:nth-child(3){left:50%;top:50%;width:50%;height:50%}
#slides li:nth-child(4){display:none;}
#slides li:nth-child(1) h4 {visibility:visible;opacity:1;overflow:hidden;font-size:16px;bottom:0;left:0;color:#666;width:100%;padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:#f0f0f0;height:90px;font-family:'Open Sans',Trebuchet MS,Sans-serif;line-height:26px;z-index:3;}
#slides li:nth-child(1) .label_text {color:#fff;font-size:30px;display:block;bottom:10px;left:10px;top:initial;right:initial;padding:0;font-family:'Open Sans',Trebuchet MS,Sans-serif;}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 20px;
background:#8BAF1C;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#2c323c;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#2c323c;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background:rgba(0, 0, 0, 0.68);opacity:1;}
#slides li:nth-child(2) .overlayx{background:rgba(0, 0, 0, 0.68);opacity:1;}
#slides li:nth-child(3) .overlayx{background:rgba(0, 0, 0, 0.68);opacity:1;}
#slides li:hover .overlayx,#slides li:hover:nth-child(2) .overlayx,#slides li:hover:nth-child(3) .overlayx{opacity:0;}
#slides h4,#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{z-index:3;opacity:0.9;position:absolute;bottom:0;right:0;left:0;margin:0;font-size:14px;font-family:'Open Sans',Trebuchet MS,Sans-serif;padding:10px 15px;color:#fff;line-height:20px;font-weight:normal;background:rgba(0,0,0,0.2);text-align:left;transition:all .4s ease-in-out}
#slides .label_text{opacity:0.9;font-size:12px;color:#fff;top:5px;right:0;z-index:3;position:absolute;background:transparent;padding:5px 10px;font-family:'Open Sans',Trebuchet MS,Sans-serif;text-transform:uppercase;transition:all 0.3s ease-in-out;}
#slides li:hover:nth-child(2) .label_text,#slides li:hover:nth-child(3) .label_text{
background:#fff;color:#666;right:5px;opacity:1;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{background:rgba(0, 0, 0, 0.68);opacity:1;}
#slides li:hover:nth-child(2) h4,#slides li:hover:nth-child(3) h4{background:#8BAF1C;opacity:1;z-index:4;}
#featuredpost #buttons {text-align:right;background:#E4E4E4;margin:0 10px;}
#featuredpost #buttons a {font-size:20px;padding:0 5px;color:#fff;background:#95a5a6;}  
Feito isso, procure por </header> ou <div class='main-wrapper'> e abaixo cole o seguinte código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featuredpost'/>
<script type='text/javascript'>
//<![CDATA[

function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",MonthNames:["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"><i class="fa fa-caret-left"/> </a><a href="#" id="nextx" title="next"> <i class="fa fa-caret-right"/></a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('')

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://codigosblogger.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
</b:if>

Entendendo as partes destacadas:

blogURL - Nesta parte  você coloca o endenreço do seu blog.
MaxPost - Defina quantos posts você quer, lembrando que se for mais de 3, o slider vai ficar alternando os posts.
autoplay - Por padrão está como true, ou seja está ativado para alternar os posts automaticamente, caso for mais de 3. Mude para false caso não queira alternar os posts.
tagName - Por padrão está false, ou seja não mostrará em quais marcadores o post está marcado. Mude para true caso queira mostrar os marcadores do post no slide.

Essas são as partes mais importantes que você deve entender no slide. Lembrando que esse slide vai exibir apenas na página inicial para não atrapalhar nas páginas internas e postagens.

Caso não consiga adicionar na parte indicada, adicione um novo gadget HTML/JavaScript em Layout e cole o código. Depois arraste esse gadget acima do gadget Postagens no blog.

Dúvidas? deixe um comentário.

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

Recomendamos também

21 comentários:

  1. so apareceu um monte de codigos e nada mais.

    ResponderExcluir
    Respostas
    1. Olá Cleiton,

      Você seguiu corretamente os passos?

      Onde você inseriu o código?

      Se puder me envie o endereço do seu blog para eu dar uma olhada.

      Abraços

      Excluir
  2. Respostas
    1. Olá Raphael,

      Você pode me enviar o endereço do seu blog para eu ver como está?

      Você seguiu corretamente os passos?

      Aguardo

      Excluir
  3. Cleiton e Raphael,

    Por favor refaçam o tutorial, atualizei e agora deve funcionar corretamente!

    Obrigado por reportarem.

    ResponderExcluir
  4. Oi Ebrahim, tudo bem? E quando o layout não tem esse ]]>? Como fazemos?

    Dá uma olhada no template que estou usando www.oprojetogisele.com

    ResponderExcluir
    Respostas
    1. Olá Marcelo,

      No seu caso, você pode adicionar acima da tag </style> do seu template. Mas é estranho não ter o ]]></b:skin> no seu template pois é necessário em todos os templates.

      Abraços

      Excluir
  5. Oi Bom dia! Eu testei em meu blog de teste e o Slide fica em branco. Não aparece nada. Tentei dos dois modos, colocando no gadget e no html... se puder me ajudar! Eu adoraria ter esse slide em meu site.

    ResponderExcluir
    Respostas
    1. Bom dia Cláudia,

      Você colocou o endereço do seu blog em blogURL corretamente?

      Se não coloque e faça o teste novamente por favor.

      Abraços

      Excluir
  6. Olá. Fiz tudo corretamente e não funcionou. :( Você poderia explicar melhor como a configuração com o FeedBurner deve ser feita? Orrigado desde já.

    ResponderExcluir
    Respostas
    1. Victor,

      A partir do momento que você cria um blog, o feed já é criado para ele.

      Você colocou o endereço corretamente no blogURL? Se possível me passe o endereço do seu blog para eu analisar melhor como ficou.

      Abraços

      Excluir
    2. Agora funcionou! Obrigado!

      Excluir
  7. Olá,até a parte do código acima da tá ok, porém no meu html não tem ou class='main-wrapper'> e quando eu coloco o segundo código em um novo gadget HTML/JavaScript não aparece nada, coloquei o link do blog tudo certinho, quero colocar acima dos posts

    ResponderExcluir
    Respostas
    1. Olá Mulher Conectada,

      Você pode me passar o endereço do seu blog para eu indicar onde você tem que colar o código?

      Fico aguardando.
      Abraços

      Excluir
    2. Este comentário foi removido pelo autor.

      Excluir
    3. No seu caso você pode adicionar o código logo abaixo de <div class="featured-area">

      Se tiver dúvidas volte a me contatar.
      Abraços

      Excluir
    4. Deu certo, só não estou conseguindo diminuir o tamanho

      Excluir
    5. É fácil, basta alterar o CSS!

      Vou te ajudar, vá até o Editor HTML do seu template e procure por .featured-area { E logo abaixo adicione:

      width: 81.5%; /*Define o tamanho do slide*/
      margin: 0 auto; /*Alinha o slide no centro da tela*/

      Depois é só salvar.

      Se der certo me conte ;)
      Abraços

      Excluir
    6. Deu certo, obrigada!!!!!!

      Excluir
    7. Olá, deu certinho o tamanho, porém queria saber como faz pra deixar com a aparência clara, ele fica com as imagens escuras que claream quando passa o mousse por cima da imagem, quero que fique claro sempre.

      Excluir
    8. Olá, a personalização tem de ser feita no CSS.

      No caso ele fica escuro por causa do overlay. Para retirar procure por: <div class="overlayx"></div> e apague esse trecho do código.

      Se tiver dúvidas volte a me contatar.
      Abraços

      Excluir