블로그를 하실 때 기존의 블로그 스킨을 사용하시다 보면 홈버튼이 없는 경우가 있습니다. 그래서 PC는 물론 모바일 등 각종 디바이스에서 글을 읽다가 쉽게 블로그 홈으로 이동할 수 있는 홈버튼 만드는 방법을 알려드리고자 합니다.
이미지파일 고르기
PNG파일
구글 이미지에 home png라고 입력하시면 아래와 같은 많은 그림들이 검색이 되어 나옵니다.
개인적으로 png파일은 배경이 없는 투명파일이라 스크롤바에 적용시키기엔 jpg파일보다 보기가 더 좋을 것입니다.
다양한 사이즈(픽셀)의 그림이 있는데 적당히 가로세로 64px사이즈의 이미지를 찾아야 하는데, 번거로우실까 제가 찾은 파일을 첨부 하도록 하겠습니다.
파일 업로드 하기
블로그에 적용시키기 위해서는 나의 블로그에 파일이 있어야 합니다. 블로그 관리자모드로 접속 하신 후-스킨 편집-html 편집-파일 업로드에서 해당 파일을 업로드 하신 후 우클릭으로 링크 주소를 복사하여 별도의 메모장에 해당 주소를 따로 백업해 둡니다.
링크주소를 복사하여 메모장에 붙여넣을 경우 아래의 그림과 같은 형식인데 여기서 필요한 부분은 images~png까지 입니다.
HTML 편집
우선, 첨부된 소스파일을 받아 메모장에 별도로 복사해 두시면 됩니다.
<a href="" id="gohome" style="display:scroll;position:fixed;bottom:70px;right:10px;z-index:99999999" title="Home"><img src="./images/home.png" border="0"/></a>hefr=" " 부분에 본인의 블로그 주소를 입력하시고, img src=" " 부분에는 업로드한 파일-마우스 우클릭으로 복사한 이미지파일 경로를 입력하시면 되는데 image앞에는 반드시 ./ 이 붙어야 합니다.
위와 같이 png파일을 업로드하셨다면 이제 html부분에서 소스를 입력하면 되는데 <head>와 </head>사이 빈 공간을 확보하여 그림과 같이 입력-적용을 하시면 됩니다.
실행 확인
순서대로 제대로 하셨으면 특정 게시판에 머물렀다가 홈버튼을 누를 경우 블로그 홈으로 이동하는 것을 확인하실 수가 있습니다.
<a href="" id="gohome" style="display:scroll;
position:fixed;
bottom:70px; //스크롤바 기준 홈버튼 세로위치
right:10px; //스크롤바 기준 홈버튼 가로위치
z-index:99999999"
title="Home"><img src="./images/home.png"
border="0"/></a>
홈버튼의 위치를 수정하고 싶으실 때, bottom은 스크롤바 현재의 위치를 기준으로 하단으로부터 위로 얼마나 띄울것인가를 정하는 지정하며, right는 스크롤바 현재 위치로부터 왼쪽으로 얼마나 띄울 것인가를 지정할 수 있습니다.
'티스토리 > 티스토리 Tips' 카테고리의 다른 글
| 티스토리 블로그 글 목록에 대하여 (0) | 2020.04.20 |
|---|---|
| HTML과 CSS (0) | 2020.04.20 |
| HTML로 글상자 만들기-[기본 박스] (0) | 2020.04.20 |
| CSS로 글상자 만들기-[모퉁이가 접힌 박스] (0) | 2020.04.20 |
| 소제목 서식 만들기 (1) | 2020.04.20 |
