Blogger.com에서 템플릿을 만들 때, 맨 위로 가기 링크를 달기 위한 한가지 팁

(쓸데없이 글이 길어졌다. 3줄 요약은 여기로)

요즘, 블로그 이름도 바꾸고(별 뜻 없다. 잘 생각해보면 아주 단순하다) 템플릿도 계속 수정을 가하고 있다. 물론 도메인은 바꾸지 않았다. 오늘은 새 템플릿에 올블로그 올블릿 코드를 삽입했다. Blogger.com에서 올블릿을 추가하는 건 이전에 올린 포스트와 하늘이님의 글을 참조하기 바란다. 원래 진작에 코드를 넣었어야 했는데, 실은 깜빡 잊고 있었다. 여러 번의 테스트와 템플릿 수정을 통해, 지금은 아주 예쁘게 잘 보인다.

사족은 이쯤에서 그만 하고, 이번에 템플릿을 수정하면서 얻은 한가지 팁에 대해 이야기하고자 한다. 다름아닌 '맨 위로 가기' 링크에 관한 것이다.

웹사이트를 만들다 보면, 가로 폭은 대부분 고정되어 있지만 세로 폭은 엄청 길어지는 경우가 생긴다. 때문에 대부분의 웹사이트들은 페이지를 스크롤해가며 봐야 한다. 사용자가 페이지의 내용을 읽어 내려가면서 맨 아래까지 도달했는데, 다른 페이지로 넘어가기 위한 링크나 네비게이션이페이지의 맨 위에 있다면? 사용자는 다시 페이지의 맨 위로 이동하기 위해 스크롤 바를 움직이거나, 마우스의 휠을 열심히 굴려야 할지도 모른다. 물론 단축키를 아는 사용자는 간단하게 키보드의 'Home'키를 눌러 맨 위로 이동을 할 것이다. 또한 이런 불편을 없애기 위해 아예 웹사이트를 만드는 과정에서 네비게이션이 항상 화면에 위치하도록 스크립트를 넣는 경우도 있다.

이런 저런 방법과 해결책들이 많지만, 아무래도 가장 고전적인 것은 '맨 위로 가기(또는 Top)' 링크를 만드는 것이다. 페이지의 맨 위에 Named Anchor(a 태그로 만든다)를 만들어 그것을 링크시키는 것이다. 대부분 Anchor의 이름은 top으로 많이들 쓴다. 이 링크를 클릭하면 순식간에 페이지의 맨 위로 이동할 수 있다.

그러나 Blogger.com에서 이것을 그대로 쓰기엔 약간의 무리가 있으니, 바로 이런 현상이 발생하기 때문이다.

위 스크린샷은, Blogger.com 템플릿에서 HTML코드의 맨 위에 Named Anchor를 만들어놓고, top링크를 만든 후 클릭한 모습이다. 별 이상이 없어 보이는가? 이상이 있다. Blogger.com에서 블로그를 만들면, 맨 위에 navibar라는 것이 붙게 된다. 지금 당장 키보드의 Home키를 누르면 볼 수 있다. 몇몇 Blogger.com 이용자 중엔 이 navibar를 없애버리기도 하는데, 개인적으론 그냥 두는 편이 더 낫다고 본다. 검색창도 있고, 다른 Blogger.com 사이트로 랜덤하게 이동할 수 있는 링크도 제공해 준다. 무엇보다, Blogger.com에서 navibar를 없애는 것은 금지되어 있다.

여하튼 이 navibar의 경우 스크립트를 통해 자동으로 삽입되는데, 때문에 사용자가 만든 템플릿의 html코드보다 항상 위쪽에 위치하게 된다. 자, 그럼 named anchor를 넣어도 항상 navibar에 밀리게 되는데, 이를 어떻게 해결할 것인가? 방법은 의외로 간단하다.(이 얘길 하기 위해 위에서 저렇게 많은 말들을 했단 말인가!)

소스를 보면 알겠지만, navibar에 위치한 검색폼에 name이 걸려있다. 이름은 b-search. 그럼 '맨 위로 가기' 링크를 만들 때, 이 이름을 지정해 주면 된다. 가령 <a href="#b-search" class="top">Top</a> 뭐 이런 식이다. 이렇게 링크를 걸면, 페이지 맨 위로 갈 때 Blogger.com의 navibar까지 모두 보이게 된다.

3줄요약 웹사이트를 만들 때, '맨 위로 가기(top)' 버튼은 있으면 좋다. 그런데 Blogger.com에서는 템플릿에 해당 링크를 넣어도 navibar에 의해 밀린다. 링크를 #b-search로 걸어주면 해결.

태그 : top , 링크 , named anchor , Blogger , 팁 , 템플릿 , 코드