구글 블로그(blogger) 본문 요약 및 이미지 썸네일 처리하기

http://ielselog.blogspot.kr/2013/09/post-summary-with-thumbnail.html

구글 블로그(blogger) 본문 요약 및 이미지 썸네일 처리하기

아래는 데모 블로그에서처럼 홈에서 본문을 요약 처리하고 이미지가 있는 경우 이미지를 썸네일로 보여주는 자바스크립트 코드입니다.

데모 보기

 <script type='text/javascript'>  
 summary_noimg = 600;  
 summary_img = 600;  
 img_thumb_height = 250;  
 img_thumb_width = 350;  
 </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){  
 var div = document.getElementById(pID);  
 var imgtag = "";  
 var img = div.getElementsByTagName("img");  
 var summ = summary_noimg;  
 if(img.length>=1) {imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img [0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';  
 summ = summary_img;  
 }  
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';  
 div.innerHTML = summary;  
 }  
 //]]>  
 </script>  

코드의 일부 내용들은 자신의 스타일에 맞게 변경이 가능합니다.

 summary_noimg = 600;  

포스트에 이미지가 존재하지 않을 때 요약 페이지에 표시하게 될 글자 수

 summary_img = 600;  

포스트에 이미지가 존재할 때 요약 페이지에 표시하게 될 글자 수

 img_thumb_height = 250;  

요약 페이지에 표시될 썸네일 이미지의 높이(height)

 img_thumb_width = 350;  

요약 페이지에 표시될 썸네일 이미지의 너비(width)

 <span style="float:left; padding:0px 10px 5px 0px;">  

썸네일과 요약 텍스트 사이의 간격을 조절하고 싶다면, 여기서 패딩 부분 조정하면 됩니다.

자신의 스타일에 맞게 코드를 변경했다면, [대시보드 → 템플릿 → HTML편집] 으로 들어가서 검색으로 </head> 태그를 찾은 후 </head> 바로 위에 해당 코드를 복사하여 붙여넣기합니다.

그리고나서,

 <data:post.body/>  

이 코드를 조건 태그로 바꿔주어야 합니다.

• 기본 템플릿(구식 템플릿)
• 동적뷰 템플릿
• 어디선가 다운받은 템플릿

위 세가지 템플릿이 아닌, 블로거에서 제공하는 '깔금', '풍경', '세련', '무늬', '초현실', '여행' 템플릿을 수정하여 쓰고 있을 경우, Ctrl+F로 이 코드를 찾으면, 총 3개가 발견됩니다.

이 중 첫번째는 모바일 영역이니 건들지 마시고, 두번째에 보이는

 <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;);</script>  
 <div class='readmore-wrap'>  
 <span class='rmlink' style='font-weight:bold;padding:5px;float:right;text- align:right;'>  
 <a expr:href='data:post.url'>더 보기&#187;</a>  
 </span>  
 </div>  
 </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>  

모두 완료되면, '템플릿 저장'을 클릭해 줍니다.


코드의 출처는 mytutorialscafe.com 이라는 해외 블로그입니다. 코드 적용 전에는 반드시 백업을 해두시고, 또 테스트용 블로그에서 충분한 테스트를 해본 후 사용하시기 바랍니다.