블로그의 최하단에 있을 때 스크롤 또는 막대바로 상단까지 올라가기가 여간 귀찮은 일이 아닙니다.
인터넷 검색을 하다 유입된 홈페이지에 오른쪽 하단 막대바 바로 옆에 '맨위로' , 'TOP' 버튼이 위치하고 있는 것을 보셨을 겁니다.
현재 제 블로그 오른쪽 하단에도 '맨위로' 버튼이 있는 것을 보실 수 있습니다.
그 추가방법에 대해 설명드리겠습니다.
1. 먼저 버튼으로 사용할 '이미지' 를 준비합니다. 따로 준비가 안되신 분들을 위해 제 이미지 파일을 첨부합니다. 필요하신 분들 쓰세요~
(HTML/CSS 소스 txt 파일 포함)
Top.zip
2. 이미지 파일을 '관리센터 - 꾸미기 - HTML/CSS 편집 - 파일업로드' 에 업로드합니다.
3. 업로드 된 파일 목록들 중에서 top.png 를 찾아 오른쪽 마우스 클릭 - 속성에서 이미지 '주소를 복사'
4. Top.zip 에 포함된 txt 파일을 열어줍니다.
5.
<!-- 탑버튼 시작 -->
<div id="return_top">
<a href="#top"> </a>
</div>
<!-- 탑버튼 끝. -->
위 소스를 <body> ~ </body> 사이 붙여넣기 합니다.
/* return top link */
#return_top a
{
position: absolute;
position: fixed;
right: 15px;
bottom: 15px;
width: 50px;
height: 60px;
display: block;
background: url(이미지주소) no-repeat left top;
z-index: 9888;
}
위 소스를 style.css 최하단에 붙여넣기합니다.
(이미지주소) 란에는 아까 복사해놓은 top.png 의 이미지주소를 괄호를 유지한채 붙여넣기 합니다.
홈페이지 오른쪽 하단에 '탑버튼' 이 생긴 것을 확인하실 수 있습니다.
이상입니다~
▼ 글 내용이 도움되셨다면 많은 분들이 보실 수 있게 '하트'를 꾹 눌러주세요! ▼
Comments