※ 템플릿 수정은 많은 시행착오를 겪어야 합니다. 여러 번 수정을 거쳐야 할 수 있습니다. 따라서 현재 운영중인 블로그에 바로 적용하지 말고, 별도의 템플릿 편집용 블로그를 만들어 충분한 테스트를 거친 뒤 반영하는 방식을 추천합니다. 구글 Blogger에서는 여러 개의 블로그를 만들 수 있으므로, 꼭 테스트용 블로그를 하나 만들어 해보세요.
팁을 설명하기에 앞서, 구글 블로거에 대한 몇 가지 이해가 필요합니다. 블로거 도움말을 꼭 읽어보세요.
간단히 방법만 적어보겠습니다.
블로그 설정화면으로 들어갑니다. '템플릿' - 'HTML편집' 버튼을 누릅니다.
경고문이 나오는데, 한번 읽어본 뒤 '계속' 버튼을 누릅니다.
HTML코드가 출력됩니다. 이것만으론 러프한 편집만 가능하고, 실제 디테일한 부분을 수정하려면 상단의 '가젯 코드 펼쳐서 보여주기' 에 체크합니다. 가젯 코드들이 확장되어 실제 코드들이 보입니다.
찾기(Ctrl + F) 기능을 이용해, '<div class='blog-posts hfeed'>' 부분을 검색합니다. 기본 템플릿이라면 비슷한 부분이 두 개가 나올 겁니다. 위쪽은 안에 인클루딩되는 내용에 관련된 부분이고, 실제 화면에 보여지는 부분은 아랫쪽입니다. 따라서 우리는 아랫쪽 부분을 수정해주면 됩니다.
날짜에 해당하는 부분은
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
입니다. 자세히 보시면, 클래스명과 태그명을 통해 이게 무슨 기능을 하는지 대충 알 수 있습니다. 역으로, 현재 블로그 화면 내에 표시되고 있는 부분을 템플릿에서 찾을 수도 있습니다. 가령 블로거 기본 템플릿에서 날짜 부분의 HTML소스를 확인해보면(크롬에서 F12키, 개발자 툴 이용) <h2 class="date-header"> 와 같은 클래스네임을 가진 h2 태그로 둘러싸인 걸 볼 수 있죠. 따라서 템플릿 태그 내에서도 같은 부분을 찾아보면 됩니다. 다시 위를 보시면, 날짜에 해당하는 부분에 <h2 class='date-header'> 가 있죠? 이런 식으로 블로그 페이지 내에서 어떤 부분이 어떤 템플릿 코드에 해당하는지 찾아볼 수 있습니다.
기본적으로는 이렇게 알아낸 코드들의 순서를 바꿔주고, CSS로 위치를 다시 잡아주면서 정렬하게 됩니다. 제 블로그 게시물페이지 상단에 설정된 템플릿 코드는 다음과 같습니다.
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<data:adStart/>
<h4><a class='bk' expr:href='data:post.url'><data:post.title/></a></h4>
<data:adEnd/>
<h3 class='date-header' style='float: left'>
<data:post.dateHeader/> |
<a class='bk2' expr:href='data:post.addCommentUrl'><span class='brd'><data:post.numComments/></span> comments</a>
</h3>
h4 태그를 이용해 게시물 제목을 나타냈습니다. <data:post.title/>이 바로 게시물의 제목을 나타내주는 템플릿 코드이지요. <data:post.dateHeader/> 는 보시다시피 날짜를 나타냅니다. <data:post.numComments/>는 게시물에 달린 댓글 수를 나타내지요.
이런 식으로, 간단하게 각 요소가 나타나는 순서를 변경해줄 수 있습니다. 모양을 꾸미는 것은 CSS를 통해 처리합니다. 템플릿 코드와는 달리 CSS는 소스보기를 통해서 쉽게 확인하실 수 있으니 제 블로그를 직접 뜯어보시면(?) 아실 수 있을 겁니다(크롬의 개발자 도구를 이용해 보세요). 또한 간단한 CSS 변경에 대해서는 웹에 강좌가 많으니, 구글링을 통해 찾아보도록 합시다.
우선 급하게 요점만 적어 써둡니다. 나중에 좀 더 쉽고 자세히 설명해보도록 하겠습니다.
글
감사합니다 이따가 해볼게요 지금 주식시장 보는중이라서요
답글삭제위부분 코드는 찻았는데 그걸 지우고 아래에 코드를 넣어주나요??
답글삭제네 해당 코드를 바꿔주면 됩니다. 교체 하시기 전에 항상 기존 템플릿 코드는 꼭 백업해 두세요. 테스트용 블로그를 따로 운영하는 게 좋습니다.
삭제이래 저래 감사합니다 꾸벅 글도 남겨주시고^^
답글삭제여유생기면 더 자세히 한번 써볼께요 ^^
삭제작성자가 댓글을 삭제했습니다.
답글삭제Kais님 덕에 블로그 템플릿을 이해하는데, 많은 도움을 받았습니다.
답글삭제메인화면과 개별 포스트의 헤더와 푸터를 차별화하려는 시도를 하다가
뭔가 꼬여서 막막했는데, 왠지 잘 될 것 같다는 예감이 듭니다.
블로거의 템플릿은 메인용, 목록용, 포스트용 세 가지 조건을 사용할 수 있으므로 말씀하신 구성도 충분히 가능하지 않을까 싶습니다. 도움이 되어 기쁩니다. 구글신께 의지하시면(?) 더 좋은 방법을 찾을 수 있지 않을까 싶네요.
삭제개별포스트용에서만 footer가 나타나도록 만드는데 성공했네요. 다시 한번 감사드려요.
삭제테마를 하나 받았는데 적용시켜 보니 레이아웃이 이상하더군요..
답글삭제블로그 게시물은 중간에 보통 하나 있어야 되는데 오른쪽 사이드바에도 블로그 게시물 레이아웃이 있어 지워지지도 않고 html 편집을 해야될 거 같은데 어떻게 해야하나요?
제발 도와주세요
jsc0273@gmail.com
위 댓글과 동일인입니다. http://jscarp.blogspot.kr 들어가셔서 레이아웃 보시고 설명좀 해주시면 감사하겠습니다 ㅠㅠ
답글삭제지금 들어가보니 정상적으로 보이는데요, 벌써 고치신 모양이죠?
삭제그리고 Blogger에 문제가 생겼을 때 https://plus.google.com/communities/101599739929385832752 구글플러스 커뮤니티에서 물어보시면 많은 분들이 도와주실 겁니다.
삭제으... 어떻게 해야할지 전혀 감을 못잡겠네요 @△@
답글삭제