[탑버튼 / 위로가기 버튼] 티스토리 블로그 탑버튼 / 위로가기버튼 넣기_초보자_쉬운편집

블로그에 글을 올리거나 여러 페이지를 재빨리 이동할 때에 꼭 필요한 작은 버튼이 하나 있지요

탑버튼 위로가기버튼

오분산책에 꼭 필요한 지름길이기도 하지요

바로 탑버튼 (위로가기버튼)입니다

 

탑버튼 위로가기버튼

 

티스토리 블로그 글을 읽는 동안 제일 불편했던 점은 탑버튼 (위로가기버튼)이 없다는 것이었습니다

티스토리 블로그에서 제공되는 스킨에는 위로가기버튼 (탑버튼)을 추가할 수 있는 기능이 따로 제공되지 않지요

그리 어렵지도 않은 편집기능인데 왜 제공되지 않는지 개인적으로 의아합니다

저는 탑버튼을 아주 좋아하기도 하고

오분산책의 지름길을 만들기 위해

html을 직접 편집해야 했답니다

 

수고롭기는 했지만

탑버튼을 추가하는 것도 푸터편집만큼 간단하기는 했어요

 

우선 푸터편집때처럼 '스킨편집' 클릭하시고

 

스킨편집 탑버튼 위로가기 버튼

 

'html편집'탭을 클릭하구요

 

티스토리 블로그 html편집

 

'파일업로드'탭을 눌러서

탑버튼으로 쓸 이미지파일을 추가합니다

 

티스토리 블로그 파일업로드

 

탑버튼용 이미지파일은 미리 만들거나 다운로드하여 준비해놓아야겠지요

저는 인터넷 검색 후 무료 이미지 사이트에서 맘에 드는 녀석으로 다운로드하여서

이미지 크기만 조정했어요

오분산책블로그에서 보이는 탑버튼은 40x40픽셀입니다

60픽셀은 선명하기는 해도 약간 커 보이더라고요

 

다음은 'html'편집탭을 클릭하시고

아래로 쭉 내려와서 </body> 윗 줄에 다음의 코드를 적어주셔야 합니다

 

티스토리 블로그 html 펀집

코드를 적어놓을게요

(코드는 아래 댓글창에 적어놓을 테니 복사해서 사용하세요)

 

<a style="display:scroll; position:fixed; bottom:50px; right:15px;" href="#" title="Top">

<img src="./images/filename" alt="up">

</a>

티스토리 블로그 탑버튼 위로가기 버튼 쉬운편집

 

 

이 </a> 부분 반드시 써넣어야 하더군요

filename을 탑버튼이미지파일명과 맞추는 것 잊지 마시구요

탑버튼이 보이는 위치는 bottom과 right 옆의 숫자로 조절할 수 있습니다

제 탑버튼에는 50과 15가 제일 좋은 것 같더라구요

 

코드를 추가한 후에 '새로고침'탭을 눌러 확인해 봅니다

 

확인 새로고침

코드를 살짝 설명드리자면

"display:scroll 부분은 스크롤할 때에도 탑버튼이 보인다는 의미이구요

position:fixed  부분은 탑버튼의 위치가 항상 bottom50에 right15라는 거구요

" href="#" 블로그페이지의 제일 위(=탑)로 화면이 이동한다는 의미입니다

 

 

아래로가기버튼도 같은 방법으로 만들 수 있는데 저는 별로 필요하지 않아서 위로가기버튼 (탑버튼)만 사용하기로 했습니다

작은 버튼 하나이지만 만족도 최고입니다

티스토리 블로그 위로가기 버튼 탑버튼

 

잘 되지요 그다지 어렵지 않죠

수고하셨어요!

 

모두들 멋진 블로그 만드세요--