블로그에 이것저것 쓰며 돌아다니다 보니 다른 블로그에서 상단으로 이동하는 버튼을 적용한 것을 보았다.
글이 꽤 길어지면 읽어 내려가다가 마우스 휠을 움직여 상단으로 이동하는 것보다 클릭 한 번으로 최상단에 이동하는 것이 매우 수월해 나도 내 블로그에 적용시켜보기로 했다.
나도 할 수 있는 쉬운 블로그 꾸미기
html, c언어 등 컴퓨터 프로그래밍 언어를 전문적으로 배운 적 없기 조금 귀찮더라도 배운다는 마음으로 다른 사이트를 찾아다니며 코드를 가져왔다.
https://jeongyoon.tistory.com/181
티스토리 블로그 상단이동 아이콘 표시
블로그 상단 이동 아이콘 표시 블로그의 글이 길어지면 위쪽으로 스크롤을 옮겨야 하는 경우가 있습니다. 쉽게 이동할 수 있는 TOP 버튼 설치가 필요합니다. 아래 첨부된 스크롤 이동 TXT, 샘플 이
jeongyoon.tistory.com
정윤님 블로그에서 가져온 아주 기본적인 스타일의 코드다.
단 두줄로 적용하기 쉬워서 가져왔다.
물론 단어의 순서, 세부적인 내용 소개는 사이트마다 다 다르다.
<!-- 상단 스크롤 위로 -->
<a style="display:scroll;position:fixed;bottom:10px;right:10px;" href="#" title=Top>
<img src=./images/Scroll.png border="0"/></a>
<!-- 상단 스크롤 위로 -->
코드를 읽고 의미를 알아보자
디스플레이... 표시한다... 스크롤... 두루마리?를... 위치는... 고정한다... 바텀... 아래에서... 10픽셀... 우측에서 10픽셀...
href는 뭐지? 타이틀... 탑으로... 이미지 서치... 찾는다... 스크롤. png 파일... 보더... 테두리는 영으로
이런 뜻인 듯하다. 어려운 단어는 없다.
이미지 파일을 만들어보자
일러스트로 만들어도 되는데 복잡한 이미지를 만들 것이 아니기에 간단한 그림판을 선택했다.
티스토리 심벌이 하얀 바탕에 검은 점으로 T를 형상하고 있기에 그에 반전인 검은 바탕에 흰점으로 ^를 형상화했다.
처음에는 흰 바탕에 검은 점으로 하려고 했는데 png 바탕 없애는 과정에 오류가 나서 색을 반전시켰다.
크게 만들어서 축소를 시켜봤는데 이미지가 뭉개져서 처음부터 축소하지 않을 생각으로 작고 정밀하게 만들었다.
그래서 크기가 매우 작고 좌우 대칭을 완벽히 이루고 있다.
그림판에서 최대 확대를 해서 원을 그리고 비대칭인 곳은 점 점마다 대칭을 맞게 바꾸었다.
만들고 보니 가로세로 30픽셀이다.
이보다 크면 메뉴바보다 커진다.
그러나 웹 사이트를 통해 png로 만들며 배경을 없애니 원형의 모습이 약간 뭉개졌다.
물론 메뉴바 신경 안 쓰고 각자가 선호하는 이미지를 만들려면 100픽셀까지는 여유로울 듯하다.
(그러나 예전에 만들어 본 파비콘은 무려 최소 16픽셀이다.)
파일명은 up으로 바꾸었다.
위치를 수정해보자
<!-- 상단 스크롤 위로 -->
<a style="display:scroll;position:fixed;bottom:250px;right:20px;" href="#" title=Top>
<img src=./images/up.png border="0"/></a>
<!-- 상단 스크롤 위로 -->
큰 변화는 없다.
다만 메뉴바가 오른쪽 위에 있는데 검색, 프로필과 너무 몰려 있어 오른쪽 가운데로 내렸기에
상단 스크롤 버튼도 하단보다는 메뉴바 밑에 오도록 수치를 조정했다.
바닥에서 250픽셀 오른쪽에서 20픽셀로 이동시키니 메뉴바처럼 오른쪽 중앙에 표시되었다.
스킨에서 페이지 탑 버튼을 제공하는 경우 css값을 조정하여 원하는 위치 크기 등으로 바꿀 수 있다.
반짝이는 효과, 숨었다가 나타나는 효과 등의 명령어를 알면 추가 가능한데 복잡해서 아직 더 찾지는 않았다.
보더 값을 0에서 10000까지 변경해보고 명령어를 지우기도 했는데 변화는 없었다.
찾아보니 이미 그림으로 이미지가 고정되서 다른 변화를 주기에는 명령어가 부족하다.
그리고 보더 값에는 px 등 단위가 들어가야 한다.
href 샵은 빈 링크를 뜻하는 듯하다. 클릭 시 현재 페이지의 상단으로 이동해야 하니 변화 없는 빈 링크를 주는 듯하다.
저 #에 다른 링크를 넣으면 그쪽으로 이동하나 보다.
그래서 내 블로그 포스팅 아무 숫자나 넣어보니 해당 페이지로 이동했다.
샵을 지우고 따옴표만 두면 클릭시 홈으로 새로고침 된다.
다 만든 후 이동 버튼의 링크를 보면 com/#으로 되어 있다.
코드 삽입 위치에 관하여
다들 </body> 위에 넣어라고 하던데 궁금해서 이곳저곳에 다 넣어봤다.
</body> 아래에 넣어도 적용된다.
심지어 </html> 아래인 맨 끝에 넣어도 적용된다!
(지금은 body와 html 사이에 있다.)
그러나 <html>보다 위인 처음 또는 <head> 아래에서는 북클럽 스킨에서 클릭되지 않는 구간이 있다.
휠을 하단으로 내려 상단 이동 버튼이 footer 위에 걸쳐져야 제 수행을 한다.
상단 이동 버튼을 만든 시점은 포스터 스킨을 커버 형식으로 꾸며놔서 필요했었다.
이 글을 쓰는 시점은 북클럽 스킨이 적용되어 있다.
그런데 북클럽 스킨은 footer에 page top 버튼을 제공한다.
내가 이걸 왜 만들었지?
'일상' 카테고리의 다른 글
| My name is Giovanni Giorgio 밈 (0) | 2021.09.22 |
|---|---|
| 12호 태풍 오마이스 마산 상륙 천둥번개 실시간 (4) | 2021.08.24 |
| 티스토리 블로그 구독중 0명 이게 머선일이고 (22) | 2021.08.05 |
| 매불쇼 이건 왜 이럴 과학? 임소정 박사의 암내에 대하여 (0) | 2021.08.04 |
| 내가 쓴 글 블로그 검색결과에 몇개가 나올까? (21) | 2021.08.01 |
댓글