[블로그] 티스토리 링크 버튼 만들기(이웃 추가?)

티스토리 링크 버튼 만들기(이웃 추가?)

네이버 블로그의 이웃이라는 개념은 좋은 시스템이다.

이는 블로거들끼리 서로 소통하기 원활하게 만들어주기 때문인데 티스토리 블로그 역시 링크를 통해서 블로거들끼리 소통하기 위한 장치가 마련되어 있지만 기본적으로 네이버의 이웃보다 활용도가 떨어지는 편이다.

이는 여러 가지 이유가 있겠지만 가장 큰 이유는 네이버의 이웃 추가하는 방법과는 다르게 티스토리 링크 추가 하는 부분은 눈에 잘 띄지 않기 때문이라고 생각한다.

그렇다면 조금이라도 눈에 띄면 네이버 이웃만큼 블로거들의 소통이 늘어나게 될까??

링크가 늘어나더라도 관리하는 부분에도 문제가 있고 그 외에도 여러 가지 문제가 있기 때문에 뭐 그 정도는 힘들지 않을까 싶지만 아무래도 없는 것보단 있는 쪽이 좋을 것이다.

(관리하기 힘들 만큼 링크가 늘어날 수 있을까? ㅠㅠ)

그럼 버튼을 만들어 달아보도록 하자.

1. 링크 버튼 이미지 업로드

링크 버튼에 사용될 이미지를 만들어서 HTML/CSS의 파일 업로드 탭에서 이미지 파일을 업로드한다.

업로드 해둔 파일은 오른쪽 버튼 주소 복사를 통해 아래의 코드의 이미지 부분에 주소를 넣으면 된다.

2. 링크 버튼 코드 수정

만드는 방법은 어렵지 않다.

코드를 자신의 블로그에 맞게 수정해서 원하는 곳에 붙여 넣으면 되는데 파란색으로 되어있는 부분만 자신의 블로그에 맞게 변경하여 사용하면 된다.

코드 셈플

- 이미지를 이용하여 링크1

<a href="블로그주소/toolbar/popup/link/" title="마우스가 위에 올라오면 나오는 설명 문구" onclick="window.open(this.href); return false">

<img src="기본 이미지" onmouseover="this.src='마우스가 위에 올라오면 변경되는 이미지'" onmouseout="this.src='기본 이미지'" border="0"></a>

- 이미지를 이용하여 링크2

<a href="블로그주소/toolbar/popup/link/" title="마우스가 위에 올라오면 나오는 설명 문구" onclick="window.open(this.href); return false">

<img src="기본 이미지" border="0"></a>

- 이미지 없이 글로 링크

<a href="블로그주소/toolbar/popup/link/" title="마우스가 위에 올라오면 나오는 설명 문구" onclick="window.open(this.href); return false">원하는 문구 입력</a>

코드 : 블로그 링크 버튼 만들기.txt

사용 예시

- 이미지를 이용하여 링크1

<a href="http://seogilang.tistory.com/toolbar/popup/link/" title="안녕하세요. 서기랑입니다." onclick="window.open(this.href); return false">

<img src="http://tistory.daumcdn.net/tistory/1234567/skin/images/link1.png" onmouseover="this.src='http://tistory.daumcdn.net/tistory/1234567/skin/images/link2.png'" onmouseout="this.src='http://tistory.daumcdn.net/tistory/1234567/skin/images/link1.png'" border="0"></a>

- 이미지를 이용하여 링크2

<a href="http://seogilang.tistory.com/toolbar/popup/link/" title="안녕하세요. 서기랑입니다." onclick="window.open(this.href); return false">

<img src="http://tistory.daumcdn.net/tistory/1234567/skin/images/link1.png" border="0"></a>

- 이미지 없이 글로 링크

<a href="http://seogilang.tistory.com/toolbar/popup/link/" title="안녕하세요. 서기랑입니다." onclick="window.open(this.href); return false">링크 추가</a>

셋 중에 마음에 드는 것으로 골라서 사용하면 되고 title의 경우도 굳이 필요 없다면 빼도 된다.

3. 링크 버튼 사이드 바에 설치

수정한 코드는 어디에 넣든 상관없기 때문에 블로그에 어울리는 곳에 넣으면 되는데 여기서는 기본적으로 무난하다고 생각되는 사이드바에 넣어 보도록 하겠다. (아마 다 알고 있을 듯...)

관리 페이지의 사이드바 메뉴에서 HTML 배너출력을 추가해준다.

추가된 HTML 배너출력에서 편집을 누른 뒤 이름과 작성한 코드를 붙여 넣는다.

저장을 누르고 정상적으로 반영이 됐는지 확인한다.

마우스 클릭으로 간단하게 넣을 수 있다.

만약 사이드바 메뉴에서 HTML 배너출력이 보이지 않는 다면 플러그인에서 배너출력을 추가해주면 된다.

이걸 추가해 줘야 HTML 배너출력이 생긴다.

그 외

여기까지 봤다면 링크 추가 버튼을 만드는 게 그리 어렵지 않다는 걸 알 수 있다.

다만 문제는 이걸 어디에 다느냐 인데... 포스팅은 다 했지만 이 블로그 역시 마땅한 자리가 없어서 현재 고민 중이다.

(무엇보다 디자인이... 후 난 왜 이런 쪽에 재능이 없는가!! ㅠㅠ)

어서 고민을 끝내고 달아야 할텐데...