CÓDIGO JQUERY
(colar abaixo de <head>)
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
<script src='//code.jquery.com/jquery-1.11.3.min.js'/>
CÓDIGO CSS
(colar acima de ]]></b:skin>)
/* ---- Estilo do box de posts recentes ----- */#related-adb {
width: 350px;
overflow: hidden;
height: 200px;
position: fixed;
bottom: 20px;
right: 20px;
background: #fff;
box-shadow: 1px 1px 2px #e6e6e6;
transition: all 0.5s;
}
#related-adb .header h2 {
font-size: 25px;
color: #ffffff;
margin: 0;
}
#related-adb .header {
padding: 10px 15px;
color: #ffffff !important;
background: #4bbecf;
}
#related-adb .adb {
position: absolute;
top: 10px;
right: 15px;
}
#related-adb .item {
padding: 15px;
width: 320px;
float: left;
}
#related-adb .list {
height: 120px;
overflow: hidden;
width: 600px;
transition: all 0.5s;
}
#related-adb img {
height: 100px;
float: left;
width: 50%;
margin-right: 10px;
}
#related-adb .header a {
color: #fff;
}
#related-adb .info {
font-size: 11px;
font-family: Arial,Georgia,serif;
color: #000000 !important;
margin-left: 0;
margin-right: 0;
}
#related-adb .navigation a {
float: left;
border: 1px solid rgba(0, 0, 0, 0.32);
margin-left: 10px;
font-size: 10px;
width: 10px;
padding: 3px;
}
#related-adb .navigation {
position: absolute;
width: 60px;
right: 20px;
bottom: 20px;
}
.relatedshow {
position: fixed;
bottom: 190px;
right: -50px;
transition: all 0.5s;
}
.relatedshow a {
color: #ffffff;
background: #4bbecf;
padding: 7px 15px;
box-shadow: 1px 1px 2px #e6e6e6;
}
CÓDIGO HTML
(colar como gadget HTML/JAVASCRIPT)
<script type='text/javascript'>
!function(){var a={homepage:"AQUI O ENDEREÇO HTTP DE SEU BLOG",title:"Posts recentes",
post:20,
scr:500,
showcredit:!0};if("object"==typeof relatedbox)for(var b in relatedbox)a[b]=relatedbox[b];var c='<div class="relatedshow" style="right: 0px;"><a href="#"><i class="fa fa-plus"></i></a></div><div id="related-adb" style="transform: translateX(400px);"><div class="header"><h2>'+a.title+'</h2><div class="adb"><a href="#" class="close"><i class="fa fa-times"></i></a></div></div><div class="list">',d="object"==typeof labelArray&&labelArray.length?"/-/"+shuffle(labelArray)[0]:"",f=0;$.ajax({type:"GET",url:a.homepage+"/feeds/posts/summary"+d+"?max-results="+a.post+"&alt=json-in-script",async:!0,contentType:"application/json",dataType:"jsonp",success:function(b){var d=b.feed.entry;if(d){for(var e=0;e<d.length;e++){for(var g,h=d[e],i=0;i<h.link.length;i++)if("alternate"==h.link[i].rel){var j=h.link[i].href;break}g=void 0!==h.media$thumbnail?h.media$thumbnail.url.replace("s72-c","w"+f+"-h400-c"):"https://3.bp.blogspot.com/-TGWhhhk5Ebo/V_QxTFme1JI/AAAAAAAABIM/ZXIL38U-HsEg34WWYFAliMNuqI3sqlFRwCLcB/s1600/imagen-no-encontrada.jpg";var k=h.title.$t,l=a.date?h.published.$t.substr(0,10):"";c+='<div class="item"><div class="ayudadeblogger"><img src="'+g+'"></div><div class="info"><h3><a href="'+j+'">'+k+"</a></h3><span>"+l+"</span></div></div>"}var m=a.showcredit?'':"";c+='</div><div class="navigation"><div class="left"><a href="#"><i class="fa fa-chevron-left" style="color:#4bbecf"></i></a></div><div class="right"><a href="#"><i class="fa fa-chevron-right" style="color: #4bbecf"></i></a></div></div>'+m}$("body").append(c),$("#related-adb").each(function(){function i(){$("#related-adb").css({transform:"translateX(400px)"}),$(".relatedshow").css("right",0)}function j(){$("#related-adb").css({transform:"translateX(0)"}),$(".relatedshow").css("right","-50px")}for(var b=$(this).find(".list"),c=$(this).find(".left a"),d=$(this).find(".right a"),e=0,f=0,g=!0,h=1;h<$(this).find(".item").length;h++)e+=$(this).find(".item").outerWidth();b.width(e+$(this).find(".item").outerWidth()),c.click(function(a){a.preventDefault(),0==f?f=-e:f+=350,b.css("transform","translateX("+f+"px)")}),d.click(function(a){a.preventDefault(),f==-e?f=0:f-=350,b.css("transform","translateX("+f+"px)")}),$(".relatedshow").click(function(a){a.preventDefault(),j()}),$(this).find(".close").click(function(a){a.preventDefault(),i(),g=!1}),$(window).scroll(function(){var b=$(window).scrollTop();b>a.scr&&g?j():b<a.scr&&g&&i()})})}})}();
</script>
