구글 블로거 최신글 목록 가져오기

이 최근 게시물 위젯의 주요 장점은 없습니다. 운영하는 블로그에 맞게 스타일을 쉽게 적용 및 정의할 수 있습니다.

이 위젯에서 할 수 있는 것
- 디스플레이 제목 수정
- 포스트의 개수 변경
- 포스트 문자 수를 변경
- 포스트 날짜를 표시

스크린샷 참조:




Blogger에 최근 게시물 위젯을 추가하는 방법

Step1. Blogger 로그인 후 대시보드 > 레이아웃으로 이동하여 가젯 추가 링크를 클릭




Step2. 팝업창에서 아래로 스크롤하여 HTML/JavaScript를 선택




Step3. 아래의 옵션 중 하나의 코드를 선택 및 복사하여 붙여 넣습니다.

옵션1 : 최근 게시물 이미보기와 위젯
<div id="hlrpsa"> <script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js"> </script> <script> var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true; </script> <script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"> </script></div> <div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;"> <a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div> <noscript>Your browser does not support JavaScript!</noscript> <style type="text/css"> #hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYR5jH7mke9KeZ0XQy7xoyta17mVpXqbrqeIu2BCYtIAw3Of-pBNpSC7JcuryKGZP7eNtm0wj3MsWNMxkd5OOlV6ctD4zgu7M8kUbAvJKDhMFtpfKRKH5EVl_LbQSb7hERSlq1Gtjyum1b/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;} #rpdr, #rpdr a {color:#808080;} #hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;} .hlrps a {font-weight:bold; } .hlrpssumm {} </style>
옵션2 : 최근 게시물 제목만 표시
<div id="hlrpsb"> <script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script> <script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script> <script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div> <div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"> <a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div> <noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript> <style type=text/css> #hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYR5jH7mke9KeZ0XQy7xoyta17mVpXqbrqeIu2BCYtIAw3Of-pBNpSC7JcuryKGZP7eNtm0wj3MsWNMxkd5OOlV6ctD4zgu7M8kUbAvJKDhMFtpfKRKH5EVl_LbQSb7hERSlq1Gtjyum1b/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;} #rpdr, #rpdr a {color:#808080;} .bbrecpost2 { padding-top:6px; padding-bottom:6px; border-bottom: 1px #cccccc dotted; } </style>


Step4. 설정
· numposts = 게시물의 수를 표시합니다.
· showpostdate = 게시물의 날짜를 표시합니다. (false 표시안함 / true 표시)
· numchars = 게시물 내용의 글자수를 표시합니다.
· 해당 영역 스타일은 <stlye>에서 수정 및 추가하면 됩니다.
· "your-blog.blogspot.com" 라고 쓰여진 부분은 운영중인 블로그 주소로 교체합니다.

Step5. 위젯을 저장합니다.


출처 : http://helplogger.blogspot.kr/2012/04/recent-posts-widget-for-bloggerblogspot.html