HTML A tag: 위로 / 아래로 가기 버튼 달기 - 가장 간단한 방법
블로그의 위아래 길이가 긴 때에는 마우스바퀴(휠)를 움직이거나, 오르내림막대(스크롤바)를 끌면 되지만, 한 번에 위로/ 아래로 갈 수 있는 단추가 있으면 좀 더 편한 것 같다.
여기서는 가장 단순하지만, 편한 방법을 설명한다.
작동 방식도 간단하지만,단추를 다는 방법도 간단하니 누구나 쉽게 할 수 있을 것이다.
아래의 태그를 적당한 위치에 넣어주면 된다.
구글블로그에서는
=> 블로그 대시보드 > 레이아웃(Layout) > 가젯넣기(Add Gadget) > HTML/Java Script 를 선택> 아래의 코드를 복사하여 넣고 > 저장하면 된다.
[아래의 코드를 넣은 뒤의 단추 모습]
위로/ 아래로 가기 태그
<a style="display:scroll;position:fixed;bottom:30px;right:3px;" rel="nofollow"
href="#" title="Back to Top" style="font-size:2.0em">위로↑</a>
<br />
<a style="display:scroll;position:fixed;bottom:10px;right:3px;" rel="nofollow"
href="#scrollbottom" title="Go to Bottom" style="font-size:2.0em">아래↓</a>
태그 설명
<a style="display:scroll;position:fixed;bottom:30px;right:3px;" rel="nofollow"
href="#" title="Back to Top" style="font-size:2em">위로↑</a>
속성 지정
bottom: 30px <= 블로그 창의 맨 아래에서 위쪽으로 30px
right: 3px <= 블로그 창의 맨 오른쪽에서 왼쪽으로 3px. 위치는 블로그에 잘 어울리고 방문자를 성가시게 하지 않는 곳에 정해 주면 된다.
href="#" <= 이동할 지점을 말하며, "#"으로 지정하면 보통의 경우 페이지의 맨위로 이동한다. 웬만한 템플릿에서는 잘 작동하는 것 같다. 아래로 가기에서는 위치를 지정해 주어야하는대 아래에서 설명한다.
font-size:2.0em <= [위로↑]의 글자크기를 본문 글자크기의 2배로 지정한 것인데, 템플릿에 따라 적용이 안되는 경우도 있다.
아래로 가기
'아래로 가기'의 경우도 기본적으로는 위로가기와 같지만, '아래로 갈 지점'을 정해 주어야 한다. 아래와 같은 방법으로 하면 된다.
=> 블로그 대시보드 > 템플릿 > HTML편집 창으로 간다
=> [컨트롤 + F ]키로 찾기상자를 열어 </body> 위치로 간다.
=> </body>바로 위에 <div id="scrollbottom"></div> 등과 같이 아래로 갈 위치를 지정해주고 템플릿을 저장한다.
예)
<div id="scrollbottom"></div>
</body>
※ <div id="scrollbottom"></div>에서 따옴표 안에 들어 있는 scrollbottom 부분은 규칙이 있는게 아니고 자기가 알아볼 수 있는 이름을 붙이면 된다.
정리하면 아래와 같이 되는 것이고, [아래↓]를 누르면 <div id="scrollbottom"></div>이 있는 곳까지 아래로 내려가는 뜻이다.
<div id="scrollbottom"></div>
</body>
<a style="display:scroll;position:fixed;bottom:10px;right:3px;" rel="nofollow"
href="#scrollbottom" title="Go to Bottom" style="font-size:2.0em">아래↓</a>
[아래↓]를 누르면 <div id="scrollbottom"></div>이 있는 곳까지 아래로 내려가는 뜻이다.
그림(이미지) 버튼 넣기
위의 예에서는 [ 위로↑ ]와 같이 그냥 글자와 기호를 넣었다. 이곳에 그림을 넣고 싶으면,
[ 위로↑ ]자리에 이미지 주소를 넣어 주면 된다.
아래의 예에서 그림주소URL 부분을 실제 이미지 주소로 바꾸어 주면 된다.
예)
<a style="display:scroll;position:fixed;bottom:30px;right:3px;" rel="nofollow"
href="#" title="Back to Top" style="font-size:2em">위로↑</a>
<a style="display:scroll;position:fixed;bottom:30px;right:3px;" rel="nofollow"
href="#" title="Back to Top" style="font-size:2em"><img src="그림주소URL" border="0"/></a>
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...
여기서는 가장 단순하지만, 편한 방법을 설명한다.
작동 방식도 간단하지만,단추를 다는 방법도 간단하니 누구나 쉽게 할 수 있을 것이다.
아래의 태그를 적당한 위치에 넣어주면 된다.
구글블로그에서는
=> 블로그 대시보드 > 레이아웃(Layout) > 가젯넣기(Add Gadget) > HTML/Java Script 를 선택> 아래의 코드를 복사하여 넣고 > 저장하면 된다.
[아래의 코드를 넣은 뒤의 단추 모습]
위로/ 아래로 가기 태그
<a style="display:scroll;position:fixed;bottom:30px;right:3px;" rel="nofollow"
href="#" title="Back to Top" style="font-size:2.0em">위로↑</a>
<br />
<a style="display:scroll;position:fixed;bottom:10px;right:3px;" rel="nofollow"
href="#scrollbottom" title="Go to Bottom" style="font-size:2.0em">아래↓</a>
태그 설명
<a style="display:scroll;position:fixed;bottom:30px;right:3px;" rel="nofollow"
href="#" title="Back to Top" style="font-size:2em">위로↑</a>
속성 지정
bottom: 30px <= 블로그 창의 맨 아래에서 위쪽으로 30px
right: 3px <= 블로그 창의 맨 오른쪽에서 왼쪽으로 3px. 위치는 블로그에 잘 어울리고 방문자를 성가시게 하지 않는 곳에 정해 주면 된다.
href="#" <= 이동할 지점을 말하며, "#"으로 지정하면 보통의 경우 페이지의 맨위로 이동한다. 웬만한 템플릿에서는 잘 작동하는 것 같다. 아래로 가기에서는 위치를 지정해 주어야하는대 아래에서 설명한다.
font-size:2.0em <= [위로↑]의 글자크기를 본문 글자크기의 2배로 지정한 것인데, 템플릿에 따라 적용이 안되는 경우도 있다.
아래로 가기
'아래로 가기'의 경우도 기본적으로는 위로가기와 같지만, '아래로 갈 지점'을 정해 주어야 한다. 아래와 같은 방법으로 하면 된다.
=> 블로그 대시보드 > 템플릿 > HTML편집 창으로 간다
=> [컨트롤 + F ]키로 찾기상자를 열어 </body> 위치로 간다.
=> </body>바로 위에 <div id="scrollbottom"></div> 등과 같이 아래로 갈 위치를 지정해주고 템플릿을 저장한다.
예)
<div id="scrollbottom"></div>
</body>
※ <div id="scrollbottom"></div>에서 따옴표 안에 들어 있는 scrollbottom 부분은 규칙이 있는게 아니고 자기가 알아볼 수 있는 이름을 붙이면 된다.
정리하면 아래와 같이 되는 것이고, [아래↓]를 누르면 <div id="scrollbottom"></div>이 있는 곳까지 아래로 내려가는 뜻이다.
<div id="scrollbottom"></div>
</body>
<a style="display:scroll;position:fixed;bottom:10px;right:3px;" rel="nofollow"
href="#scrollbottom" title="Go to Bottom" style="font-size:2.0em">아래↓</a>
[아래↓]를 누르면 <div id="scrollbottom"></div>이 있는 곳까지 아래로 내려가는 뜻이다.
그림(이미지) 버튼 넣기
위의 예에서는 [ 위로↑ ]와 같이 그냥 글자와 기호를 넣었다. 이곳에 그림을 넣고 싶으면,
[ 위로↑ ]자리에 이미지 주소를 넣어 주면 된다.
아래의 예에서 그림주소URL 부분을 실제 이미지 주소로 바꾸어 주면 된다.
예)
<a style="display:scroll;position:fixed;bottom:30px;right:3px;" rel="nofollow"
href="#" title="Back to Top" style="font-size:2em">위로↑</a>
<a style="display:scroll;position:fixed;bottom:30px;right:3px;" rel="nofollow"
href="#" title="Back to Top" style="font-size:2em"><img src="그림주소URL" border="0"/></a>
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...