구글블로그 사용법: 홈페이지(Home)에서 글 제목(Title)만 보이게 하는 방법
블로그의 글들이 긴 경우에는, 방문자가 홈(Home)으로 들어 왔을 때 어떤 글들이 새로이 올라왔는지 한눈에 파악하기가 어렵다.
이럴 때는 홈(Home)에서는 글들의 제목(title)만 보여지고, 보고자 하는 글 제목을 클릭하면 해당 글의 페이지가 열리도록 하는 것도 하나의 좋은 방법이 될 것 같다.
[ Home 에서는 글 제목만 보이게 한 예]
방법은 아래의 코드를 </head> 위에 추가한다 (맨 아래 그림 참조).
=> 블로그 대시보드에서 템플릿(Template) > HTML편집(Edit HTML)을 선택하여 HTML 편집창을 연다
=> HTML이 있는 창의 아무곳에나 마우스를 한 번 클릭하여 편집창을 활성화 한 다음 > 키보드의 [컨트롤 + F]키를 쳐서 찾기상자를 연다 >
=> 찾기상자에 " </head> "를 입력하거나 복사하여 붙여 넣고 [엔터]키를 친다. 그러면 </head>가 있는 곳으로 이동되며, </head>에 노랑색 형광펜으로 표시가 된다.
=> 아래의 코드를 복사하여 </head> 바로 위에 추가한다.
즉, 아래와 같은 위치가 된다.
=> 편집창 맨위의 왼쪽에 있는 저장(Save Template) 버튼을 눌러 저장을 하고 빠져 나온다.
아래의 코드를 그대로 붙여 넣었다면, 위 그림에서와 같은 모양이 될 것이다.
코드에 있는 숫자, 선종류와 색상, 글자크기와 색상 등을 블로그에 어울리도록 조정하여 적용하면 보다 멋진 Home 페이지가 될 것이다.
[추가할 코드]
[참고: HTML편집창과 코드 붙여 넣기]
이럴 때는 홈(Home)에서는 글들의 제목(title)만 보여지고, 보고자 하는 글 제목을 클릭하면 해당 글의 페이지가 열리도록 하는 것도 하나의 좋은 방법이 될 것 같다.
[ Home 에서는 글 제목만 보이게 한 예]
방법은 아래의 코드를 </head> 위에 추가한다 (맨 아래 그림 참조).
=> 블로그 대시보드에서 템플릿(Template) > HTML편집(Edit HTML)을 선택하여 HTML 편집창을 연다
=> HTML이 있는 창의 아무곳에나 마우스를 한 번 클릭하여 편집창을 활성화 한 다음 > 키보드의 [컨트롤 + F]키를 쳐서 찾기상자를 연다 >
=> 찾기상자에 " </head> "를 입력하거나 복사하여 붙여 넣고 [엔터]키를 친다. 그러면 </head>가 있는 곳으로 이동되며, </head>에 노랑색 형광펜으로 표시가 된다.
=> 아래의 코드를 복사하여 </head> 바로 위에 추가한다.
즉, 아래와 같은 위치가 된다.
......................................
아래의 추가할 코드
</head>
아래의 추가할 코드
</head>
=> 편집창 맨위의 왼쪽에 있는 저장(Save Template) 버튼을 눌러 저장을 하고 빠져 나온다.
아래의 코드를 그대로 붙여 넣었다면, 위 그림에서와 같은 모양이 될 것이다.
코드에 있는 숫자, 선종류와 색상, 글자크기와 색상 등을 블로그에 어울리도록 조정하여 적용하면 보다 멋진 Home 페이지가 될 것이다.
[추가할 코드]
<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {color:#333333;}
.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}
</b:if>
</style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {color:#333333;}
.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}
</b:if>
</style>
[참고: HTML편집창과 코드 붙여 넣기]