구글 블로그 스크립트 코드를 예제를 모아보았습니다. 게시물(포스트) 및 위젯/가젯 관련 HTML/자바스크립트 구성 모음입니다.
최근 게시물
최근 게시물 스크립트 예제 코드입니다. 출처는 소스 사이에 있습니다.
<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNK8PHcYVSVc6XZQmqHKFK1A07EyKa5wYOjmkrarmEGzNG7xU4e8Pkd1uJwrEkjCjY7fwhYChfMytinXHDzNtgZH6exRAQwK2B1SKkeas4U8C8l2uhKLtZhaHwRrdepIHiG1ajyaveD4fb/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow" target="_blank">소스 보기</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}
.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}
ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}
ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.recent-posts-container a{text-decoration:none;}
.recent-post-title {margin-bottom:5px;}
.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}
.recent-posts-details a{color: #777;}
</style>구글 블로그 랜덤 포스트
블로그 랜덤 포스트 예제 자료입니다. 구글 블로그는 게시물을 작성할 때 점프 브레이크를 누락하는 경우에 해당 게시물의 내용이 길어져서 페이징 시 정상적으로 노출이 안 되는 현상이 있습니다. 그리하여 보완책으로 랜덤 포스트를 추가해 보았으나, 저는 네트워크 로드가 길어지는 현상을 고려하여 제외하기로 합니다. 혹시라도 복구할 가능성이 있기에 백업을 하는 차원에서 게시합니다.
해당 소스는 제가 만든 것이 아니고 가져다 쓰던 것입니다. 그리하여 해석만 간단하게 진행하겠습니다. 먼저 style 태그로 아이디, 클래스 별 CSS를 지정합니다. 예를 들면 아이디가 random-posts와 같은 태그에 대한 스타일 설정입니다. </style>로 끝나는 부분에서 ul(unordered list) 태그로 리스트를 추가합니다. 그리고 이어서 자바스크립트를 추가합니다.
자바스크립트는 랜덤 포스트 숫자, 요약 글자수, 상세, 코멘트 등을 설정할 수 있습니다. 1개당 1초 정도의 로드가 있어서 처음에 5개로 하던 것을 1개로 변경한 상태입니다. 해당 부분은 var randomposts_number = 1; 이곳입니다.
그리고 랜덤포스츠 콜백함수를 이용할 수 있도록 추가하며 document.write를 통해 피드, 포스트를 블로그에 추가하도록 합니다. 첫 번째 스크립트에서 각종 변수값을 할당하며 두 번째 스크립트에서는 해당 값을 가지고 <li> 태그를 반복하여 생성합니다. 현재 자바스크립트 구성에서 이미지가 없는 경우 "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYJILCfhcacjL7gRdeT1609mBixd9i3brTks8aqlI9XeQnJJDO9idu3szy4zLsHXIYgyQ_O2CMmKm1q68qjGDn6lmTSCeruW5SJUUizRuBiKG4oUk4Ta7WPXRAR2B0svJ9UlT_bRc6rUs/s1600/no_thumb.png" 해당 이미지를 사용하고 있으며, 맨 마지막 줄의 document.write('<li>'); 리스트 태그부터 HTML을 작성합니다. nofollow 등 조건을 제외하시려면 해당 부분을 점검하시면 됩니다.
<style>부터 </ul>까지 붙여넣을 부분이며 그 다음부터는 결과물이 어떻게 되나 안내해드리겠습니다.
<style>
#random-posts img {
border-radius: 10px;
float: left;
margin-right: 5px;
width: 75px;
height: 75px;
background-color: #F5F5F5;
padding: 3px;
transition: all 0.2s linear 0s;
}
#random-posts img:hover {
opacity: 0.6;
}
ul#random-posts {
list-style-type: none;
padding: 0px;
}
#random-posts a {
font-size: 12px;
text-transform: uppercase;
padding: 0px auto 5px;
}
#random-posts a:hover {
text-decoration: none;
}
.random-summary {
font-size: 11px;
background: none;
padding: 5px;
margin-right: 8px;
}
#random-posts li {
margin-bottom: 10px;
border-bottom: 1px solid #EEEEEE;
padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 110;
var randomposts_details = 'yes';
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;
var randompostsnippet = "";
if (entry === undefined) {
}
else
{
if (entry === undefined) {
randompostsnippet = "";
}
else {
if ('content' in entry) {
randompostsnippet = entry.content.$t
} else {
if ('summary' in entry) {
randompostsnippet = entry.summary.$t
} else {
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 (entry === undefined) {
} else {
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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYJILCfhcacjL7gRdeT1609mBixd9i3brTks8aqlI9XeQnJJDO9idu3szy4zLsHXIYgyQ_O2CMmKm1q68qjGDn6lmTSCeruW5SJUUizRuBiKG4oUk4Ta7WPXRAR2B0svJ9UlT_bRc6rUs/s1600/no_thumb.png"
}
}
};
};
document.write('<li>');
document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
if (randomposts_details == 'yes') {
document.write('<span><div class="random-info">' + randomposts_commentsnum) + '</div></span>'
};
document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><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>