구글 블로그(Google Blogger)를 시작했습니다.
간단하게 생성해서 이것저것 만져보는데 재미납니다. 티스토리보다 더 꾸미기가 가능할듯도 하고....
그러나 네이버를 하셨던 분이 티스토리에 오시면 뭔가 복잡하고 꾸미기 힘들다는 생각을 하시는데 구글블로그(Google Blogger)도 똑 같네요.
티스토리를 하는 저도 구글 블로그는 너무 어렵습니다. ^^; 이것저것 건드려는 보는데 상당히 어렵네요.
사이드바에 랜덤 게시물 위젯 설치하기.
이것저것 정리해서 글 작성을 하는것보다 제가 블로그에 적용하면서 바로바로 글 작성을 하는것이 쉬울거 같아 두서없이 글 작성합니다.
구글블로그(Google Blogger)를 시작하셨다면 이미 알고 계시겠지만 사이드바가 있는 템플릿을 선택하셔서 적용했는데 막상 블로그에는 사이드바가 안나옵니다.
티스토리같이 뭔가를 선택하면 보여주는 시스템도 아니고.....
구글 블로그는 사용자가 일일이 만들어주어야 하는 부분들이 많습니다. HTML를 이용한 꾸미기를 해야 하기때문에 상당히 어렵게 느껴지는데 HTML를 아는 사람이라면 티스토리보다 더 자유롭게 꾸미기가 가능할듯 하네요.
설정 -> 레이아웃을 선택 하셔서 사이드바 '가젯 추가'를 클릭 하세요.
'HTML/JavaScript추가'를 클릭 하세요.
위 창이 나오면 '내용'란에 아래 코드를 넣어주세요.
<style>
#random-posts img {
float: left;
margin-right: 10px;
width: 65px;
height: 65px;
background-color: #F5F5F5;
padding: 3px;
}
ul#random-posts {
list-style-type: none;
}
#random-posts li {
margin-bottom: 10px;
}
.random-summary {
display: block;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 60;
var randomposts_details = 'yes';
randomposts_details2 = 'no';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {
total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue() {
for (var i = 0; i < randomposts_number; i++) {
var found = false;
var rndValue = get_random();
for (var j = 0; j < randomposts_current.length; j++) {
if (randomposts_current[j] == rndValue) {
found = true;
break
}
};
if (found) {
i--
} else {
randomposts_current[i] = rndValue
}
}
};
function get_random() {
var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
for (var i = 0; i < randomposts_number; i++) {
var entry = json.feed.entry[i];
var randompoststitle = entry.title.$t;
if ('content' in entry) {
var randompostsnippet = entry.content.$t
} else {
if ('summary' in entry) {
var randompostsnippet = entry.summary.$t
} else {
var randompostsnippet = "";
}
};
randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
if (randompostsnippet.length < randomposts_chars) {
var randomposts_snippet = randompostsnippet
} else {
randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
var whitespace = randompostsnippet.lastIndexOf(" ");
randomposts_snippet = randompostsnippet.substring(0, whitespace) + "…";
};
for (var j = 0; j < entry.link.length; j++) {
if ('thr$total' in entry) {
var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
} else {
randomposts_commentsnum = randomposts_commentsd
}; if (entry.link[j].rel == 'alternate') {
var randompostsurl = entry.link[j].href;
var randomposts_date = entry.published.$t;
if ('media$thumbnail' in entry) {
var randompoststhumb = entry.media$thumbnail.url
} else {
randompoststhumb = "http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/s1600/no_thumb.png"
}
}
};
document.write('<li>');
document.write('<img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/>');
document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
if (randomposts_details == 'yes') {
document.write('<span>' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</span>'
}
if (randomposts_details2 == 'yes') {
document.write('<span class="random-summary">' + randomposts_snippet) + '</span>'
}
document.write('<div style="clear:both"></div></li>')
}
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>
<div style="font-size: 10px; float: right;"><a href="http://helplogger.blogspot.com/2012/03/add-random-posts-widget-to-blogger.html" rel="nofollow">Random Posts Widget</a></div>
위 코드를 적용하고 사용하시면 됩니다. 코드 수정은 빨간색만 하시면 되는데
width: 65px; , height: 65px;
썸네일 크기 지정
var randomposts_number = 5;
보여줄 게시물 갯수
var randomposts_chars = 60;
본문 글자 수
var randomposts_details = 'yes';
글 작성 날짜, 코멘트갯수 보이기
randomposts_details2 = 'no';
본문 글 미리보기
위 글을 참고하셔서 수정해서 사용하시면 됩니다.
랜덤 게시물 위젯 설치가 완료되면 사이드바에 위 이미지처럼 보이게 됩니다.
