Jinny :-) :: [티스토리/Tumblr/BGM/SCM music player] 설치형 블로그에 배경음악 플레이어를 넣어보자!
+ 20130401
갑자기 플레이어가 재생이 안되길래
확인해보니까 동영상이 삭제된 노래들이 많더라구요 ㅎㅎ
유튜브는 저작권 때문에 주소가 자주 잘리기 때문에...
재생이 안된다 싶으면 주소 확인 해주세요 ~


 

- 티스토리 블로그 상단에 SCM Music Player를 설치한 모습






티스토리 블로그를 쓰면서 노래를 못 넣는게 제일 아쉬우셨죠?

저도 노래 넣으려고 다양한 방법을 시도해봤는데

페이지 이동할 때마다 새로 재생되는 바람에

꽤 오랫동안 포기하고 살았는데요


그런데 우연히 다른 티스토리에서 SCM뮤직 플레이어를 보고 냉큼 설치해봤어요

그럼 설치하는 방법 알려드릴테니까 따라해보세요 ㅎㅎㅎ

절대 어렵지 않아요!!!







우선 손가락 꾸욱♡











1. SCM 뮤직 플레이어 사이트에 들어가세요


http://scmplayer.net/






2. Choose Skin


블로그 분위기 따라서 다양하게 바꿔가며 쓸 수 있어요 ㅎㅎ

원하는 스킨을 선택하고 Next 버튼 누르세요!






+

또는 http://playlist.me/skins/ 들어가셔서,

마음에 드는 스킨 선택하고 'Player' 탭 누르시고

그대로 진행하시면 됩니다. 






3. Edit Playlist


우선 유튜브(http://www.youtube.com) 가셔서

원하는 노래의 영상를 찾으시고

영상 아래 공유 버튼을 눌러 주소를 복사해주세요


그다음 아래 이미지처럼 SONG URL에 주소를 넣어주시구요

SONG TITLE에는 가수 이름과 노래 제목을 자유롭게 넣어주세요

다 넣었으면 Next 버튼!







4. Configure Settings


여기서는 플레이어 설정을 자유롭게 해주시면 되요


Autostart : 블로그 들어갔을 때 자동 재생

Shuffle Playback : 노래 순서와 상관없이 랜덤으로 재생

Default Volume : 노래 기본 음량


Placement of Player Bar : BGM 플레이어 위치

Show Playlist by Default : 노래 목록 표시 여부


저는 아래 이미지처럼 설정했어요 ㅎㅎㅎ

설정 다 하셨으면 Done 버튼 눌러주세요!







5. 완성된 소스 복사하기 


완성된 소스가 나왔어요!

소스를 긁어서 복사해주세요







6. 스킨 적용 하기


- 티스토리 - 

블로그 관리(admin) 페이지에 가셔서 스킨 수정 페이지로 가주세요

(티스토리는 html/css 편집 메뉴)


html 탭에서 <body> 부분을 찾아주세요!

body 바로 아래에 복사한 소스를 넣어주시고 저장하면 끝 ><







- 텀블러 -
톱니바퀴 모양을 누르고 들어가세요
다섯 번째 탭인 자신의 텀블러 이름을 누르면
오른쪽 화면처럼 뜨는데요
 Customize 누르세요







왼쪽 메뉴에서 Edit HTML







1060번째 줄에서 body를 찾으세요

body 바로 아래에 복사한 소스를 넣어주시고 저장하면 끝 ><












꼼꼼하게 쓴다고 노력했는데...
쉽게 따라 하셨는지 모르겠어요
혹시 모르는 부분 있으시면 댓글 주세요
바로 바로 답글 드립니당 ㅎㅅㅎ




Trackback 2, Comment 93, 티스토리 로그인하기

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. Favicon of http://firstleaf.tistory.com 2013.01.10 09:55 신고  address  modify / delete  reply

    저는 적용은됫는데 음악재생이안되고 00:00으로만 계속 떠있는데ㅠㅠ 이거 왜이런건가요??? ㅠㅠ

  3. Favicon of http://pinemint.tistory.com pinemint 2013.03.24 03:03 신고  address  modify / delete  reply

    와.. 이 팁 찾고 있었는데 딱 발견했네요.
    포스팅 정말 고맙습니다. ^^

  4. 민희 2013.03.31 01:09 신고  address  modify / delete  reply

    제가 텀블러를 쓰는데 노래가없어서요 ..
    하라는대로햇는데 도무지 머가먼지모르겟어요
    저소스를 갖다가 그안에어디다가 붙어야되는거에요?

  5. Favicon of http://jic79.com 후천만 2013.04.04 22:40 신고  address  modify / delete  reply

    감사합니다~덕분에 제 블로그가 더욱 좋아졌습니다~^^

  6. Favicon of http://soe-j.tistory.com 민트 초코칩 2013.04.26 02:17 신고  address  modify / delete  reply

    고마워요. 덕분에 잘 설치했네요 :)

  7. Favicon of http://greenpong.tistory.com GreenPong 2013.11.18 00:29 신고  address  modify / delete  reply

    블로그에 음악을 넣고싶어도 저작권때문에 망설여졌는데....
    이렇게 설치하면 되겠군요~ ^^ 좋은 정보 감사드려요!~ 링크추가하구 가요 ^^

  8. 뉴밍 2013.11.30 17:54 신고  address  modify / delete  reply

    이거 궁금했었는데 감사합니다 !! ^_^

  9. Favicon of http://pinemint.tistory.com pinemint 2013.12.30 17:43 신고  address  modify / delete  reply

    안녕하세요. 오래전 이 포스팅 덕분에 BGM 성공했었어요. 위에 제 댓글도 있네요. ^^
    최근에 알게된 팁인데요. http://playlist.me/skins/ 여기에 가면 다양한 스킨의 플레이어를 설치할 수 있어요.
    그러니까 기본은 SCM플레이어고 스킨을 .css 형태로 바꿀 수 있어요.
    원하는 스킨 체크하고, 상단 메뉴 Player를 클릭하면 custom skin css에 주소가 복사되어 입력이 된 걸 볼 수 있어요.
    혹시 모르고 계신가해서 알려드립니다. ^^ 이 곳 방문하는 다른 분들도 알 수 있을 것 같기도 하고요.

  10. yourautumn 2014.02.20 16:25 신고  address  modify / delete  reply

    텀블러에 설치하려하는데 ㅜㅜ
    html 261번 밖에 없어요.. 제가 html 을 전혀 할줄 몰라서요 ㅠㅠ
    어디에 입력해야 할지 모르겠어요 ㅠㅠㅠ

  11. Favicon of http://cafe-kurokuma.tistory.com 검은백곰 2014.07.12 17:36 신고  address  modify / delete  reply

    좋은정보 잘보고 갑니다~ 덕분에 깔끔한 뮤직 플레이어 배워가요~

  12. Favicon of http://languagechallenge.tistory.com =영 2014.08.20 20:44 신고  address  modify / delete  reply

    저는 요상하게 <body> 밑에 얌전히 붙여넣기 하고 저장해서 보면 뮤직플레이어 스킨만 뜨고 블로그 부분은 기본 뼈대만 남고 메뉴, 카테고리, 내용이 전부 다 사라져버리네요ㅠㅠㅠㅠㅠ 왜 이러는 걸까요..?

  13. Favicon of http://rapper2hon.tistory.com 랩퍼투혼 2014.11.10 03:00 신고  address  modify / delete  reply

    유튜브 플레이리스트를 한번에 불러올 순 없나요?

  14. Favicon of http://girlgif.tistory.com Jisooo 2014.11.15 21:24 신고  address  modify / delete  reply

    안녕하세요. 질문이 있어서 이렇게 글을 남겨봅니다. scm플레이어를 유튜브 영상 링크시 시작지점을 임의로 설정해서 재생하는 방법이 없을까요? 태그로는 가능한데 플레이어에 적용해보려고 해도 쉽지가 않네요.

  15. Favicon of http://blog.koyeseul.net 책덕후 화영 2014.11.29 23:22 신고  address  modify / delete  reply

    제 블로그는 header div가 상단에 고정되는 구조라서 저걸 설치하는게 가능할지 모르겠어요.;;; 그래도 좋은 팁인건 확실하네요.

  16. Favicon of http://bluewhalemr.tistory.com 할가 2014.11.30 19:09 신고  address  modify / delete  reply

    좋은 정보 고맙습니다~ XD. 유용하네요!

  17. Favicon of http://hpnote.tistory.com Heison 2014.12.01 16:33 신고  address  modify / delete  reply

    좋은정보 감사해요~ 잘쓰겠습니다. ㅎㅎ 생각보다 쉽네요 ^^

    블로그에 브금에 생기니까 예전 싸이월드 미니홈피 생각도 나고 좋네요 ㅋㅋ

  18. Favicon of http://mutuljjang.tistory.com 낭만동키 2015.03.19 20:22 신고  address  modify / delete  reply

    좋은 정보 감사합니다. 이쁜 휴지통이 있어서 들어와 봤는데 BGM 설정법이 있어서 티스토리에 해봤는데 윗분 말씀처럼 예전 싸이 기억나네요. ^^

  19. Favicon of http://17177.tistory.com mzy 2015.06.04 15:23 신고  address  modify / delete  reply

    페이지 바뀔때마다 노래가 다시 시작되는 문제에 직면해서 찾아보다가 들어왔어요.
    너무 쉽게 잘 적용했어요.
    고맙습니다!!

  20. Favicon of http://mmmmmmmmmi.tistory.com miiiiiiiiiiiiiiii 2015.08.12 06:26 신고  address  modify / delete  reply

    다른 사이트들은 깔끔히 one cross bar로 재생되는데 왜 제블러그 안에서만 이중스크롤로 보이는 걸까요?

  21. Favicon of http://allduk.tistory.com 돌망덕 2016.03.10 19:16 신고  address  modify / delete  reply

    오.. html 잘 모르는 저도 쉽게 따라할수있었어요*_* 좋은 정보 감사해요!!