라비아

티스토리 블로그 맨위로 가기 버튼 만드는 방법




오늘은 간단한 블로그 꾸미기 팁 하나를 작성하려고 합니다.
컨텐츠 분량이 적은 블로그는 상관없겠지만, 내용을 길게 쓰기를 좋아하시는 분들은
방문자들에게 은근히 스크롤 압박을 줄 수가 있습니다 ㅎㅎ

블로그 하단부에 맨위로 가기 버튼을 달아두면 단번에 페이지 상단으로
이동시킬 수 있기때문에 방문자들이 글을 보는 데 조금이나마 편리함을 줄 수 있을 것입니다.

우선 버튼으로 활용할 문구 또는
이미지를 준비합니다. 저같은 경우는 제가 직접 만든 문구를
이미지로 저장시켜보았죠 ㅎ 아래처럼요.



이미지가 준비되었으면
자신의 블로그에 이미지 저장을 해야합니다.
관리자 페이지로 들어가서.....

 >>

파일업로드 메뉴로 들어간다음
페이지 하단부에 보이는 [추가] 버튼을 눌러서 이미지 파일 업로드를 합니다.

 >>

올린 파일에 대고 우클릭을 하면
이미지에 대한 url 주소가 나옵니다. 그것을 복사해두세요.

>>  

이제 다시 html 편집 창으로 이동합니다.
버튼의 위치는 보통 페이지 하단부가 되겠죠?
티스토리 소스에서 본문을 나타내는 태그는 아래와 같습니다.



위 태그 윗부분에 소스를 집어넣으면 본문 위쪽에 출력이 되고
아랫부분에 넣으면 본문 아래쪽에 출력이 됩니다. 첨부해야할 소스는 다음과 같습니다.



앵커태그를 이용하였는데요,
위 소스에서 img src=" 이 부분 다음에 나오는 이미지 url 주소를
아까전에 자신이 업로드한 이미지 파일의 주소로 변경해주시면 됩니다.



어떤 블로그를 보면
맨위로 가기 버튼을 눌렀을 때
스크롤을 타고 자연스럽게 올라가는 효과도 주곤 하는데요,
그 부분은 소스가 다소 복잡한 걸로 알고있습니다.

아무튼 이 글을 보시는 분들은
단순한 소스를 이용하여 곧바로 페이지 상단으로 이동하는 효과를 나타내실 분들이
참고하시면 될 것 같네요. 오늘의 간단한 블로그팁은 여기까지입니다 ㅎ