본문 바로가기

블로그 누리는 세상

블로그 팁 - 긴 본문에서 간단한 마우스 이동법

당신의 블로그 포스트는 아래와 같은 경우에 해당되지 않는지요

1. 도서 리뷰와 같이 긴 글은 아닌가요.
2. 수 많은 사진으로 꾸며진 긴 글은 아닌가요.
3. 혹은 유명 블로거라서 댓글이 주렁주렁 달린 글은 아닌가요.
4. 이도저도 아니면 중간 중간에 삽입된 광고로 글의 끝을 모를 지경은 아닌가요.


만일 위와 같은 경우가 하나 이상 해당된다면, 방문자의 수고로움을 덜어주어야 할 것 같은데요.
오늘 마침 좋은 블로그 팁을 발견하여 소개합니다. 물론 최초의 해당 블로그 팁을 올리신 분의 허락은 받았습니다.

오늘 제가 새로 꾸민 화면의 일부분 사진 입니다.

완성화면

[ 완성화면 ]


위의 빨간색 박스로 표기된 " 화면 상하단으로 바로 이동하실려면 화면의 아무곳에서 더블클릭 해 보세요"문구와 같은 기능을 첨가할려고 합니다.



구체적인 방법은 아래와 같습니다.
1. 코드

<!--------상 하 페이지 이동 소스------------------->

<script language=javascript>
<!--
toggle=0;
function dblclick() {
    if (toggle==0) {
        var sc=99999; toggle=1;
    } else {
        var sc=0; toggle=0;
    }
    window.scrollTo(0,sc);
}
if (document.layers) {
    document.captureEvents(Event.ONDBLCLICK);
}
document.ondblclick=dblclick;

var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
    if (IE) { // grab the x-y pos.s if browser is IE
        tempX = event.clientX + document.body.scrollLeft;
        tempY = event.clientY + document.body.scrollTop;
    } else { // grab the x-y pos.s if browser is NS
        tempX = e.pageX;
        tempY = e.pageY;
    }
    if (tempX < 0){tempX = 0;}
    if (tempY < 0){tempY = 0;}
    return true;
}
// -->
</script>

<!--------상 하 페이지 이동 소스------------------->




2. 코드 삽입 위치

티스토리 관리자 모드 -> 스킨 -> HTML/CSS편집 -> SKIN HTML로 이동합니다.
<HEAD>와 </HEAD> 사이에 위의 코드를 삽입하면 됩니다.

<HEAD>
코드 삽입 위치
</HEAD>

이것으로서 해당 기능이 제대로 실행됩니다. 하지만 이러한 기능을 방문자가 잘 알 수 있도록 [완성화면]의 사진처럼 문구를 삽입하는 것이 좋습니다.

방문자가 쉽게 발견할 수 있는 위치를 감안하여 설정하시면 될 것 같습니다.



반응형