좌우에 떠다니는 페이지 플로팅 네비게이션 버튼 달기 (티스토리)

티스토리에서 옆에 떠다니는 페이지 플로팅 네비(네비게이션)을 달고 싶으신 분은 참고 하시길 바란다. 다른 티스토리 스킨에 있는 방법인데 다른 스킨에서도 적용이 가능하다.

좌우에 떠다니는 페이지 플로팅 네비게이션 버튼. 이전·다음 페이지로 넘어갈 수 있다.

---

STEP1 버튼 이미지 업로드

오른쪽 버튼 - 이미지를 다른 이름으로 저장 - 티스토리 파일업로드 올리기

 

---

STEP2 skin.html 편집 

##_article_rep_desc_##을 검색하여 찾아서 그 위에 아래 코드를 입력한다.

<div id="outer_btn_left"></div>

<div id="outer_btn_right"></div>

<s_paging>을 검색하여 <s_paging>~</s_paging>사이에 아래 코드를 입력한다.

<script type="text/javascript">

//<![CDATA[

var tmp_outer_btn_left = "<a  title='이전 페이지'><img src='./images/btn_outer_prev.gif' alt='prev' /></a>";

var tmp_outer_btn_right = "<a  title='다음 페이지'><img src='./images/btn_outer_next.gif' alt='next' /></a>";

document.getElementById("outer_btn_left").innerHTML = tmp_outer_btn_left;

document.getElementById("outer_btn_right").innerHTML = tmp_outer_btn_right;

//]]>

</script>

---

STEP3 <style.css> 편집

아래 코드를 기억하기 쉬운 위치에 입력한다.

#outer_btn_left {

position:fixed;

    left:10px;

    top:350px;

    width:18px;

}

 

#outer_btn_right {

position:fixed;

    right:10px;

    top:350px;

    width:18px;

}

#outer_btn_left와 #outer_btn_right을 수정하여 화살표의 위치를 수정할 수 있다.

---

(참고 스킨 tis_Fotolog_Red)