Caixa retrátil de posts recentes para blog

Views:
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>
Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage