Blogger Post Thumbnailer

http://rrvf.blogspot.jp/2012/07/blogger-post-thumbnail-javascript.html Bloggerの記事をサムネイル表示するスクリプトのサンプルです。

by Tushar Thakare

HTML

<div id="headline" class="clearfix"/>
<script>//<![CDATA[
(function(window,name,element,offset,max,size){
window[name] = function(d){
    var es = d.feed.entry;
    var item = 0;
    var root = $(element);
    size = "s" + size;
    for(var i = offset, k = es.length; i < k && item < max; i++){
        var e = es[i];
        var c = e.content.$t;
        var img = $(c).find("img").first();
        var src = img.attr("src");
        if(!src) continue;
        if(src.indexOf("https://blogger.googleusercontent.com/tracker/") != -1) continue;
        if(src.search(/^(http|https)+\:\/\/lh\d+\.googleusercontent.com\//i) != -1 || src.search(/^(http|https)+\:\/\/\d+\.bp\.blogspot\.com\//i) != -1 || src.search(/^(http|https)+\:\/\/lh\d+\.ggpht.com\//i) != -1){
            var a = src.split('/');
            if(a.length == 9) a[7] = size;
            else if(a.length == 8) a[7] = size + '/' + a[7];
            src = a.join('/');
        }
        var link;
        for(var j = 0, l = e.link.length; j < l; j++){
            if(e.link[j].rel.indexOf("alternate") != -1){
                link = e.link[j].href;
                break;
            }
        }
        root.append(
            $("<div/>").addClass("outer").append(
                $("<div/>").addClass("inner").append(
                    $("<a/>").attr("href",link).append(
                        $("<img/>").attr("src",src)
                    )
                ),
                $("<p/>").addClass("title").append(
                    $("<a/>").attr("href",link).append(e.title.$t)
                )
            )
        );
        item++;
    }
};
})(window,"headline","#headline",0,20,400);
//]]></script>

<script src='http://viofd.blogspot.com/feeds/posts/full?q=autosell&redirect=false&amp;max-results=50&amp;alt=json-in-script&amp;callback=headline'></script>

CSS

*{margin:0;padding:0;font-family:"ヒラギノ角ゴ Pro W3",Osaka,"メイリオ",Meiryo,Arial,Helvetica;}
.clearfix:after{content:'.';display:block;clear:both;height:0;visibility:hidden;}
.clearfix{min-height: 1px;}
* html .clearfix{height: 1px;/*\*//*/height: auto;overflow: hidden;/**/}

#headline .outer{
    float:left;
    margin:0 0 6px 6px;
    text-align:center;
    overflow:hidden;
    border:1px solid #aaa;
    width:230px;
    height:120px;
    position:relative;
    box-shadow:0 0 3px rgba(0,0,0,0.2);
    background-color:#fff;
}
#headline .outer .title{
    width:230px;
    position:absolute;
    left:0;
    bottom:0;
    background-color:#333;
    background-color:rgba(0,0,0,0.75);
}
#headline .outer .title a{
    display:block;
    padding:1px 5px;
    font-size:70%;
    color:white;
    text-decoration:none;
}
#headline .inner{text-align:center;}
#headline .inner img{height:180px;}