리아트리스의 마법궁전: 구글 블로그 글 목록 만들기

글고보니 구글 블로그의 라벨은 기본값이 네이버나 티스토리 블로그와 다르게 라벨에 있는 글들이 한번에 다 나오는 방식이더군요. --

이러한 방식은 해당 라벨에 있는 글들을 한번에 볼 수 있으니 좋은 방식이긴 하지만, 반면에 스크롤이 너무 길어지게 되는 단점이 있어 문제가 되더라구요..

그래서 요런 블로그 라벨을, 글 요약식으로 나오게 하는 방법을 알려드릴께요.

먼저 Blogger 편집에서 테마 -> HTML 편집을 누르세요.

그 다음에는 HTML편집에서

<b:include data='post' name='post'/>

를 검색하셔셔 이를 고치시면 되는데요.

<b:include data='post' name='post'/>

부분을

<!--Lavel and archive page title only hack Start-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<h3 class='title-only'><a expr:hred='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<!--Label and archive page title only hack End-->

로 고치시면 제목이 list 형식으로 나오게 되요.

여기서 목록 스타일을 바꾸고 싶으시면 <h3>안을 편집하시면 되구요

위의 코드를 적용하면 요런 식으로 나오게 되는데요.

사실 제목만 덩그러니 나와서 멋이 없죠... 그래서 요 코드를 네이버 블로그처럼 제목 + 글 요약으로 바꿀 수 있는 방법을 알아봤네요 ㅎㅎ

찾아보니

<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>

요 코드를 HTML편집에서 <head> 앞에 붙여넣으시면 되구요.

해당되는 코드의 숫자

summary_noimg = 600; - image 없을 때 미리 보여지는 글자의 갯수

summary_img = 600; - image 있을 때 미리 보여지는 글자의 갯수

img_thumb_height = 250; - 미리 보여지는 그림의 높이

img_thumb_width = 350; - 미리 보여지는 그림의 너비

를 고치시면 변경하실 수 있어요.

이 코드를 붙여넣으신 뒤에 HTML편집에서

<data:post.body/>

를 검색하면 2개나 그 이상 나올수가 있는데요. 여기서

data:post.hasjumplink 바로 앞쪽의 <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>

요 위의 코드로 교체하시면 되요.

저 코드들을 다 성공적으로 적용하면 이런 식의 목록으로 나오게 되는데요.

관리가 귀찮고 예전 식으로 글이 하나씩 나오는 게 더 나아서 그냥 원래대로 돌려 놓았다는.....

리아트리스의 마법궁전

구글 블로그 글 목록 만들기

댓글 없음:

댓글 쓰기

Translate