구글블로그 사용법: 목록페이지에서 글제목만 보이게 하는 방법

차례: 블로그대시보드 > 템플릿 > HTML편집 > 해당코드를 바꾼다

블로그의 글이 긴 경우에는  검색결과 또는 라벨검색 등의 목록 페이지가 길어져서 방문자가 글을 찾기가 어렵게 된다. 목록페이지에서는 글의 제목만 보여지도록 함으로써 그러한 불편을 줄이고 글을 쉽게 찾을 수 있도록 하려면 아래와 같이 HTML코드를 바꾸면 된다.

코드를 바꾸는 방법은 위의 그림을 참조하여 아래와 같이 한다.

=> 블로그대시보드 > 템플릿(Template) > HTML편집(Edit HTML)으로 이동한다
=> HTML코드가 있는 곳에(아무곳이나) 마우스를 한 번 클릭해서 HTML코드 창을 활성화 한다. HTML편집창에 마우스 커스(포인트)가 있도록 한다.

=> [컨트롤 + F]키를 쳐서 검색상자를 열고, 아래의 코드를 복사하여 붙여 넣고 [엔터]키를 친다. 그러면, 해당 코드가 있는 곳으로 이동되고 아래의 그림에서와 같이 노랑색으로 표시된다.

[찾아서 지울 코드]

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

=> 위에서 찾은 코드를 전부 지우고, 대신에 그 자리에 아래의 코드를 복사하여 붙여 넣는다.

[위의 코드를 지우고 그 자리에(대신에) 아래의 코드를 복사하여 붙여 넣음]

<!-- Title only on Static page -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<div style='padding:6px 0 6px 7px; border-right:1.5px solid #000; border-bottom:1.5px solid #000; margin-bottom:2px; background:#E6E4E4; color:#000000;'>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!-- Title only on Static page end-->

=> 템플릿저장(Save Template)를 눌러 저장을 한다.


글목록 꾸미기

붙여 넣는 코드의 중간 부분에 있는 <div style=" ~~~~>부분은 표시될 제목을 꾸미는 태그이다.
ㅇ padding: 글제목이 표시되는 영역의 안쪽 여백
ㅇ border-right: 글제목이 표시되는 영역의 오른쪽 테두리선
ㅇ border-bottom: 글제목이 표시되는 영역의 아래쪽 테두리선
ㅇ margin-bottom: 글제목이 표시되는 영역 사이이의 여백
ㅇ background: 글제목이 표시되는 영역의 배경색상
ㅇ color: 글제목의 글자 색상