블로그 페이지 위로가기

2012. 3. 10. 13:45컴퓨터/블로그 만들기

반응형
티스토리 블로그에서 페이지를 보면서 그 페이지 상단으로 가는 스킨을 적용해봅니다.
스킨에 적용하기전 gif파일을 만들어 css에 넣어야겠지요.
gif파일을 만드는 방법을 저의 글로 바로가기 해둡니다.

<!-- 페이지위로 -->  
<div class="blogTop">
<a href="#container"><img src="./images/페이지위로.gif" title="이곳을 클릭하면 맨위로 갑니다. "></a>
</div>
<!-- 페이지위로 끝-->


페이지위로.txt
페이지 위로가는 기능을 스킨에 적용하여 블로그페이지 하단에 나타내어 보니 상단 페이지로 바로갈수
있어 윗부분의 글을 좀더 보고자 할 때 좋은 기능입니다. 저의 블로그의 경우 스킨에 적용하면서 
'next page' 를 찾아 바로 아래 삽입하여 지금 보시는 것과 같은 화면으로 보여집니다.

<div class="blogTop">
<a href="#container"><img src="./images/페이지위로.gif" title="이곳을 클릭하면 맨위로 갑니다. "></a>
</div>에서 페이지위로.gif는 자신 만든 그림파일이고  이곳을 클릭하면 맨위로 갑니다.

그림을 클릭하면 나타나는 설명부분입니다. 설명부분은 필요에 따라 바꾸면됩니다.

위와 같이 블로그에서 페이지위로가기 소스는 원하는 곳에 소스를 적용하여 볼 수도 있습니다.
스킨을 적용하면서 미리보기 후 스킨이 정상일때 저정하는 것에 주의하시기 바랍니다.
동영상에 html의 내용과 실제 저의 블로그에서 페이지 위로 가기를 스킨에 
적용하여 보여지는 동영상입니다.

블로그에 소스를 스킨에 적용하면서 이와 같은 글을 올려드리는 것은 스킨을 바꾸다보면 이런기능을
만들어 놓았더라도 다시 적용하려고 하면 다시 만들때 어려움이 있어 포스트로 만들어 올려
다시 사용할 때 편리 할 것 같고 이웃들도 함께 사용하였으면 합니다.

이러한 기능를 알려 드리지만 이글을 보시려 오시는 소수분들에게만 보여지고 검색으로 반드시
필요에 의한분들만 찾아 쓸수 있겠지요. 블로그에 많은 글들은 타이밍이 중요한 
것을 봅니다. 아무리 보석같은 정보가 있더라도 그 시간 거기에 있지 않으면 
묻혀지는 것이 블로그의 글이기 때문에 비슷한 글이라도 
올려지는 순간이 중요하다는 것을 느끼게 됩니다.  

   티스토리 블로그에서 페이지를 보면서 그 페이지 상단으로 가는 스킨을 적용해봅니다.
스킨에 적용하기전 gif파일을 만들어 css에 넣어야겠지요.



저의 블로그의 경우 스킨에 적용하면서 'next page' 를 찾아 바로아래 삽입하여
지금보시는 것과 같은 화면으로 보여집니다.


블로그에 소스를 스킨에 적용하면서 이와같은 글을 올려드리는 것은 스킨을 바꾸다보면 이런기능을
만들어 놓았더라도 다시적용하려고 하면 다시 만들때 어려움이 있어 포스트로 만들어 올려
다시 사용할 때 편리 할 것 같고 이웃들도 함께 사용하였으면 합니다.


위와 같이 블로그에서 페이지위로가기 소스는 원하는 곳에 소스를 적용하여 볼 수도 있습니다.
스킨을 적용하면서 미리보기 후 스킨이 정상일때 저정하는 것에 주의하시기 바랍니다.




컴퓨터에 장장한 파일을 업로드합니다.


이러한 기능를 알려드리지만 이글을 보시려오는 소수분들에게만 보여지고 검색으로 반드시
필요에 의한분들만 찾아 쓸수 있겠지요.


저의 블로그에 적용된 파일업로드목록


스킨에 적용하기전 gif파일을 만들어 css에 넣어야겠지요.
gif파일을 만드는 방법을 저의 글로 바로가기 해둡니다.


동영상에 html의 내용과 실제 저의 블로그에서 페이지위로 가기를 스킨에 
적용하여 보여지는 동영상입니다.



gif
파일을 만드는 방법을 저의 글로 바로가기
포토스케이프 사진으로 움직이는 사진 제작


추가로 수정하여 올려 드리는 글

참고사항 : 반대로 블로그 맨 아래로가기 적용 header close아래 
위와같은 방법으로 적용합니다. 
<!-- header close -->
    <hr />
<!-- 페이지아래로 --> 
  <div class="blogbody">
<a href="#footer"><img src="./images/트윗새.gif" title="이곳을 클릭하면 맨아래로 갑니다."></a>
</div>

 
반응형