Blogspot 레이블을 이용한 최신 관련게시물 위젯

Recent Posts Image Gallery For Blogger

[Recent and Related post widgets]
블로그에는 카테고리 기능이 없습니다.
이 위젯은 메뉴를 구성하거나 기존에 작성했던 관련포스팅을 재활용하는데 유용합니다.

CSS

.bsrp-gallery {padding:10px; clear:both;}
.bsrp-gallery:after {content: "";display: table;clear: both;}
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.bsrp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}
.bsrp-gallery a:hover img {background: #ee7e22;}

JAVASCRIPT

<script>
//<![CDATA[
function bsrpGallery(root) {
    var entries = root.feed.entry || [];
    var html = ['<div class="bsrp-gallery nopin" title="Get this from blogjuin.blogspot.com">'];
    for (var i = 0; i < entries.length; ++i) {
        var post = entries[i];
        var postTitle = post.title.$t;
        var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1yTUKeUmT7dr0b7Yjq6KzaSlpvhR7Aw76jDeEsV0ovFTfERW2TGb45yydIVIDaE6KYuYl642UZblIqP5kgtvknZJU2Smb5CcGjLY9lQwf2tc9U3-qYgOdlEhqtyUbDYTdIaIfRNG4YveE/s72-c/default+image.png';
        var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
        var links = post.link || [];
        for (var j = 0; j < links.length; ++j) {
            if (links[j].rel == 'alternate') break;
        }
        var postUrl = links[j].href;
        var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
        var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
        var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
        html.push('<div class="bs-item">', item, '</div>');
    }
    html.push('</div>');
    document.write(html.join(""));
}
//]]>
</script>

HTML

<script> 
var bsrpg_thumbSize = 100; 
var bsrpg_showTitle = true; 
</script> 
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>

특정 레이블만 표시할경우 {/-/레이블이름}

/feeds/posts/summary/-/블로그손질?max-results=8

적용된 모습

[강조글] 박스형 & 상단표시

아이프레임 리사이저(iFrame Resizer)

블로그스팟 RSS feed URL

[강조글] 왼쪽바 & 쌍따옴표