ism의 티스토리2012.05.12 06:00
                 

제 블로그 왼쪽에 보시면 '플로팅 베너' 가 (다음 추천,
페이스북, 다음뷰 구독, 한RSS 구독) 달려있습니다.

이 버튼들 모음이 왜 플로팅 베너냐 하면~ 말 그대로
떠다니는, 따라다니는 베너라 해서 이름이 붙여졌답니다.

이 플로팅 베너는 화면을 밑으로 내려도 고정된 위치에서
당당하게 클릭해 달라며 손짓?을 하고 있습니다.

제 얼마 안되는 독자분 중 한 분이 플로팅 베너 다는방법을
포스팅 해주면 안되냐는 질문을 해 주셔서 기꺼이
해드리겠다고 약속을 했기에 이렇게 포스팅 하게 됐습니다.

컴맹과 가까운 저인지라 포스팅 준비하는데 시간이 좀
오래걸리게 됐네요~ㅋ

그래도 열심히 준비했으니 재미없어도 재미있게 읽어주시길
바랍니다.


한가지 작은 바램이 더 있다면 왼쪽 플로팅 베너 제일 위에 있는
손가락 버튼을 살포시 눌러주시면 어떨까 바래봅니다 (__)


우선 플로팅 베너를 달기 전에 해야할 일이 있습니다.
플로팅 베너 안에 보시면 3번째 있는 다음 구독버튼과 4번째 있는 한RSS 구독버튼이 있습니다.

이 버튼들은 이미지로 되어있기 때문에 이 이미지를 불러오기 위해서는 해당하는 파일들을 블로그 안에 저장을
해놔야 한답니다.

갑자기 어려워하실필요 없습니다.
제가 이해할 수 있었으니 충분히 따라하실 수 있거든요 ^^

먼저 아래와 같은 경로로 들어가시면 됩니다.


관리자 모드로 들어가신 다음 1번 -> 'HTML/CSS 편집'을 클릭하시고 2번 -> '파일업로드' 탭을 클릭하시면
사진과 같이 여러개의 파일들이 있는것을 보실 수 있습니다.

여기가 바로 블로그에 필요한 사진들이 담겨져 있는 파일방이라고 할 수 있습니다.
바로 이곳에 아까 말씀드린 다음뷰 구독버튼과 한RSS 구독버튼 이미지를 넣어야 하는 것입니다.

제가 올려드리는 파일을 저 안에 넣어두시는게 첫번째로 할 일이랍니다.
파일 올리는 방법은 '파일업로드'탭 화면 아래 보시면 추가하는 버튼이 있으니 어렵지 않게 하실 수 있겠죠?! ^^

 

위 파일을 다운 받으셔서 업로드 하시면 됩니다.

다음으로 넘어가보실까요?! ^^
우선 손가락 모양의 추천 버튼과 페이스북 버튼을 만들어 보겠습니다.

'HTML/CSS 편집' 탭으로 들어갑니다. 그리고 아래 문구를 Ctrl + F 를 눌러 찾아봅니다.


위 문구를 찾으셨다면 저 문구 바로 밑 부분에 밑에 올려드리는 문구를 넣으시면 됩니다.
(위 문구는 skin.html 부분에 있습니다. style.css 부분이 아닙니다!!)

 

 

파일 올려드렸으니 일일이 타이핑하지 마시고 다운 받으셔서 그대로 넣으시고 저장하시면 됩니다.
단, 위 사진에서 알려드리것처럼 빨간색 밑줄 부분을 본인의 티스토리 아이디로 꼭~~ 변경하신다음
넣으셔야 됩니다. 꼭이요~~  꼭! 꼭! 꼭!

여기까지 따라오시는데 별로 어렵지 않으시죠?
어려우시다면 다시한번 천천히 보시면 충분히 하실 수 있답니다^^

위 단계까지 하셨다면 다음으로 아래의 문구를 style.css 제일 밑부분에 넣어주시면 됩니다.
고민하실 필요 없이 제일 밑에 넣으시면 됩니다^^



역시 타이핑하기 어려우니까 위 파일을 다운받으셔서 그대로 넣어주시면 됩니다.
그리고 저장을 눌러주십니다. 자~ 어떻게 됐을까요??? 밑에 사진을 보실까요?! ^^

 



위 사진처럼 왼쪽에 다음 추천버튼과 페이스북 버튼이 생긴것을 볼 수 있습니다.
여기까지 저와 똑같이 성공하셨다면 모두모두 축하드려요^^ ㅋ

갑자기 이쯤해서 한가지 질문이 생길 수 있습니다.
'이즘님은 플로팅베너에 총 4가지(추천,페이스북,다음 구독,한RSS구독)버튼이 있잖아요!
 그런데 왜 추천 버튼과 페이스북 버튼만 알려주시나요?'

질문한번 받아보고 싶어서 그랬습니다 ㅋㅋ ㅡㅡ;;;
여기까지 잘 따라오셨다면 나머지 두가지 버튼을 넣는것은 정말정말 쉽답니다. 

아쉽지만(나만 아쉽나? ㅋ) 오늘은 여기까지 마치고 내일 이어지는 2편에서 뵐께요^^
여기까지 만드는데도 3시간이나 걸렸네요 ㅠ.ㅠ

그럼 다음 구독버튼과 한RSS 구독버튼 넣는 방법에 대해서는 다음편(내일)에서 찾아뵙겠습니다^^
여기까지 읽어주시고 따라해보시느라 수고 많으셨습니다.

혹시~혹시~ 아직까지 왼쪽 손가락 버튼을 눌러주지 않으신 분이 계시다면 꾸~욱 눌러주시길 바랍니다 ㅋ
여러분의 추천이 글을 쓰는데 매우 힘이되거든요^^

ps. 반도의~대학생님 이정도면 쉽게 따라하실 수 있죠?!
저작자 표시 비영리 변경 금지
신고
  
Posted by 커스자인(Cus-Sign)

댓글을 달아 주세요

  1. 한 달 넘게 검색해서 겨우 알아냈는데
    이렇게 쉽게 올라오다니!!
    이럴줄 알았으면 저도 블로그 스킨 만들 때 이즘님 블로그 오픈할 때까지 기다릴 걸 그랬어요

    2012.05.12 07:32 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • ㅡㅡ;;;
      윤슬이 아버님?은 절 너무
      들었다 놨다 하시는거 같아요 ㅋㅋ
      쨌든~ 칭찬은 언제 들어도 좋네요^^
      즐거운 주말 보내세요

      2012.05.12 09:06 신고 [ ADDR : EDIT/ DEL ]
  2. 아 이런식으로 하는군요
    잘배우고갑니다

    2012.05.12 09:30 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 저두 뷰온버튼만 살려서 해보려는데
    손안에 숫자가 안나오네요.. 왜 그런건가요.;;

    2012.05.17 11:32 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 음..
      잘은 모르겠지만 일단 제일 기본적으로
      뷰온버튼 소스에 있는 주소를
      치토스님것으로 바꿨나요?
      확인해보시겠어요~

      2012.05.17 12:29 신고 [ ADDR : EDIT/ DEL ]
    • <div style="display:scroll;position:fixed;bottom:0px;right:0px;">
      <object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox3.swf?nurl="http://ssacur.tistory.com/[샵#_article_rep_id_##]" width="57" height="76">
      <param name="movie" value="http://api.v.daum.net/static/recombox3.swf?nurl=http://ssacur.tistory.com/[샵#_article_rep_id_##]" />
      </object>
      </div>

      이렇게 했는데 왜 안되죠.?

      그리고 [샵#_article_rep_desc_##] 이거 위에 소스가 들어가 있습니다.

      2012.05.17 13:06 신고 [ ADDR : EDIT/ DEL ]
    • 저도 초보라 잘은 모르겠지만 제가 배운대로라면
      [샵#_article_rep_desc_##] 이거 밑에 넣으셔야
      한다고 배웠는데~~
      밑에 넣고 다시한번 해보시겠어요~~
      큰 도움 못드려서 죄송해요(__)

      2012.05.17 14:39 신고 [ ADDR : EDIT/ DEL ]
    • 스킨이 안맞는 건지 여러방법으로 해봐도 안되네요.;;;

      2012.05.17 15:10 신고 [ ADDR : EDIT/ DEL ]
    • 도와드리고 싶었는데 별로 도움이 되지
      못했네요 ㅠ.ㅠ
      초보라 죄송합니다 (__)

      2012.05.17 17:15 신고 [ ADDR : EDIT/ DEL ]
  4. 안녕하세요~~
    많은검색끝에 필요한 정보를 얻었어요 감사합니다.^^
    근데 저는 이대로 했는데 아래에 삽입이 되네요???
    또 혹시 검정색 박스는 어떻게 만드시는지 가르쳐 주실수있나요??
    즐겨찾기 버튼두요~~ ㅠㅠ 너무 질문만 해서 죄송합니다...

    2012.09.01 22:05 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 저도 하란대로 했는데도 안나오네요 ㅋ

    2012.09.18 16:20 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 다른분들꺼 같이 접목해서 됬어요 ㅠㅠ
      문제가 있는지 들려주셨더라구요 ^^;; 감사합니다 ^^;;
      이웃신청하고 갈깨요 ^^

      2012.09.20 10:24 신고 [ ADDR : EDIT/ DEL ]
  6. http://qkrdnjswls4.tistory.com 블로거님 제블로그에 저처럼 이렇게 되면
    어떻게 수정해야 하나요 ㅠㅠ
    전 옆으로 움직이지 않고 하단바에 유지하게 되는데요.
    한번 보시고 알려주실수있으면 알려주셨으면 감사드립니다.
    티스토리블로그꾸미기가힘드네요 ㅠ

    2013.01.05 13:57 신고 [ ADDR : EDIT/ DEL : REPLY ]
  7. 페이스북 버튼을 추가로 달고싶었는데 페이스북 개발자 페이지에 있는 좋아요 버튼 소스를 넣어도 추가가 안되더라고요ㅠㅠ 좌절하고있다가
    ism님의 페이스북 쉐어 버튼 추가 소스로 대체하니 바로 잘 적용되네요^^ 정보 고맙습니다~!

    2013.01.19 14:25 신고 [ ADDR : EDIT/ DEL : REPLY ]
  8. 비밀댓글입니다

    2013.05.06 21:36 [ ADDR : EDIT/ DEL : REPLY ]
  9. 참고 많이 되었습니다^^ 근데..
    그대로 따라했는데, 손가락버튼이랑 페이스북 버튼이 글의 하단에 나오네요 ㅠㅠ 왼편에 떠다니지 않고 ㅠㅠ
    제가 코드수정하고 이미지를 올렸는데..순서 때문에 그런 걸까요??
    참고로 제 블로그 주소 입니당. http://inocenttome.tistory.com/

    2014.04.02 04:06 신고 [ ADDR : EDIT/ DEL : REPLY ]