티스토리 뷰

블로그 팁 광고

홈페이지/블로그 화면 맨위로 가기 버튼 설치하기

귀하신분 2013. 7. 25. 10:19

웹사이트나 홈페이지, 블로그를 막론하고 많은 사람들이 방문하는 사이트에는 여러가지 위젯 형식의 아이콘들을 만날 수 있습니다.

그 중 소셜 관련, 광고 관련 위젯을 제외하고 가장 많이 설치된 위젯은 사이트의 맨 처음, 화면의 맨 위로 시선을 이동해주는 맨위로 가기 버튼일 것입니다.

방문자들로 하여금 다시 윗부분의 컨텐츠를 확인하기 위해 키보드의 HOME 키나 PAGE UP 버튼을 누르거나, 마우스의 무한 휠 드랍의 불편함을 해소하고자 편의를 제공하기 위한 버튼일텐데요, 방문자들은 불편함이 있는 경우 사이트를 떠나가기 때문에 맨위로 가기 버튼은 꼭 필요한 기능 중 하나라고 생각됩니다.

본인도 몇년간 맨 위로 이동하기 버튼을 설치하지 않고 포스팅을 해왔는데요, 콘텐츠나 내용의 스크롤 압박이 있을 경우 조금 불편하다는 생각이 들었지만 귀차니즘에 빠져 설치하지 않았었는데요, 이번 기회를 통해 방문자들의 편의를 제공코자 설치하기로 마음먹었습니다.

하지만 화면 맨 위로 이동하기 버튼을 설치하더라도 방문자의 편의보다는 뭐니뭐니해도 사이트의 속도를 늦추거나 로딩시간을 길게 해서는 안될 것을 명심하셔야 합니다.

이것은 편의를 제공하고자 설치한 위젯으로 인하여 각종 스크립트의 동작을 위해 로딩되는 속도까지 감소시키게 된다면 방문자들로 하여금 더욱 더 신뢰를 얻지 못하고 사이트에서 바로 벗어나게 하는 원인이 되기 때문입니다.

그러하여 아주 큰 차이는 없지만 스크립트를 로딩하지 않는 단순한 페이지처럼 미미한 속도차를 없애기 위해 자바 스크립트나 화면을 이동할 때 이쁘게 이동시키기 위한 여러가지 옵션들은 사용하지 않는 것을 추천해 드립니다.

속도보다는 시각적인 효과에 초점을 맞추는 웹페이지에서는 당연히 스크립트를 이용해야 하겠지만요...

특히 티스토리 블로그는 로딩 속도가 다른 블로그들에 비해 다소 늦다는 평을 받고있기 때문에 더더욱 간소화 시켜 속도를 향상시키는데 주력해야 할 것입니다.

거두절미하고 스크립트를 이용하지 않고 화면 맨위로 가기 버튼을 설치하는 방법에 대해 알려드리도록 하겠습니다.

우선 버튼을 설치하기 위해 화살표 모양의 그림 파일이 필요하실 것입니다.

.


여기서는 제가 설치해놓은 버튼모양과 몇개의 첨부파일에 넣어드릴 것이며, 여러가지 버튼은 네이버 조회를 통하여 손쉽게 구할 수 있겠으며, 또한 본인이 직접 제작하여 그린 모양이나 텍스트 등을 이용하실 수도 있겠습니다.

포토샵을 조금 하시는 분들은 직접 제작하시어 나만의 특화된 버튼을 만드실 수 있겠습니다.

     

원하시는 그림파일을 구하신 후 이제 본격적으로 블로그에 버튼을 설치해 보도록 하겠습니다.

위에서 다운로드 받으시거나 구하신 화살표 모양의 그림을 티스토리에 파일업로드 메뉴에 첨부파일로 올려놓습니다.

파일 업로드그림파일 업로드

업로드한 그림파일의 파일명은 반드시 알고계셔야 아래의 html 수정 부분에서 불러올 수 있기 때문에 파일명을 반드시 확인해 놓으시기 바랍니다.

원하시는 화살표 모양 그림파일을 업로드하신 후 이제는 아래와 같이 html 부분에 코드를 삽입해 주시면 되겠습니다.

드래그가 안되는 관계로 파일로 하나 올려드리도록 하겠습니다.

화면 위로 이동하기 html 코드.txt

 

<!-- 위로 바로가기 버튼 시작 -->
<a style="display:scroll;position:fixed;bottom:20px;right:5px;" href="#" title=Top>
<img src=./images/top.png border="0"/></a>
<!-- 위로 바로가기 버튼 끝 -->

위 코드를 본인 사이트의 html 수정 화면으로 이동하여 <body> ... </body> 부분에 붙여넣기를 하면 마무리가 되겠습니다.

여기서 화살표 모양이 설치되는 위치를 지정하는 옵션이 있는데요,

bottom:20px; 은 익스플로러 창의 맨 아래 부분에서 어느정도 떨어져 위치할 것인지를,

right:5px; 은 익스플로러 창의 오른쪽에서 어느정도 떨어져 위치할 것인지를 각각 지정하게 되는 것입니다.

그리고 그림 파일 이름을 ./images/top.png 처럼 폴더 파일 위치에서 불러올 그림파일의 파일명을 지정하였습니다.

본인은 아래 화면과 같이 </body> 바로 윗부분에 설치를 하였습니다.

html 수정html 코드 삽입 화면

이렇게 마무리된 후 저장을 눌러 모든 과정을 마무리하게 되겠습니다.

자바 스크립트 등을 이용하는 방법보다 간결한 과정이며, html 코드 또한 간단하여 페이지 로딩 속도를 동일한 수준으로 운영하실 수 있겠습니다.

최종 적용된 화면은 아래와 같습니다.

맨 위로 버튼화면 맨 위로 가기 버튼

본인의 블로그는 모던 화이트 색상의 배경과 글씨체로 이루어져 있어 회색의 작은 모양의 버튼으로 구성해 보았습니다.

눈에 크게 띄지 않는 범위 내에서 화면 맨 위로 이동하기 버튼을 제공해 주게 되었습니다.

-----

방문 감사합니다 (__)

저작자표시

'블로그 팁 광고' 카테고리의 다른 글

티스토리 글쓰기, 글 내용 접기 및 펼치기 적용 방법  (14) 2013.10.23
검색엔진 최적화, 블로그 페이지 타이틀  (17) 2013.10.16
구글 애드센스 정책 위반 이력 확인  (8) 2013.09.13
구글 애드센스 계정 시간대 설정 (수입 보고서 시간 오차)  (6) 2013.08.13
구글 애드센스 이메일 지원 (애드센스 지원팀에 문의하기)  (4) 2013.07.22
구글 애드센스 모바일 광고, 티스토리 플러그인 적용  (4) 2013.07.19
애드인스(Adins), 신개념 광고 제휴마케팅 서비스  (0) 2013.04.15
구글 애드센스 광고 심사센터 활용 방법  (6) 2013.03.06

댓글