티스토리에 소스코드 하이라이팅을 하는 방법에 대해 알아보자. 

일반적인 생활, 사진, 요리, 육아 등의 개발 소스와 관련이 없는 블로그를 운영한다면 소스코드 하이라이팅을 사용할 필요는 없다. 

하지만 블로그에 html, JavaScript, java, c++ 등과 같은 개발 소스를 적을 필요가 있을 경우 좀 더 시각적으로 보기 좋고, 입력하기 편하게 할 필요성이 생긴다. 

SyntaxHighlighter는 소스코드를 시각적으로 보기 좋고, 입력하기 편하도록 만들어 준다. 

이번 포스트에서는 SyntaxHighlighter를 티스토리에 적용하는 방법에 대해 알아보자. 

위의 다운로드 링크로 이동하여 파일을 다운로드 받고 압축을 푼다. 

압축을 풀어서 아래 3개의 파일을 블로그에 업로드 한다. 

scripts 폴더의 shCore.js

scripts 폴더의 shBrushJScript.js

styles 폴더의 shCoreRDark.css

만약 개발 소스가 자바스크립트가 아니라면 shBrushJScript.js 파일 대신에 자신이 사용하는 개발언어에 해당하는 js 파일을 업로드하면 된다. 

스타일은 우선 shCoreRDark.css 이 파일을 올리도록 하자. 

</body> 태그 바로 위에 아래 내용을 추가하자. 

포스팅을 해보자.

환결설정은 모두 끝났다. 이제 포스팅을 해보자. 

티스토리 블로그의 글쓰기에서 개발 언어가 들어가는 부분을 작성하자. 

글쓰기에서 HTML에 체크한다. 

HTML 모드에서 아래 내용을 추가하자. 

function testSyntaxHighlighter()
{
	return "Test Complete!";
}

저장을 하고 포스팅을 보면 아래와 같이 보이게 된다. 

이제 모든 작업이 완료되었다. 

위에서 우리는 shCoreRDark.css 파일을 업로드하고, 이 파일을 사용했다. 

이 파일을 사용했을 때 위의 이미지에서 처럼 검은색 배경에 파란색과 연두색으로 소스가 표시된다.

하얀 배경을 사용하고 싶다면, shCoreDefault.css 파일을 사용하면 된다. 

styles 폴더에 다른 css 파일도 확인해보고, 자신의 블로그 디자인에 가장 잘 맞는 css파일을 선택하도록 하자. 

발행글이라고 한다면 보통 포스팅 마지막에 공감 버튼이 위치하고, 그 밑에 카테고리의 다른 글 보기 또는 광고가 위치하게 된다. 

SNS 버튼을 사용한다면 공감버튼과 카테고리의 다른 글 보기 사이에 SNS 버튼도 위치하게 된다. 

포스팅의 마지막과 하단 광고 또는 카테고리 다른 글 더보기의 간격이 넓어서, 방문자들이 못 보는거 같다. 

블로그를 운영하면서 한번쯤은 고민해봤을 것이다. 

방문자가 포스팅 하단에 있는 광고 또는 카테고리 다른 글 더보기도 봤으면 하는데, 포스팅과의 거리가 멀어 방문자들이 보지 못한다는 생각이 한 번쯤 들었을 것이다. 

공감 버튼 해결 방법

포스팅과 공감버튼과의 간격, 공감버튼과 다음 컨텐츠와의 간격을 조정해보자. 

위의 그림을 보자. 

좌측이 간격 조정 전이고, 우측이 간격 조정 후다. 

간격 조정 후 공감 버튼과 포스팅과의 간격이 좁아졌다. 

간격이 좁아지면서 원하는 대로 방문자가 광고 또는 카테고리를 볼 확률이 높아졌다. 

수정 방법

수정하는 방법에 대해 알아보자. 

HTML/CSS 편집 메뉴로 이동하자. 

위의 붉은색 소스를 <header></header>사이에 추가하면 된다. 

저장 후 포스팅을 다시 보면 공감 버튼의 간격이 좁아진 것을 확인할 수 있을 것이다. 

티스토리(Tistory) 2차 도메인을 설정하는 방법에 대해 알아보자. 

2차 도메인을 설정하는 것도 티스토리 최적화 방법의 하나이다. 

왜 2차 도메인을 설정해야 하는가?

티스토리 도메인은 다음에서는 검색이 잘 되지만, 국내 검색의 70% 이상을 차지한다는 네이버에서는 검색 순위가 낮아진다. 

동일한 제목의 네이버 블로그와 티스토리가 있다고 하면, 티스토리보다 네이버 블로그가 상위에 검색되게 되는 것이다.

하지만 2차 도메인을 사용한다면 네이버에서 티스토리일 때보다의 검색 순위가 상향될 수 있다. 

검색 영역이 확대된다. 

기존에는 블로그 영역에서만 검색이 되었지만, 2차 도메인을 설정하면 블로그 영역과 웹문서 검색 영역에 모두 노출이 된다. 

그만큼 검색 유입량이 높아지게 된다. 

도메인 구입비용이 1년에 2만원 정도이니, 1년에 2만원 정도로 블로그 유입량을 높일 수 있다면, 비싼 가격은 아니다. 

도메인을 연결하면 내 블로그 방문 유입량도 늘릴 수 있고, 내 블로그를 브랜드화하여 파워블로거로서의 자부심도 가질 수 있다. 물론 자신의 블로그에 기존 보다 더 애정도 갖게 된다. 

도메인을 한 번 적용하면 변경했을 때 기존 포스팅의 방문자 유입량에 영향을 줄 수 있으므로, 신중히 결정해야 한다. 

가비아 도메인(Domain) 구매

도메인을 구입할 수 있는 사이트는 여러 가지가 있지만 그 중 가비아(Gabia) 기준으로 설명하겠다. 

아래 사이트로 이동하여 원하는 등록을 원하는 도메인을 검색한다. 

https://domain.gabia.com/regist/regist_domain

나온 결과에서 구매를 원하는 도메인을 선택한다. 

(여기서도 블로그의 방문자 유입을 늘릴 수 있는 팁이 있다. 국내 사용자들에게 co.kr, kr은 익숙하겠지만, 국외 사용자들에게는 .com이 익숙하다. 국외 사용자들의 유입도 고려한다면, .com으로 선택하는 것이 현명하다. 단, .com으로 원하는 도메인명을 구하기는 어렵다. 충분히 시간을 투자해서 사용 가능한 도메인명을 찾아야 한다. )

선택 후 신청하기 버튼을 클릭한다. 

네임서버는 가비아 네임서버를 선택한다. 

결제를 완료하면 도메인 신청은 완료 되었다. 

이제 티스토리 블로그와 구매한 도메인을 연결해보자. 

부가서비스의 네임플러스 화면으로 이동한다. 

구매한 도메인을 입력한다. 

입력할 IP는 티스토리 공지에서 확인한다. IP주소에 입력할 IP 2개를 확인할 수 있다. 

http://notice.tistory.com/1679

이제 티스토리 블로그와 도메인을 연결하자. 

티스토리에 로그인한다. 

관리자 화면의 환경설정-기본정보로 이동한다. 

하단에 주소 설정에서 2차주소로 선택하고, 구매한 도메인을 입력한다.  
저장 버튼을 클릭하면 모든 설정이 완료된다. Explorer에서 구매한 도메인을 주소창에 입력하면 티스토리 블로그로 연결될 것이다. 

모든 것이 완료되었다. 

저번 포스팅에서 알아보았던 구글과 네이버의 웹마스터도구를 이용하여 크롤러가 포스팅을 다시 가져가도록 하자. 

하루, 이틀 정도 지난 후에 사용자 방문 유입량을 비교해보자. 기존 포스팅 보다는 신규 포스팅에서 방문자 유입량이 달라짐을 알 수 있을 것이다. 

2차 도메인 설정 후 검색 누락이 발생한다면 아래 포스트를 읽어 보기 바란다. 

http://iaddmoney.com/34

포스트 검색 누락 여부는 아래에서 확인할 수 있다. 

바로가기