티스토리 블로그 북클럽 스킨 위로 가기 단추 달기

며칠 전, 하루일기 블로그 스킨을 북클럽으로 바꿨다. 스킨을 바꾸고 나서 몇 가지 설정을 편리하게 바꿨다. 손에 익은게 때론 가장 편리하다. 그런데 사용하다 보니 하나 빼놓고 하지 않은 것이 있었다. 바로 위로 가기 단추였다. 짧은 글이면 별 상관없는데, 긴 글을 읽다 보면 맨 위로 가는 게 참 부지하세월이다. 키보드에서 home만 누르면 바로 맨 위로 가지만, 마우스를 가지고 움직이다 보면 또 손을 떼고 키보드로 옮기는 것도 잘 안 된다.

그래서 오늘 아침 책상에 앉아 가장 먼저 한 것은 위로가기 단추를 다는 것이 되었다.

1. 단추 찾기

마음에 드는 모양의 단추를 찾는 것도 중요하지만, 저작권을 존중하는 것도 중요하다. 저작권을 위배하지 않으면서 무료로 사용할 수 있는 아이콘을 찾고, 그중에서 마음에 드는 단추를 검색했다.

구글에서 'back to top button icon'을 검색하니 다양한 단추들이 나왔는데, 그중에서 Flaticon에 올라와 있는 화살표 단추를 골랐다. 1770만 개가 넘는 벡터 아이콘 및 스티커를 구비하고 있는 곳이다. 맨 위의 메뉴바에서 국기를 클릭하면 다양한 언어로 볼 수 있는데, 나중에 보니 우리말도 있었다.

여기서 다시 back to top으로 검색하고, 그중에서 적당한 걸 골랐다. 크기를 선택하지 않고 다운받아 적용해 봤더니 아기 주먹만 한 화살표가 오른쪽 아래에 떡하니 뜨길래 깜짝 놀라 작은 걸로 골라 다시 다운로드하여 올렸다. 지금 적용된 단추 크기는 64x64다.

프리미엄에 가입하고 무제한 다운받을 수도 있지만, 나처럼 평생 몇 번 사용하지 않을 사람은 그냥 핀터레스트나 페이스북, 또는 트위터 같은 소셜미디어에 링크를 올려주고 무료로 사용하는 것도 괜찮다. 나도 이 방법을 사용했다.

2. 단추 달기 - html 수정

스킨을 바꾸기 전에도 위로 가기 단추는 달아놓았지만, 북클럽 스킨에 최적화된 방법이 있을 것 같아 찾아보았다. 많은 분들이 올려놓고 있었지만, 자기 블로그에 그대로 적용한 사람은 찾기 힘들었다. 그중에 한 분, 글도 올리고 직접 사용하고 있는 분의 글을 찾아 참고해 달았다.

cocoelda님의 '티스토리 탑 버튼 적용하는 방법 -Book Club 스킨'이라는 글이었다. 이분이 올려놓으신 코드를 다운로드하여 내가 올려놓은 단추 파일 주소만 수정한 다음 복사해 html에 붙였다. 코드를 보면 두 부분으로 나뉘어 있는데, 윗부분은 html의 /body 앞에 붙여 넣고, 아랫부분은 css의 맨 아래쪽에 붙여놓으면 된다.

html 수정은 블로그 관리로 들어가서 왼쪽 사이드바의 꾸미기>스킨편집으로 들어간 다음, 맨 위에서 html을 눌러 수정하면 된다. css 역시 맨 위에 있는 css를, 파일 업로드 역시 맨 오른쪽 상단에 있는 '파일업로드'를 선택해 올리면 된다. 올릴 땐 추가를 누르면 파일을 선택할 수 있는 창이 뜬다. 수정하고 나선 '적용'단추 누르는 것을 잊지 않아야 저장이 된다.