Slide de posts recentes com categorias

CSS:

/* START EasySlider By helperblogger.com */

#slide-container {position: relative; height: 350px; width: 820px; font: 11px Arial; top:0px; padding:0px; background:transparent;}

#slide-container img{width:100%; height:auto;}

#slider {

    height: 350px;

    left: -8px;

margin-top: 16px;

margin-bottom: 40px;

    overflow-x: hidden;

    overflow-y: hidden;

    position: relative;

    width: 820px;

    font-family: 'montserrat';

}

a.slider-category {

    color: #77C6D9 !important;

   text-align: center;

    margin-bottom: 20px;

    margin-top: 13px;

    display: block;

    font: 15px 'montserrat';

}

span.readmore {background: #222;padding: 12px 22px;margin-top: 2em;margin-left: 17em;display: inline-block;font-family: 'montserrat';text-transform: none;letter-spacing: 1px;color:white;font-size: 12px;  -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease;  transition: all 0.4s ease;}

    span.readmore:hover{background: #77C6D9;}

span.readmore a{color:#fff !important;}

.slide-desc h2 {

    display: block !important;

    margin: 0px auto 10px !important;

    font-family: 'montserrat';

text-align: center;

    text-transform: none;

    letter-spacing: 2px;

    font-size: 16px;

    width: 300px;

}

.slide-desc {

    background: rgba(255, 255, 255, 0.85);

    color: #000;

    padding: 10px;

    position: absolute;

   top: 25%;

     padding: 11px 0px 24px;

    width: 500px;

    left: 50%;

    margin-left: -250px;

    z-index: 9;

}

#slider ul {padding: 0; margin: 0; width: 820px; height: 350px;}

#slider li {width: 820px; height: 350px; overflow: hidden; margin: 0; padding: 0; list-style: none;}

#prevBtn, #nextBtn {display: none; width: 30px; height: 77px; position: relative; text-indent: -9999px; top: -200px; left: 5px;}

#nextBtn {left: 612px !important; top: -280px;}

#prevBtn a, #nextBtn a {display: block; position: relative; width: 30px; height: 77px; background: url('http://i.imgur.com/JyS9ojB.png') no-repeat 0 0;}

#nextBtn a {background: url('http://i.imgur.com/jcR1RnE.png') no-repeat 0 0;}

/* END EasySlider By helperblogger.com */

APÓS </BODY>:

<!-- Start easy content slider by helperblogger.com -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

<script src='http://static.tumblr.com/uoel5vg/p51nl0jk4/easyslider1.7.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function(){

 $("#slider").easySlider({

 auto: true,

 continuous: true

 });

});

//]]>

</script>

<!-- End easy content slider by helperblogger.com -->   

HTML:

<div id="slider">

<script style="text/javascript">

    var showpostthumbnails_gal  = true;

    var showpostsummary_gal     = true;

    var random_posts            = false;

    var numchars_gal            = 150;

    var numposts_gal            = 10;

    function showgalleryposts(json) {

    var numPosts = json.feed.openSearch$totalResults.$t;

    var indexPosts = new Array();

    document.write('<ul>');

    for (var i = 0; i < numPosts; ++i) {

        indexPosts[i] = i;

    }

    if (random_posts == true){

    indexPosts.sort(function() {return 0.5 - Math.random()});

    }

    if (numposts_gal > numPosts) {

        numposts_gal = numPosts;

    }

    for (i = 0; i < numposts_gal; ++i) {

        var entry = json.feed.entry[i];

        var post_category = entry.category[0].term;

        var category = '<a class="slider-category" href="/search/label/'+ post_category +'?max-results=10">'+ post_category +'</a>';

        var entry_gal = json.feed.entry[indexPosts[i]];

        var posttitle_gal =  entry_gal.title.$t;

        for (var k = 0; k <  entry_gal.link.length; k++) {

            if ( entry_gal.link[k].rel == 'alternate') {

                posturl_gal =  entry_gal.link[k].href;

                break;

            }

        }

        if ("content" in entry_gal) {

            var postcontent_gal = entry_gal.content.$t

        }

        s = postcontent_gal;

        a = s.indexOf("<img");

        b = s.indexOf("src=\"", a);

        c = s.indexOf("\"", b + 5);

        d = s.substr(b + 5, c - b - 5);

        if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {

            var thumburl_gal = d

        } else var thumburl_gal = 'http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';

        document.write('<li><div id="slide-container"><span class="slide-desc">');

        document.write(category + '<h2 style="margin:10px 0px;">' + posttitle_gal + '</h2>');

        document.write('<span class="readmore"><a href="' + posturl_gal + '">Leia Mais </a></span>');

        var re = /<\S[^>]*>/g;

        postcontent_gal = postcontent_gal.replace(re, "");

        if (showpostsummary_gal == true) {

            if (postcontent_gal.length < numchars_gal) {

                document.write(postcontent_gal);

                document.write('</span>')

            } else {

                postcontent_gal = postcontent_gal.substring(0, numchars_gal);

                var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");

                postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);

                document.write('</span>')

            }

        }

        document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="750px" height="350"/></a></div>');

        document.write('</li>');

    }

    document.write('</ul>');

    

}

</script>

<script style="text/javascript">

 var numposts_gal = 10;

 var numchars_gal = 0;

 var random_posts = false; // random posts

 

</script>

<!-- replace with your web address (marked with red color) -->

<script src="http://blog-de-testes-20.blogspot.com.br/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>

</div>