'플로팅버튼'에 해당되는 글 1건
- 2012.03.27 티스토리 따라다니는 추천버튼,다음뷰,한rss 구독버튼 만들기(플로팅 버튼) 3
티스토리 따라다니는 추천버튼 만들기 입니다.
그럼 어떤버튼인지 한번 살짝 구경해볼까요? 아래 빨간박스로 표시된곳 처럼 만들겁니다.
마우스 스크롤에 따라 위치가 변동하게 되죠.
그럼 블로그에 설치하기 위한 준비작업을 해볼까요?
| <!-- 추천&구독 모듈 --> <A style="POSITION: fixed; MARGIN-LEFT: -620px; TOP: 138px; LEFT: 50%;"><img src=./images/click.png> <table style="background-color:#f9f9f9; border:0.5px solid #cdecfa; width:68px;"><tr><td align=center> <object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox3.swf?nurl=http://engu.tistory.com/" width="57" height="76"><param name="movie" value="http://api.v.daum.net/static/recombox3.swf?nurl=http://engu.tistory.com/" /></object></div> <div class="daum view"> <a href="http://v.daum.net/user/plus?blogurl=http://engu.tistory.com" target="_blank" title="view 구독"><img src="./images/viewon.png" onMouseover=this.src="./images/viewout.png" onMouseout=this.src="./images/viewon.png" style="cursor:hand" border="0"/></a> </div> <div class="han rss"> <a href="http://www.hanrss.com/add_sub.qst?url=http://engu.tistory.com" onclick="window.open(this.href); return false"title="한Rss 구독"> <img src="./images/hanon.png" onMouseover=this.src="./images/hanout.png" onMouseout=this.src="./images/hanon.png" style="cursor:hand" border="0"/></a> </div> </td></tr></table> </A> <!-- 추천&구독 모듈 끝--> |
첫번째로 할 일이 받으신 텍스트 파일 내에 있는 소스중 위 그림의 빨간색으로 표시된 주소를 자신의 블로그 주소로 변경하셔야 합니다.
다운로드 : 
구독소스.txt
두번째는 아래 올려둔 파일을 받으신 후 블로그 관리자 화면에 HTML/CSS 편집 메뉴에 있는 파일업로드 메뉴에서 파일을 올리셔야합니다.
다운로드 : 
구독버튼.zip
세번째는 html/css 메뉴로 이동하신후 키보드(컨트롤+F)를 누르시면 찾기창이 뜹니다. 거기서 위 화면처럼 "article"를 클릭하시면 노란색 박스의 글이 검색이 됩니다. 저 노란 박스가 본문의 글을 나타내는곳입니다. 노란박스 글 아래쪽에 수정하신 구독 소스를 넣으시면 됩니다.
| <A style="POSITION: fixed; MARGIN-LEFT: -620px; TOP: 138px; LEFT: 50%;"> |
네번째는 일단 화면상에 플로팅버튼이 이상없이 나왔다면 화면상의 플로팅버튼 위치를 잡아주셔야 합니다. 다시 처음으로 돌아가볼까요?
위 화면은 소스코드의 제일 상단에 주황색으로 표시되어있는 코드입니다. 이 코드가 화면상에 플로팅버튼의 위치를 조정할수 있는 명령어입니다.
포지션은 고정으로 되어있고 마진은 왼쪽에서 -620픽셀 위에서 138픽셀으로 설정되어있습니다.
위 숫자를 조금씩 조정하시면서 자신의 블로그에 맞는 위치를 잡으셔야 합니다.
이쁘게 돼셧나요? 저도 여기저기 뒤져서 공부하다보니 많은것을 알게되더군요..^^
여러분도 하실 수 있어요. 화이팅~
'블로그꽃단장♥' 카테고리의 다른 글
| 구글 애드센스 수익을 실시간으로 보여주는 플러그인(크롬브라우저) (0) | 2012.04.08 |
|---|---|
| 티스토리 카테고리 전체펼치기 (0) | 2012.03.28 |
| 구글 애드센스 가입하는 방법 (3) | 2012.01.14 |
| 티스토리 사이드바에 애드센스 광고넣기 (0) | 2012.01.14 |
| 티스토리 글제목 물결모양으로 꾸미기 (0) | 2012.01.12 |
Prev
Rss Feed