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

네이버 블로그에는 이웃이라는 이름으로 블로거들끼리 서로 교류가 상당히 활발해요. 새 글이 올라오면 바로 확인할 수도 있고, 한 번 클릭으로 이웃 블로그로 이동할 수도 있죠.

티스토리에는 링크라는 이름의 비슷한 기능이 있어요. 다른 블로그를 내 링크에 추가하려면 메뉴바를 이용해야하는데, 어떤 블로거들은 저처럼 이 메뉴바를 보이지 않게 사용하는 경우도 있고요. 숨기지 않는다하더라도 메뉴바가 잘 안보이는 위치에 있어서 눈에 잘 띄지도 않죠.

그래서 이웃과의 소통을 조금 더 늘려보고자 "링크에 추가" 버튼을 만드는 방법을 공유해봅니다.

티스토리 링크 추가 버튼 만들기

사실 이 버튼에 대해서 별로 생각이 없었는데, Y&S 두 여자의 말랑말랑 생활공감이라는 블로그에 갔더니 "이웃추가"버튼이 있더라고요. 되게 좋아보여서 저도 만들어 봤어요. 위 블로그에는 이미지로 예쁘게 잘 만들었는데, 저는 그런 그림을 만들 줄 모르니 그냥 단순하게 텍스트 링크로 만들었어요.

Y&S 두 여자의 말랑말랑 생활공감의 이웃추가 버튼

그림을 만들 줄 몰라서 텍스트 링크를 만들기로 한 건데, 그렇다고 그냥 글자로만 만들면 눈에 잘 띄지 않기때문에 아이콘을 이용하기로 했습니다.

ICON FINDER에서 마음에 드는 그림을 찾아서 스킨에 업로드 합니다. 저는 아래 그림으로 했어요.

"이웃추가하기" 라는 버튼을 어디에 넣을 건지 결정하세요. 저는 다른 링크를 확인할 수 있는 링크 목록의 첫번째에 넣기로 했습니다. 첫번째 목록에는 추가 버튼이 나오고, 그 아래부터는 제가 링크한 다른 이웃들의 목록이 표시되죠.

여기는 스킨에서 잘 찾아야 해요.

스킨 - html에서 이웃 목록 위치

스킨 - skin.html에서 <s_link_rep>를 찾아서 그 바로 윗줄에 아래 내용을 넣어주세요.

<li class="add_link"><a href="toolbar/popup/link" onclick="window.open(this.href); return false" title="수학방을 이웃 링크에 추가하기">수학방을 이웃링크에 추가</a></li>
<s_link_rep>

그리고 style.css에는 아래 내용을 넣어주세요. 위치는 상관없어요.

.add_link {
background:url(images/add_link.png) no-repeat -5px -5px;
font-weight:700;
padding-left:27px!important;
}

.add_link a {
color:#00e!important;
}

첨부파일을 다운받으면 소스가 있어요.

link.txt