블로그 마우스 포인터 바꾸기에 이어서
블로그에 배경 음악을 추가해보자
링크로 이동하면 SCM Music Player
중간쯤에 아래와 같은 화면이 보일 것이다
자신의 블로그에 맞는 / 또는 취향 저격!
원하는 스킨 선택~!ㅋㅋ
저는 빨간색 선택해볼께요~^^
그리고 오른쪽 아래에 Next 선택하거나 위의 Edit Playlist를 눌러보자
이제 노래를 넣으면 된다 Youtube에서 원하는 노래 검색하고 그 주소를 복사 붙여넣기 하면 된다
저는 아래와 같이 한 곡만 넣어 볼께요 ㅎㅎ
다 추가 했으면 Next
마지막 단계로 자동 재생 / 랜덤 재생 / 기본 소리 크기 / 플레이어 위치 Top Bottom / 기본으로 재생 목록띄울지 선택
원하시는 대로 선택하고 Done 누른다
이제 아래와 같이 HTML 코드가 나온다
그대로 드래그 하여 복사해서 HTML에 넣으면 된다
HTML 코드를 보면
<!-- SCM Music Player http://scmplayer.net -->
<script type="text/javascript" src="http://scmplayer.net/script.js"
data-config="{'skin':'skins/black/skin.css','volume':100,'autoplay':true,'shuffle':true,'repeat':1,'placement':'bottom','showplaylist':false,'playlist':[{'title':'제목','url':'BGM주소'}]}" ></script>
<!-- SCM Music Player script end -->
일단 이것이 기본 플레이어 소스인데 블로그에 추가해 보도록 하자
티스토리 관리 페이지에 들어가자
위의 소스를 'HTML/CSS 편집' 으로가서 아래와 같이
skin.html에 추가해준다
위의 소스 중에서 {'title':'제목','url':'BGM주소'} 에 원하는 BGM을 넣으면 된다.
넣는 방법은.. YouTube를 이용하자
YouTube에서 원하는 배경 음악을 찾아서...
그 페이지의 URL 주소를 복사한다.
함정 카드 배경 음악의 URL은 https://www.youtube.com/watch?v=Hl326j8KJFo 이거다
여기서 https 에서 s는 빼주자 http://www.youtube.com/watch?v=Hl326j8KJFo
이제 {'title':'제목','url':'BGM주소'} 여기에 넣어 보자.
{'title':'함정카드','url':'http://www.youtube.com/watch?v=Hl326j8KJFo'}
<!-- SCM Music Player http://scmplayer.net -->
<script type="text/javascript" src="http://scmplayer.net/script.js"
data-config="{'skin':'skins/black/skin.css','volume':100,'autoplay':true,'shuffle':true,'repeat':1,'placement':'bottom','showplaylist':false,'playlist':[{'title':'함정카드','url':'http://www.youtube.com/watch?v=Hl326j8KJFo'}]}" ></script>
<!-- SCM Music Player script end -->
이런식이 된다. 그럼 이제 블로그에 적용시켜보자
아래에 저장 버튼을 꼭 누르고
블로그로 접근해 보면...
아래 부분에 BGM 플레이어가 생긴다!
맨 오른쪽에 = 이런거 눌러보면 재생 목록(Playlist)가 나온다
끝!
여러 배경 음악을 넣으려면..
아래와 같이 ' , ' 를 구분으로 여러개의 배경 음악을 추가하면 된다
<!-- SCM Music Player http://scmplayer.net -->
<script type="text/javascript" src="http://scmplayer.net/script.js"
data-config="{'skin':'skins/black/skin.css','volume':100,'autoplay':true,'shuffle':true,'repeat':1,'placement':'bottom','showplaylist':false,'playlist':[{'title':'Gain - Paradise Lost','url':'http://www.youtube.com/watch?v=kCGohb6yZXg'},{'title':'리쌍 - 회상','url':'http://www.youtube.com/watch?v=TuG4T9et3Bo'}]}" ></script>
<!-- SCM Music Player script end -->
물론 가장 편한 방법은 SCM Music Player 로 이동해서
추가하는 방법이 가장 편하다 ^^