블로그 팁2010. 8. 30. 16:54

유투브 음악 플레이어를 달아보자 #2


이번 글은 앞서 소개한 mixpod를 창으로 띄어 사용하는 방법을 소개하려고 합니다.
팝업창같은 형식으로 플레이어 창을 띄어 듣는 이유는 전 글에서도 말했지만 블로그가 단일페이지로 되어있기 때문에 페이지를 이동할때마다 끊긴다는 단점이 있습니다. 사이드바에 달아놓아도 다른 댓글 확인하러 갈 때 끊기고, 새 글 작성하러 갈 때 끊기는 등 페이지 이동할때마다 노래가 끊기니 제대로 들을수 있어야 말이죠~

팝업창으로 띄어서 듣는다면 이런 문제는 해결이 가능하죠. 이 방법은 다소 복잡하기는 한데 제가 말한대로 따라하시면 그리 어렵지는 않을겁니다.

mixpod 플레이어 창 만들기

1. 먼저 앞서 만들어놓은 플레이어 코드메모장이 필요합니다.

2. 코드를 메모장에 붙여넣기 한뒤에 다른 이름으로 저장을 누릅니다.
파일이름은 ****.htm으로 합니다. 파일 형식은 모든 파일로 선택해주세요. 그리고 저장을 하면 ****.htm이 만들어집니다.
한번 만들어진 파일을 웹브라우져에 드래그해서 잘 되는지 실행시켜보세요. 아마 별 문제가 없을겁니다.

3. 문제가 없다면 이제 이 파일을 업로드해야합니다. 다른 웹호스팅업체를 사용하고 있으면 그곳에 업로드해도 됩니다만 이번 설명에서는 티스토리 스킨에 업로드를 하겠습니다.
- 티스토리 관리자 페이지 - 스킨 - html/css 편집  - 파일업로드에 들어갑니다.

4. 파일업로드를 눌러서 만들어놓은 ****.htm를 선택한 뒤에 업로드합니다.

5. 이제 올려놓은 ****.htm주소를 알아야 합니다. 주소를 확인하는 방법은 업로드 목록 맨 아래보시면 preview.gif가 있을 겁니다. 이걸 누르면 왼쪽에 그림이 나타나는데 이 그림위에서 마우스오른쪽 버튼 클릭 후 속성을 누르면 주소가 나옵니다.

저의 경우는 http://cfs.tistory.com/custom/blog/54/541222/skin/preview.gif 입니다.
여기서 preview.gif를 지우고 images/****.htm 를 입력하면 됩니다.
ex)http://cfs.tistory.com/custom/blog/54/541222/skin/images/playlist.htm

6. 여기까지 하셨으면 이제 새창 뜨는 링크만 걸면 됩니다. 아래 소스가 새창을 띄우는 소스입니다.

<a href="#" onclick="window.open('http://cfs.tistory.com/custom/blog/54/541222/skin/images/playlist.htm','popup','toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=300,height=300')"><img src="https://t1.daumcdn.net/cfile/tistory/115CB0204C7B22D0BB"></a>

여기에서 빨간색 부분에 자신이 업로드한 htm파일의 주소로 바꾸어 주고 초록색 부분에는 원하는 이미지주소를 넣어주시면 됩니다. 혹은 <img src="https://t1.daumcdn.net/cfile/tistory/115CB0204C7B22D0BB"> 을 지우고 그냥 '음악듣기'같은 글자를 넣어도 됩니다.
width=300,height=300 은 창의 폭과 높이이니 적당히 조정해주세요.

7. 소스를 고쳤으면 이제 사이드바나 다른 적당한 곳에 소스를 붙여넣기 하면 완성입니다.
저는 초록색 플레이 버튼


이렇게 저만의 방법을 공유해 보았는데 다른 분들 잘 될지는 모르겠네요. 아예 따라할 사람이 없을 수도ㅋㅋ
위의 소스를 다른식으로 응용해봐도 될 것 같습니다. 혹시라도 질문 있으면 댓글로 남겨주세요.

Posted by haveone

댓글을 달아 주세요

  1. 비밀댓글입니다

    2010.08.30 20:43 [ ADDR : EDIT/ DEL : REPLY ]
    • 그게 사실 확실하지 않습니다ㅎ 제 생각에는 별 문제 없을것 같아요.

      2010.08.31 22:05 신고 [ ADDR : EDIT/ DEL ]
  2. 흐음... 전 html 직접 편집해서 추가하는 편인데... 이런 방법도 있었군요...

    좋은정보 감사합니다^^

    2010.08.31 14:27 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 저도 이렇게 응용해본건 처음이예요.
      방문 감사합니다.

      2010.08.31 22:06 신고 [ ADDR : EDIT/ DEL ]
    • 아참... 다만 저작권 같은게 약간 우려될것 같아요...

      이번에 저작권 개정도 이뤄지고 있는중이고...

      괜찬으시다면 이글 한번 참조해 주세요^^

      http://yuiter.tistory.com/74

      2010.08.31 22:46 신고 [ ADDR : EDIT/ DEL ]
  3. 이렇게 할수도 있군여;;

    2010.08.31 18:01 신고 [ ADDR : EDIT/ DEL : REPLY ]