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

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

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

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

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

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

 

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

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

Add, group icon 

 

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

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

스킨 - 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

위 내용을 잘 따라하셨다면 사이드바에 "이웃링크 추가하기"라는 버튼이 생겼을 겁니다.

티스토리에 이웃링크 추가하기 완성한 모습

 

메뉴바의 링크 추가 버튼보다는 훨씬 더 보기가 좋아졌어요. 

티스토리 링크에 추가

버튼만 만든다고 이웃과의 관계가 돈독해지는 건 아니라는 걸 알고 계실 거예요. 자주 방문해주시고 댓글도 남겨주세요.

함께 보면 좋은 글

애드센스 크롤러 오류 원인과 해결 방법 - 스코어카드
검색엔진 최적화(SEO) 1탄 - meta, title, desciption, keywords 사용법
검색엔진 최적화(SEO) 2탄 - 로딩 속도를 빠르게
검색엔진 최적화(SEO) 3탄 - 도메인, 텍스트 편
티스토리 비공개 글 찾는 방법, 작성중인 글
블로그 로딩속도를 빠르게 - 이미지 용량 줄이기
블로그 로딩속도를 빠르게 - CSSTidy
블로그 로딩 속도 빠르게 하기 - javascript 압축
블로그 속도 측정 - Google PageSpeed Insights
본문 검색창 설치로 블로그 페이지뷰 늘리기