구글 블로거 블로그에 랜덤 게시물 위젯 만드는 방법

이 블로그의 오른쪽에 '랜덤 포스트'라는 위젯이 생겼습니다. 말 그대로, 이 블로그에 쌓인 포스트 중 다섯개를 임의로 불러내어 보여주는 위젯입니다.

저 기능을 추가하기 위해서는 구글 블로거의 자바스크립트 위젯 추가 기능을 이용하여, 아래 내용을 붙여넣어주면 됩니다.

<ul id='random-posts'>
<script type='text/javaScript'>
var tow_numposts=5;
var tow_snippet_length=150;
var tow_info='yes';
var tow_comment='Comments';
var tow_disable='Comments Disabled';
var tow_current=[];var tow_total_posts=0;var tow_current=new Array(tow_numposts);function totalposts(json){tow_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<tow_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<tow_current.length;j++){if(tow_current[j]==rndValue){found=true;break}};if(found){i--}else{tow_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(tow_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<tow_numposts;i++){var entry=json.feed.entry[i];var tow_posttitle=entry.title.$t;if('content'in entry){var tow_get_snippet=entry.content.$t}else{if('summary'in entry){var tow_get_snippet=entry.summary.$t}else{var tow_get_snippet="";}};tow_get_snippet=tow_get_snippet.replace(/<[^>]*>/g,"");if(tow_get_snippet.length<tow_snippet_length){var tow_snippet=tow_get_snippet}else{tow_get_snippet=tow_get_snippet.substring(0,tow_snippet_length);var space=tow_get_snippet.lastIndexOf(" ");tow_snippet=tow_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var tow_commentsNum=entry.thr$total.$t+' '+tow_comment}else{tow_commentsNum=tow_disable};if(entry.link[j].rel=='alternate'){var tow_posturl=entry.link[j].href;var tow_postdate=entry.published.$t;if('media$thumbnail'in entry){var tow_thumb=entry.media$thumbnail.url}else{tow_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieye3CdBwT9Lx1vGJeUeAMSeOXuGDPw-joza3yEQ6dNdss_DYVwclmM_ADhUAQiUYXnq5s9I7GWW9UfMIMleO3xDjILgjqd0yCT1Hlyf47dTcfMZ39ui8Fl9KRe9FvJiKz6QzfLwQTJcI/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+tow_posttitle+'" src="'+tow_thumb+'"/>');document.write('<div><a href="'+tow_posturl+'" rel="nofollow" title="'+tow_snippet+'">'+tow_posttitle+'</a></div>');if(tow_info=='yes'){document.write('<span>'+tow_postdate.substring(8,10)+'/'+tow_postdate.substring(5,7)+'/'+tow_postdate.substring(0,4)+' - '+tow_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<tow_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+tow_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
<p><a href="https://www.talkofweb.com/show-random-posts-with-thumbnails-in-blogger" rel="nofollow" title="Talk of web Blogger Widgets">Grab this Widget</a></p>
</ul>
<style type='text/css'>
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:100px;height:100px;padding:3px}
#random-posts li{margin: 0px 0px 10px 0px;}
</style>

코드 출처: Show Random Posts with Thumbnails in Blogger

 

단, 이 코드를 그대로 붙여넣으면 1) 썸네일 이미지가 강제 표현되고 2) 게시물의 날짜가 연/월/일 이 아닌 일/월/연 순으로 표시됩니다. 그 문제의 해결 방식은 다음과 같습니다.

1.  document.write('<img alt="'+tow_posttitle+'" src="'+tow_thumb+'"/>'); 삭제.
2.  tow_postdate.substring(8,10)+'/'+tow_postdate.substring(5,7)+'/'+tow_postdate.substring(0,4) 를 tow_postdate.substring(0,4)+'/'+tow_postdate.substring(5,7)+'/'+tow_postdate.substring(8,10) 으로 변경.

기록 차원에서, 그리고 배운 적 없는 프로그래밍을 아주 조금이나마 해냈다는 뿌듯함을 표출하기 위해, 적어둡니다.