구글 블로그 메인화면 간략하게 표기하기 (Read more)

구글 블로그에는 타블로그와 같이 메인화면 글을 간략하게 해주는 기능이 따로 없습니다. 따라서 구글 블로그 메인화면은 보통 작성하신 포스팅이 그대로 메인에 위치하여 포스팅 길이가 길면 스크롤의 압박이 심한데요. 따라서 구글 블로그 메인화면에 올라와져있는 포스팅을 간략하게 표기하기(Read more) 기능에 대해서 알아보도록 하겠습니다.

1. 먼저 구글 블로그 관리자화면에서 '테마'를 클랙해주신 다음 'HTML 편집' 눌러줍니다.

2. 'Ctrl + F' 키를 눌러 검색창에 "<data:post.body/>를 넣고 엔터를 누르면 검색이 되는데, 여기서 중요한 것은 두번째 <data:post.body/>로 이동하세요. 위에는 <!-- Then use the post body as the .... good G+/FB sinppet ing --> 라는 태그가 있을 것입니다

3. <data:post.body/> 란을 찾으셨다면 <div class='post-body entry-content.............. Body&quot;'> <data-post.body/> 를 지우신 다음에 아래의 코드를 삽입합니다.

b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>

 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

4. 그리고 <div style='clear:both;'/><!-- clear for photos floats --> 아래에 있는 닫힌 태그</div>는 필요가 없기 때문에 삭제해줍니다.

5. </head> 태그를 검색하여, </head> 태그 위에다가 아래의 코드를 삽입해주세요

<script type='text/javascript'>

posts_no_thumb_sum = 490;

posts_thumb_sum = 400;

img_thumb_height = 160;

img_thumb_width = 180;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID, pURL, pTITLE){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = posts_no_thumb_sum;

if(img.length>=1) {

imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';

summ = posts_thumb_sum;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<style type='text/css'>

.post-footer {display: none;}

.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}

 .readmore a {text-decoration: none; }

</style>

</b:if>

</b:if>

6. 그 다음에 저장하기를 눌러주시면 적용이 되시는데요.

posts_no_thumb_sum = 490;

썸네일이 없을 때 글자 수 지정

posts_thumb_sum = 400;

썸네일이 있을 때 글자 수 지정

img_thumb_height = 160;

썸네일 높이 지정(세로)

img_thumb_width = 180;

썸네일 넓이 지정(가로)

위의 글자 수 및 넓이 지정하시면 수정 가능하시오니 참조 부탁드립니다.