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

 

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 endereç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.

25 comentários

so apareceu um monte de codigos e nada mais.

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

Olá Raphael,

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

Você seguiu corretamente os passos?

Aguardo

Cleiton e Raphael,

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

Obrigado por reportarem.

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

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

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.

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

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

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

Agora funcionou! Obrigado!

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

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

Este comentário foi removido pelo autor.

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

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

É 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

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.

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

Tem tutorial desses emoticons emocionais??

Olá Leticia,

Tem o tutorial sim! E o post mais recente aqui do blog.

La eu explico como implementar :)

não estpu conseguindo colocar esse slide no meu blog .. ta muito grande e ta na cor verde, sem borda ... me ajuda?

Olá Vanessa,

No caso do seu blog, para deixar o slide na página inteira sem a borda, altere o #slides ul de 1180px para 100%.

Ficando assim:
#slides ul {
width:100%;
}

Espero que isso te ajude.


Abrir lista de emoticonFechar lista de emoticon