이번에는 구글블로그(블로그스팟) 최신글 위젯 설정방법에 대해 총정리 해드리려고 합니다. 썸네일이 나오게 하는 방법도 있고 썸네일 없이 글만 나오도록 하는 방법도 있습니다. 이번에 총 3가지 방법에 대해 알아보려고 합니다. 구글블로그(블로그스팟) 최신글 위젯 설정방법에 대해 궁금하시다면 따라오세요.
1. 구글블로그(블로그스팟) 최신글 위젯-1
구글블로그(블로그스팟)에서 최근 게시물을 사이드바에 위젯으로 넣고 싶나요?
어떤 사람들은 가능한 한 빠르게 로딩되기 위해서 썸네일 없이 글만 나오기를 원하시는 분들이 있습니다. 빠른 로딩을 원하시는분들은 썸네일 없이 글만 나오는 최신글 위젯을 더 선호하기 때문이죠~
<link href="http://mybloggerlab.com/Scripts/recent.css" rel="stylesheet" type="text/css"></link>
<script src="http://mybloggerlab.com/Scripts/json.js"></script>
<script type="text/javascript">
var numposts = 3;
var showpostthumbnails = false;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>
<script src="https://xxx.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs" type="text/javascript"></script>
여기서 설명해야 할부분이 있네요.
var showpostthumbnails = false; 썸네일 표시 유무
var displaymore = false; 더보기 표시 유무
var displaymore = false; 더보기 표시 유무
var displayseparator = true; 구분자 표시 유무
var showcommentnum = false; 댓글 수 표시 유무
var showpostdate = false; 날짜 표시 유무
var showpostsummary = false; 본문내용 표시 유무
var numchars = 100; 본문내용 표시할경우 요약글 숫자 제한>
var numchars = 100; 본문내용 표시할경우 요약글 숫자 제한>
위 소스에서 https://xxx.com/ 은 자신의 블로그 주소로 수정하셔야 합니다.
[블로그스팟 최신글 위젯 글목록만 나오게 설정]
위 이미지는 글목록만 표시한 예시입니다.
포스팅숫자는 5개,구분자 표시 true, 날짜표시 true 로 했을 경우 위와같은 위젯을 보실수가 있습니다.
2. 구글블로그(블로그스팟) 최신글 위젯-2
구글블로그(블로그스팟)에서 썸네일이 나오는 최근게시물을 사이드바에 위젯으로 넣고 싶나요?
많은 분들이 썸네일이 나오는 최근게시글 위젯을 찾고 있죠~ 구글에서 검색을 해도 이런 방법을 찾기는 매우 어렵습니다. 찾았다 할지라도 블로그 스킨이 틀리면 썸네일이 이상하게 나와서 css 를 수정해야 하는 수고를 해야하죠. 이는 전문가가 아니면 힘든 일입니다. 하지만 제가 이번에 알려드리는 방법은 매우 간단하고 쉽습니다.
<link href="http://mybloggerlab.com/Scripts/recent.css" rel="stylesheet" type="text/css"></link>
<script src="http://mybloggerlab.com/Scripts/json.js"></script>
<script type="text/javascript">
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
<script src="http://xxx.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs" type="text/javascript"></script>
위 소스에서 https://xxx.com/ 은 자신의 블로그 주소로 수정하셔야 합니다.
위 소스를 html 위젯에 추가해주시기만 하면 됩니다.
여기서 설명해야 할부분이 있네요.
var showpostthumbnails = true; 썸네일 표시 유무
var displaymore = false; 더보기 표시 유무
var displayseparator = true; 구분자 표시 유무
var showcommentnum = false; 댓글 수 표시 유무
var showpostdate = false; 날짜 표시 유무
var showpostsummary = true; 본문내용 표시 유무
var numchars = 100; 본문내용 표시할경우 요약글 숫자 제한
[블로그스팟 최신글 위젯 썸네일도 나오게 설정]
위 이미지는 썸네일표시 true, 포스팅숫자는 5개,구분자 표시 true, 날짜표시 true 로 했을 경우 위와같은 위젯을 보실수가 있습니다.
3. 구글블로그(블로그스팟) 최신글 위젯-3
아래는 다른 방식의 최신글 위젯입니다. 썸네일은 나오지 않습니다.
<span style="font-weight: bold;"><span style="font-weight: bold;"></span></span>
<div>
<div id="posts" style="padding: 0px;">
</div>
<div align="center" id="posts-pgno" style="cursor: pointer;">
</div>
</div>
<script language="Javascript" type="text/javascript">
/** url의 Parameter를 얻는 Class. **/
var request = {
parameter: function(name) {
return this.parameters()[name];
},
parameters: function() {
var result = {};
var url = window.location.href;
var parameters = url.slice(url.indexOf('?') + 1).split('&');
for (var i = 0; i < parameters.length; i++) {
var parameter = parameters[i].split('=');
result[parameter[0]] = parameter[1];
}
return result;
}
}
/** Page의 정보를 저장. **/
var page = {
//초기화.
init: function(home, max) {
page.home = home;
page.max = max;
page.label = '';
page.no = 1;
},
//url의 parameter에서 pgno 값을 읽어 옮.
setPage: function() {
var url = window.location.href;
var pl = url.lastIndexOf("/label/");
var pq = url.lastIndexOf("?");
if (pl != -1)
page.label = url.substr(pl + 7, ((pq != -1) ? pq : url.length) - (pl + 7));
if (url.indexOf("pgno") != -1)
page.no = request.parameter("pgno");
}
}
/** feed를 parsing 하여 결과 뿌려 줌. **/
var obj = {
init: function() {
obj.obj = document.getElementById('posts');
obj.pgno = document.getElementById('posts-pgno');
},
// 검색을 요청하는 함수
pingSearch: function() {
//변수 선언.
obj.s = document.createElement('script');
obj.s.type = 'text/javascript';
obj.s.charset = 'utf-8';
//feed callback 함수를 이용 json 객체 구한 후 pongSearch 함수호출.
if (page.label == '')
obj.s.src = '' + page.home +
'/feeds/posts/summary/?max-results=' + (page.no * page.max) +
'&alt=json-in-script&callback=obj.pongSearch';
else
obj.s.src = '' + page.home + '/feeds/posts/summary/-/' +
page.label + '?max-results=' + (page.no * page.max) +
'&alt=json-in-script&callback=obj.pongSearch';
//append.
document.getElementsByTagName('head')[0].appendChild(obj.s);
},
// 검색 결과를 뿌리는 함수
pongSearch: function(z) {
obj.obj.innerHTML = '';
/* 글 목록을 뿌려 줌. */
for (var i = (page.no - 1) * page.max; i < page.no * page.max; i++) {
//예외처리.
if (i >= z.feed.openSearch$totalResults.$t)
break;
//변수선언.
var li = document.createElement("li");
var a = document.createElement('a');
// 폰트크기 설정
li.style.fontSize = '10pt';
li.style.color = 'black';
//link로 사용할 base url.
var url = page.home + '/search';
if (page.label != '')
url += '/label/' + page.label;
//최종 link를 url 입력.
if (i == 0)
a.href = url + '?max-results=1';
else {
var pub = obj.changeTime(z.feed.entry[i - 1].published.$t);
a.href = url + '?updated-max=' + pub +
'&max-results=1&pgno=' + page.no;
}
a.innerHTML = obj.escapeHtml(z.feed.entry[i].title.$t);
//append
li.appendChild(a);
obj.obj.appendChild(li);
}
/* page 뿌려줌. */
obj.pongPgno(z);
},
// page를 뿌려주는 함수.
pongPgno: function(z) {
obj.pgno.innerHTML = '';
var before = document.createElement('a');
var next = document.createElement('a');
var ten = parseInt((page.no - 1) / 7);
var total = z.feed.openSearch$totalResults.$t;
/* before page */
before.innerHTML = '〈 ';
if (ten > 0)
obj.onMouseDown(before, ten * 7);
obj.pgno.appendChild(before);
/* page number */
for (var i = ten * 7; i < (ten + 1) * 7; i++) {
if (i >= total / page.max)
break;
var a = document.createElement('a');
obj.onMouseDown(a, i + 1);
a.innerHTML = ' ' + (i + 1) + ' ';
if (i + 1 == page.no)
a.style.color = 'red';
obj.pgno.appendChild(a);
}
/* next page */
next.innerHTML = '〉 ';
if (ten < parseInt(total / page.max / 5))
obj.onMouseDown(next, (ten + 1) * 7 + 1);
obj.pgno.appendChild(next);
},
//mouse click event.
onMouseDown: function(a, i) {
a.onmousedown = function() {
page.no = i;
obj.pingSearch();
}
},
//Time 에러 수정.
changeTime: function(str) {
var s = str.lastIndexOf('.') - 1;
var e = str.lastIndexOf('+') + 1;
if (e < 1) {
e = str.lastIndexOf('-') + 1;
var str2 = str.substr(0, s) + '-' + str.substr(e, 100);
} else {
var str2 = str.substr(0, s) + '%2B' + str.substr(e, 100);
}
return str2;
},
// HTML태그 안 먹게 하는 함수
escapeHtml: function(str) {
str = str.replace(/&/g, "&");
str = str.replace(/</g, "<");
str = str.replace(/>/g, ">");
return str;
}
};
// 블로그주소와 한번에 표시할 글의 개수
page.init('https://xxx.com/', 9);
page.setPage();
obj.init();
obj.pingSearch();
</script>
<style>
#posts {
padding-left: 0px;
}
#posts li {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 10px 0 10px 0px;
overflow: hidden;
list-style-type: decimal;
border-bottom: 1px dotted #ebebf3;
}
#posts li a {
color: #222;
text-decoration: none;
}
#posts-pgno {
padding: 20px 0 0 0;
}
#posts-pgno a {
text-align: center;
font-size: 10px;
padding: 3px 5px 3px 6px;
margin-right: 5px;
color: #666;
background-color: #f7f8f9;
border: 1px solid #f7f8f9;
font-weight: 600;
}
#posts-pgno a:hover {
background: #ff5b60;
text-decoration: none;
color: #fff !important;
border: 1px solid #ff5b60;
}
#posts li a:hover {
color: #ff5b60;
text-decoration: underline;
}
</style>
위 소스에서 https://xxx.com/ 은 자신의 블로그 주소로 수정하셔야 합니다.
[블로그스팟 최신글 위젯 글목록만 나오게 설정]
코드를 넣으시면 위와같은 최신글 위젯을 만나보실수가 있습니다.
썸네일을 안넣으실거면 이런 위젯이 더 깔끔한것 같네요.
위 소스는 제 블로그에 최적화 되어 있기 때문에 css 를 수정해야할수도 있습니다. 이런 방법도 있다는것을 참고하시기 바랍니다.
이렇게 해서 구글블로그 블로그스팟 최신글 위젯 설정방법에 대해 자세히 알아보았습니다. 블로그스팟은 티스토리에 비해 조금 어렵기는 하지만 이렇게 조금씩 알아가는 재미도 있는것 같습니다. 다음에는 더욱 유용한 정보로 찾아올것을 약속드리며 이번포스팅은 여기까지 하도록 하겠습니다. 오늘하루도 행복하세요.
0 Comments
댓글 쓰기