Slide Responsivo com Posts Recentes no Blogger

Coloque em seu blog um slide que mostra as postagens mais recentes publicadas e além disso ajusta a visualização em qualquer dispositivo.

A busca de novas alternativas que evoluam o design de um blog cresce a cada dia, e, na maioria das vezes essas alternativas devem se adaptar às necessidades de uso da web atual. Como hoje em dia não utilizamos somente PCs para acessar a internet, é preciso que os códigos façam com que todos os aplicativos do blog se ajustem a qualquer resolução e a qualquer dispositivo.

Nesse artigo, trazemos mais uma funcionalidade que vem a ajudar para fazer seu blog aos moldes necessários atuais. Um slide responsivo, ou seja, ele se adaptará a qualquer resolução de tela em que seu blog for acessado (PC, Notebook, Tablet, Smartphone) e lhe possibilitará ter em sua página inicial uma ferramenta que exiba suas postagens de uma maneira muito mais elegante, interativa e que chame a atenção de todos que acessem seu blog.

Para melhorar ainda mais, esse slide mostra as postagens recentes de maneira automática, passo importante para poupar-lhe o tempo que seria gasto para estar sempre modificando códigos. Para falar um pouco também de seu estilo, nesse slide o design é totalmente renovado e foge aos parâmetros normalmente utilizados tendo uma alternância lateral de postagens, exibindo as datas das publicações das postagens em destaque e um efeito bem especial ao passar o mouse sobre as postagens.

 Observação:
Esse slide pode não funcionar em alguns templates por questão de conflitos de scripts.

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso não saiba como proceder acesse o artigo Como Fazer um Backup do Blog.

Colocar Slide Responsivo com Posts Recentes no Blog

1° Passo: Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

2° Passo: Clique no código do template, pressione "CTRL+F" e pesquise por </head>

3° Passo: Logo ACIMA da tag encontrada, cole o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

4° Passo: Pesquise agora por ]]></b:skin>

5° Passo: Logo ACIMA da tag encontrada, cole o seguinte código:

/* CSS Responsive Slider Recent Post */
#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:320px}
#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:'Viga';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:'Viga';}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 20px;
background:#ff6553;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:#000;opacity:0.2;}
#slides li:nth-child(2) .overlayx{background:#f56954;opacity:0;}
#slides li:nth-child(3) .overlayx{background:#2c323c;opacity:0;}
#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';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:'Viga';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{display:none;}
#slides li:hover:nth-child(2) h4,#slides li:hover:nth-child(3) h4{background:#f56954;opacity:1;z-index:4;}
#featuredpost #buttons {text-align:right;background:#f1f1f1;margin:0 10px;}
#featuredpost #buttons a {font-size:20px;padding:0 5px;color:#fff;background:#95a5a6;}

6° Passo: Pesquise agora por <div class='column-center-inner'>

* Essa div é encontrada em templates padrões do Blogger que representa a área logo acima da postagens. Caso seu blog não possua, será necessário que você encontre o trecho referente a esse espaço em seu blog.

7° Passo: Logo ABAIXO do trecho encontrado, cole o seguinte código:

<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://prodeveloper.com.br",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
    </b:if>

* Substitua o trecho destacado em AMARELO, pela url de seu blog.

* Destaco em VERDE, ajuste para a quantidade desejada de posts que aparecem no slide.
* Caso desejar que o slide apareça em todas as páginas, apague os trechos em LARANJA.

8° Passo: Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".

9° Passo: Vá em seu blog e veja como ficou.

Concluindo

Com a conclusão correta do tutorial o slide responsivo com posts recentes já estará funcionando e exibindo suas postagens recém publicadas com design ajustado a todos dispositivos. Você que procurava um slide que fosse moderno, prático e que combinasse com suas páginas, esse poderá resolver suas necessidades e fazer com que seu blog tenha um salto de qualidade.

Deixe seu comentário pois ele é a motivação para nosso trabalho.