내 블로그에 BGM깔기!!! (feat.자동플레이)

요즘 작업할 때에 노래를 자주 들어서 그런지 내 블로그에도 BGM을 넣고 싶어졌다.

 

나처럼 BGM을 깔고 싶으신분들이 있으리라 생각되어 방법을 공유하려고 한다!

 

먼저 내 블로그에는 아래 사진과 같은 오디오 플레이어 넣었다.

 

맘에 안드신다면 사요나라..

 

맘에 드셨다면 구도--옥과 하트.. 

 

준비물

mp3파일 딱 하나 밖에 없다!!!

 

방법

사진을 캡쳐하여 설명을 드릴테니 따라해보시길 바랍니당.

 

1. 먼저 관리화면으로 이동 후에 왼쪽 사이드 쪽의 꾸미기 > 스킨 편집 탭을 눌러 준다. 

 

 

2.  html 편집 버튼을 눌러준다.

 

 

3. 파일업로드 버튼을 누른후, 아래에 있는 +추가 버튼을 눌러 준비한 mp3파일을 올린다. 용량이 크면 시간이 조금 걸리므로 기다리자. 그 다음에 업로드가 되면 잘 올라갔는지 확인한다.

 

여기서 중요한건 파일이 images/파일명.mp3으로 올라가는데 이 부분을 사용해야하니 메모를 해두는 것이다.

mp3파일명에 공백이 들어가 있는 경우는  _가 업로드시 자동으로 들어가게 되므로 파일명은 다시 한번 확인할 필요가 있다.

 

 

 

4. 3번이 완료 되었다면 이제 BGM을 넣을 곳을 정하자! 정해졌다면, 아래의 코드 중  초록색 부분( <!-- BGM --> 생략 <!-- BGM -->)부분을 복사하여, filename을 mp3파일명으로 바꾸면 된다.

 

그리고 Show Your Love부분은 mp3파일명을 적었는데, 적고 싶은 문구 등을 적어주면 된다.

 

jostory블로그의 경우는 사이드 바쪽에 bgm을 추가하였으므로 <s_sidebar_element> 태그 안에 코드를 붙여넣었다.

<s_sidebar_element>
    <!-- BGM -->
    <h3> Show Your Love</h3>
    <iframe src="./images/filename.mp3#toolbar=0" allow="autoplay" id="audio" frameborder="0"></iframe>
    <!-- BGM -->
<s_sidebar_element>

 

 

5. 마지막으로 CSS버튼을 클릭한 후, 아래의 css를 복사&붙여넣기를 하고 적용버튼을 누르면 끝!!!

 

#audio{
    width: 150px;
    height: 55px;
    border-radius: 60px;
    padding: 0px 10px 0px 10px;
    margin: 10px;
}

 

jostory블로그에 오시는 분들이 여유롭게 내가 선곡한 BGM을 들으며, 내가 쓴 글을 읽는 상상을 하며 써보았다. 

 

사소하지만 뭔가 멋지지 않은가 싶다ㅎ

 

도움이 되셨다면, ❤️를 눌러 주시면 감사하겠습니다!

(잘 안되시셨다면 댓글로 남겨주세요~ 아는범위 내에서 도와드릴게요!)