요즘 작업할 때에 노래를 자주 들어서 그런지 내 블로그에도 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을 들으며, 내가 쓴 글을 읽는 상상을 하며 써보았다.
사소하지만 뭔가 멋지지 않은가 싶다ㅎ
도움이 되셨다면, ❤️를 눌러 주시면 감사하겠습니다!
(잘 안되시셨다면 댓글로 남겨주세요~ 아는범위 내에서 도와드릴게요!)
'잡동사니' 카테고리의 다른 글
내 취급설명서 발급해주는 성격테스트 (0) | 2021.07.07 |
---|---|
만화 캐릭터로 알아보는 성격&스트레스 테스트!!!! (0) | 2021.07.02 |
댓글