Recent responsive Blogger recent post Slide

Recent responsive Blogger recent post Slide



Recent responsive Blogger recent post Slider isso pode ser instalado em qualquer template o melhor de tudo é que podemos facilmente colocar label para ser apresentado o que desejamos isso foi criado por Adhy Suryadi então siga os passos abaixo:

Adcionando no seu template:

Faça login no blogger então va no menu tema editar HTML/JavaScript com as teclas combinadas CTRL+F busque por </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<style>
/*<![CDATA[*/
#slides li:nth-child(3),#slides li:nth-child(5){left:75%;width:25%;height:50%}
#featuredpost{margin:15px auto;width:100%;position: relative;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides li,#slides ul{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:350px}
#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),#slides li:nth-child(4),#slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){top:50%}
#slides li:nth-child(1) h4{overflow:hidden;font-size:20px;bottom:0;color:#fafafa;width:100%;padding:10px 10px 10px 90px;text-align:left;background:rgba(0,0,0,.3);height:90px;text-shadow:2px 2px 0 rgba(0,0,0,.2);line-height:1.1;left:0}
#slides li:nth-child(1) .label_text{font-size:30px;display:block;bottom:10px;left:10px;padding:0;box-shadow:5px 3px 0 rgba(0,0,0,.2)}
#slides li:nth-child(1) span.dd{display:block;font-size:30px;padding:12px 15px;background:#E53B2C;margin:0}
#slides li:nth-child(1) span.dm{display:block;font-size:14px;background:#333;color:#fff;padding:5px 21px;text-transform:uppercase;margin:0}
#slides li:nth-child(1) span.autname,#slides li:nth-child(1) span.dy{display:none}
#slides a,#slides img{display:block;width:100%}
#slides a{height:100%;overflow:hidden}
#slides img{height:100%;border:0;padding:0;background-color:#333;-moz-transform:scale(1) rotate(0);-webkit-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0);transition:all .6s linear}
#slides li:nth-child(1) .overlayx,#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none}
#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 .3s linear}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x}
#slides .label_text,#slides h4{z-index:3;left:10px;position:absolute;}
#slides h4{bottom:40px;margin:0 10px 0 0;font-size:13px;padding:5px 10px;color:#f9f9f9;line-height:1.1;font-weight:400;background:rgba(41,41,41,.7);text-align:left}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;background:#E53B2C;background:rgba(229,59,44,.8);padding:3px 6px}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:hover .overlayx{opacity:.1}
#featuredpost.loadingxx{background: url(https://2.bp.blogspot.com/-j5_B6uRRf_I/WUnnQw-tddI/AAAAAAAArpQ/tN7vxuosXf0w2g4qOHqH6UD02hi-al-uACLcBGAs/s1600/loadingbox.gif) no-repeat 50% 50%;}
#buttons{opacity:0;transition:all .4s ease-in-out}
#featuredpost:hover #buttons{opacity:.7}
#nextx,#prevx{position:absolute;top:0;bottom:0;width:60px}
#prevx{left:0;background:url("https://4.bp.blogspot.com/-ZQB4gdDffz8/WWrzkJ1QceI/AAAAAAAAr2U/GANOfBvKSE0QY9S3jHroeylebqq6wRaJQCLcBGAs/s1600/code-less-than.png") center no-repeat;background-size:50px 50px}
#nextx{right:50%;background:url("https://2.bp.blogspot.com/-64GKW6NEjcM/WWrzkROR2jI/AAAAAAAAr2Y/ufjUCKpoks0GFTQGiLw9QkvbvqdxTYpFQCLcBGAs/s1600/code-greater-than.png") center no-repeat;background-size:50px 50px}
@media only screen and (max-width:1024px){#slides ul{height:320px}
}
@media only screen and (max-width:800px){#slides li:nth-child(1) h4{font-size:18px;}
}
@media only screen and (max-width:640px){#slides ul{overflow:hidden}
#slides li:nth-child(1){width:100%;height:100%}
#slides li:nth-child(2),#slides li:nth-child(3),#slides li:nth-child(4),#slides li:nth-child(5){top:0;left:100%;height:100%}
#nextx{right:0;}
}
@media only screen and (max-width:480px){#slides ul{height:200px}
#slides li:nth-child(1) h4{font-size:13px;}
#nextx, #prevx{bottom:50%}
}
/*]]>*/
</style>
</b:if>

Agora procure por </body> e logo acima disso copie e cole o seguinte código:


<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function FeaturedPost(a){(function(e){var h={blogURL:window.location.origin,MaxPost:15,idcontaint:"#featuredpost",ImageSize:600,interval:4000,autoplay:false,loadingClass:"loadingxx",pBlank:"https://1.bp.blogspot.com/-jHWwEwTEwQ4/WJJ4k71QSYI/AAAAAAAApVc/XO_OitR_VGQS_Wquq1pv1h1D-dgiejSuQCLcB/s1600/nothumb_large.png",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],};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"></a><a href="#" id="nextx" title="next"></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(/.*?:\/\//g , "//").replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize)}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="/-/"+label.tagName;if(label.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());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('')
$(document).ready(function () {
FeaturedPost();
});
//]]>
</script>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script>
//<![CDATA[
var label={
   tagName:false
};
//]]>
</script>
</b:if>
<b:if cond='data:blog.searchLabel == &quot;Blogger&quot;'>
<script>
//<![CDATA[
var label={
   tagName:"Blogger"
};
//]]>
</script>
</b:if>
<b:if cond='data:blog.searchLabel == &quot;Tutorial CSS&quot;'>
<script>
//<![CDATA[
var label={
   tagName:"Tutorial%20CSS"
};
//]]>
</script>
</b:if>

Note basta trocar o nome do label para que apareça o conteúdo especifico.

Salve e pronto



Click to comment