【티에디션】티스토리 블로그 메인 꾸미기

티스토리 블로그, 티에디션으로 메인 화면 꾸미기

티스토리 블로그를 이용하면서 지금까지는 메인에 최신글이 화면에 나오도록 했었는데, 티에디션을 이용해서 깔끔하게 티스토리 블로그 메인을 꾸며보겠습니다.

요즘 블로그를 이것저것 만지면서 최근 글이 전부 블로그 관련글만 올라오고 있네요 ㅠㅠ 죄송합니다~ 조금 더 정비해서 좋은 글로 찾아뵐께요~ ^^;;

티에디션이란 자신의 블로그 첫 화면을 다양한 형태로 꾸미는 도구로 메인 화면에 투고한 글을 보기 좋게 정렬해주는 프로그램입니다.

사용법은 무척 간단해요. 스킨 설정하실 때처럼 직접 수정해서 디자인을 구성할 수 있답니다.

ⓐ 티에디션 사용하기

먼저 티에디션 사용하기 위해서는 관리자모드에서 설정이 필요합니다.

티스토리 관리자모드 > 꾸미기 > 화면설정

들어가보면, 티에디션이라는 메뉴가 있고 우측 상단에 '사용하기' 버튼이 있습니다. 클릭해서 들어가면, '티에디션 시작하기' 버튼이 나옵니다.

이 버튼을 클릭하면 원하는 방식으로 디자인을 수정할 수 있습니다.

ⓑ 디자인 설정하기

디자인 설정은 에디터가 제공되므로 원하시는 디자인으로 간편하게 수정이 가능합니다. 처음 스킨을 선택할 때처럼 간편하게 원하시는대로 수정하시면 됩니다.

상단의 '추천세트'를 누르면 티스토리에서 추천하는 홈 화면이 설정되는데, 살펴보면 상단/중단/하단에 3개의 묶음이 보입니다.

원하는 부분을 선택하시고 좌측에 있는 에디터를 이용해서 원하시는 디자인을 선택하여 편집이 가능합니다.

또, 에디터의 상단에 있는 아이템, 글선택, 디자인, HTML 등을 이용해서 비교적 자유롭게 디자인과 소스 코드를 수정할 수도 있습니다.

1. 아이템에서는 해당 부분의 기본적인 노출 방법을 설정할 수 있습니다. 종류는 헤드라인형/목록형/갤러리형/조합형 네가지가 있습니다. 

저는 상단에 2개의 최신글을 노출하기 위해 갤럴리형의 두번째 아이템을 선택했습니다.

2. 글선택에서는 원하는 글이나 카테고리를 직접 선택할 수 있습니다. 상단에는 모든 최신글을 노출하기 위해 전체 폴더를 선택했습니다.

제 블로그 중단에는 인기글을 노출시키기 위해, 카테고리별 > 인기순 > VIEW 추천 많은 글로 선택했습니다.

그 외에도, 조회수, 댓글, 트랙백 등이 있고 카테고리나 태그별로도 선택 가능하므로 취향대로 선택해주시면 되겠습니다. 

3. 디자인에서는 타이틀, 글제목, 글요약, 노출 정보 등이 설정 가능하며, 각각 폰트, 글자 크기, 글자색 등도 설정이 가능합니다.

또, 특징적으로는 역시 티스토리답게 소스 수정도 가능합니다. 선택한 아이템이 마음에 들지 않는다면, HTML을 선택해서 수정이나 신규 생성도 가능하답니다.

HTML 코드를 이용할 수 있다면 마음에 드는 디자인을 선택한 후, 원하는대로 수정도 가능합니다.

ⓒ 구글 애드센스 광고 달기

위에서 잠깐 설명한 것처럼 HTML 코드를 이용해 소스 수정이 가능하기 때문에, 티에디션을 이용한 메인 화면에도 구글 광고를 장착할 수 있답니다.

저는 이 부분에 구글 광고를 달아보겠습니다. 광고를 설치하지 않으실 경우에는 건너뛰고 ⓓ로 가셔도 좋습니다. 사실 거의 다 끝났지만...^^;;

에디션을 이용해 상단에 노출되는 최신 글 2개 바로 위쪽에 구글 광고를 설치하려고 합니다.

티에디션 에디터 > 디자인 > HTML

소스 코드의 맨 상단에 아래 코드를 입력합니다. 사실 코드 없이 애드센스 광고를 그대로 복사해서 넣어도 되지만, 가운데 정렬 및 테두리를 주어 꾸미기 위함입니다. 

<!-- 애드센스 메인 상단 광고 -->
<div style="border:1px solid #aaaaaa; text-align:center; padding-top:15px; padding-bottom:15px;" >
<table border=0 width=100% cellspacing=0 cellpadding=0>

<!-- 메인 상단 큰 리더보드 -->

</table>
</div>
<!-- 애드센스 메인 상단 광고 -->

사용하려고 하는 구글 애드센스 광고 크기는, 728x90 혹은 970x90 리더보드 형식입니다.

메인 화면 상단에 높이폭이 큰 광고는 방문자에게 어떤게 글이고 광고인지 혼란을 줄 수 있다는 생각에 가로폭이 넓은 직사각형을 사용했습니다. 

가운데 있는 주석부분 (<!-- 메인 상단 큰 리더보드 -->)에 소스 코드를 붙여넣기해 넣어주시면 됩니다. 

저는 상단 위, 중단 위의 두 곳에 구글 애드센스 광고를 삽입했습니다. 

또, HTML의 맨하단에 있는 주의사항처럼 수정하시면 글연동 및 속성 수정이 일부 불가능할 수 있으니 주의해주세요. 구글 광고만 넣는 거라면 큰 영향은 없을겁니다 ^^

ⓓ 메인화면 확인

저는 정상적으로 적용이 됐네요. 혹시 잘 안되신 경우에는 처음부터 천천히 다시 해보시고, 혹시 모르는 부분이 있으시면 댓글로 질문주세요~ ^^

상단 타이틀이 나오고, 그 아래 구글 광고, 아래에 최신글 2개가 정상적으로 노출이 되는군요. 

참고로 제가 사용한 티에디션 아이템을 소개하자면,

상단 - 갤러리형 최신글 2개 / 전체 카테고리

중단 - 목록형 3개 / VIEW 추천 많은 글 / 타이틀 : 시아아빠의 추천글

하단 - 목록형 작은 사진 3줄 / 우리 이야기, 일본이야기 카테고리만 / 타이틀 : 일본 생활 이야기

타이틀 앞에는 아이콘을 넣을 수 있더군요. 귀여운걸로 2개 골라서 넣어봤습니다 ㅎ

일단은 이렇게 사용하고, 간편하게 에디터로 수정이 가능하기 때문에 나중에 또 수정해보도록 해야겠네요.

티에디션의 에디터를 이용하면 간편하게 메인 화면을 꾸밀 수 있어 좋네요. 에디터가 있어서 별로 어렵지도 않고 손 쉽게 메인 화면을 꾸밀 수 있어 좋습니다.

특히, 티스토리 블로그의 특성처럼 소스 코드 수정이 가능하다는 점이 가장 매력적이네요.

소스 수정이 가능하기 때문에 기본적으로 제공되는 추천 세트 혹은 아이템이 마음에 들지 않으면, 자신이 원하는 자신만의 스타일로도 수정이 가능합니다.

또, 구글 광고 설치도 가능하구요. 무척 편리하네요. 역시 티스토리 블로그를 이용하길 잘했다는 생각이 드는 순간이 이럴때죠! ^^

간편한 티에디션을 이용해, 블로그 메인 화면을 꾸며보세요~