BGM 을 홈페이지에 넣을 때 바탕화면과의 조화가 중요한 것 같더군요..

이 점은 BGM 자체의 배경화면색을 투명하게 하는 iframe 코드를 넣으면 됩니다.

--> allowTransparency="true"


아래는 예제 코드 입니다.. 적용한 예 보기는 클릭 ---> http://music24.kr/tr.htm

<IFRAME src="http://music24.kr/bgm/1.php" width=100% height="21" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowTransparency="true" ></IFRAME>

아이프레임으로 넣었을 때 BGM 자체의 바탕화면은 투명하게 하는 코드입니다..

예제->http://music24.kr



지금 http://lovene.dnip.net 와 같이 프레임 셋으로 나누어 넣으실 때는 BGM 을 넣을 프레임

문서(top.htm)를 만드셔서 서버에 올리시고 프레임셋에서 불러오게 하시되.. 그 만드신 프레임

문서에 아이프레임으로 BGM 을 투명하게 넣으시면 됩니다..

BGM 을 넣을 프레임 문서(top.htm)의 바탕화면을 메인프레임의 바탕화면과 같게 하시면됩니다.

아래는 제 홈페이지에 적용한 예제입니다..

1.프레임셋문서-index.html
---------------------------------------
<html>
<head>
<title>홈페이지용 악세사리 BGM 뮤직플레이어,시계,날씨,큐브</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">

</head>

<frameset rows="18, 1*" cols="1*" border="0">
<frame name="top" scrolling="no" marginwidth="0" marginheight="0" noresize src="http://music24.kr/top.htm ">
<frame name="main" scrolling="auto" marginwidth="0" marginheight="0" src="http://lovene.dnip.net/tt/62" noresize>
<noframes>
<body text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">


</body>
</noframes>
</frameset>
</html>


=================================================================================



2.BGM 이 들어간 프레임문서(top.htm) -1번 BGM 을 투명하게 아이프레임으로 넣습니다.

----------------------------

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>http://music24.kr</title>

</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" background="./top_dot.jpg" >
<p ALIGN="CENTER"> <iframe name="status" src="http://music24.kr/bgm/1.php" style="width:986PX;height:18px" frameborder="0" scrolling="no" allowTransparency="true" ></iframe></p>
</body>

</html>

1 번 프레임셋(index.html) 이 2번의 프레임(top.htm)을 불러오고 top.htm 은 배경이 투명한 BGM을 불러오는 거죠..

이상 바탕화면과 조화되게 BGM 을 투명하게 넣는 방법이었습니다..

http://music24.kr

-3.홈페이지를 널리 알리는 방법
-2.Exobud BGM 뮤직플레이어 15가지 추가(2008.2.24)
-1. 초침만 있는 누드시계 10개(2008.2.19)
0.매력적인 미니플레이어 2개(2007.12.31)
1.BGM 9가지 추가(2007.12.28)
2.
검은색 디지탈시계 넣기(2007.12.29)
3.(아이프레임 이용)-홈페이지에 뮤직플레이어 넣기 팁

4.
BGM 플레이어 6가지 추가
5.
새로운 20가지 뮤직플레이어 추가
6.프레임셋 나누기 방식-홈페이지에 음악넣기 팁-제로보드등 원프레임홈피에 적당
7.팝업되는 뮤직플레이어 넣기(이 방법은 다음카페나 세이클럽,파란카페에도 적용가능합니다)
8.날씨배너-지역별75종 색상별8종 총600종류의 날씨배너
9.
홈페이지에 예쁜 시계 넣기
11.파란카페에 무료로 음악플레이어 다는 방법
12.파란블로그에 BGM,시계나 날씨 큐브 등의 악세사리 설치방법입니다
14.새로 추가된 BGM 3개
15.색깔별 뮤직플레이어 7개 (길죽한 바형)
16.스타크래프트2 유닛을 이용한 팝업형 음악플레이어
17.큐브 악세사리(움직이는 네모상자)
18.BGM 뮤직플레이어의 배경을 투명하게 넣어서 홈페이지 배경과 조화시키는 방법
19.아날로그 플래시 시계 10종류 (홈페이지, 블로그용)
20.디지탈 플래시 시계 7종류 (홈페이지, 블로그용)
21.제로보드XE용 플래시 시계 위젯 ver1.0
22.BGM 뮤직플레이어 7개 추가(2008.2.19)



추천하는 BGM = 1,6,16,20,43 47,48,50

미리보기 예제->
http://music24.kr/bgm/번호.php1번부터 50번


제가 다음,네이버,파란등 유명 포탈의 블로그들을 모두 비교해보니


파란블로그(http://blog.paran.com)가 다른 블로그 들보다 사용자에게 상당히 많은 권한을 주고 있습니다

스킨코드를 직접 수정해서 쓸 수도 있고, 사용자 정의 요소라는 관리메뉴를 통해서 좌우측 메뉴에

사용자 자신의 html 코드 삽입으로 시계나 홈페이지용 악세사리 등 원하는 요소를 추가할 수 있습니다

거의 태터툴즈 같은 개인의 설치형 블로그에 버금가는 수준입니다.

그럼 파란 블로그에 무료BGM 을 설치하는 방법을 설명드리겟습니다.

1.상단메뉴 중에서 "관리" 버튼을 누른다

2.나타나는 관리메뉴 중에서 "메뉴/단수 설정" 버튼을 누른다

3. 팝업되는 메뉴중에서 메뉴설정 쪽을 클릭한다.



4.메뉴 설정창이 팝업되면 "사용하지 않는 메뉴"에서 "사용자정의요소"를 하나 선택해서

마우스로 드래그해서 왼쪽메뉴쪽으로 이동시켜 놓는다.

(드래그 앤드랍 방식으로 메뉴를 넣는 겁니다.. 대상을 마우스로 클릭하고마우스 왼쪽버튼을

누른 상태에서 그대로 이동해서 목표지점에서 마우스버튼 누르고 있던 걸 놓는 겁니다)

5. 이제 그 팝업메뉴 바로 오른쪽 아래쪽에 보이는 "사용자 정의요소 관리 "버튼을 누른다

6.사용자 정의요소 관리창에 아래와 같이 BGM 이나 시계, 날씨창 등의 소스코드를 복사해 넣는다

(BGM,시계나 큐브 등의 악세사리 소스코드는 http://music24.kr 에 가시면 여러가지가 있습니다)

BGM 16번

------------------------------------------------------------------------

<table align="left" style="WIDTH: 159px; HEIGHT: 91px" borderColor=#e7e7e7

cellSpacing=0 cellPadding=2 bgColor=#ffffff border=1 >
<tr>
<td width="159" height="87">
<IFRAME src="http://music24.kr/bgm/16.php" width="159" height="87"

frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></IFRAME>

</td>
</tr>
</table>

------------------------------------------------------------------------

시계

-------------------------------------------------------------------------

<embed src="http://music24.kr/music24.kr_di_clock2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"

type="application/x-shockwave-flash" width="160" height="90" wmode="transparent">

</embed>

-----------------------------------------------------------------------

날씨

-----------------------------------------------------------------------

<iframe src=http://music24.kr/weather/seoul.php width="156"

height="153" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

큐브

----------------------------------------------------------------------

<iframe src="http://music24.kr/tv/cube_s_music24.kr.html" width="130" height="120" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

----------------------------------------------------------------------



7.원하시는 악세사리의 코드를 넣으셨으면 이제 좌측상단의 적용하기 버튼을 누른다

8 마지막으로 종료하기 버튼을 눌러주면 완료된 것입니다..

이제 블로그로 돌아가서 설치된 악세사리를 확인하실 수 있습니다..

(시계. 날씨.큐브 이외에도 여러가지 BGM 음악플레이어도 이 방식으로설치가 가능합니다)

좌측상단에검은색 뮤직플레이어와 우측상단의 시계.날씨 큐브 참조하세요.






http://music24.kr


제가 다음,네이버,파란등 유명 포탈의 블로그들을 모두 비교해보니


파란블로그(http://blog.paran.com)가 다른 블로그 들보다 사용자에게 상당히 많은 권한을 주고 있습니다

스킨코드를 직접 수정해서 쓸 수도 있고, 사용자 정의 요소라는 관리메뉴를 통해서 좌우측 메뉴에

사용자 자신의 html 코드 삽입으로 시계나 홈페이지용 악세사리 등 원하는 요소를 추가할 수 있습니다

거의 태터툴즈 같은 개인의 설치형 블로그에 버금가는 수준입니다.

그럼 파란 블로그에 무료BGM 을 설치하는 방법을 설명드리겟습니다.

1.상단메뉴 중에서 "관리" 버튼을 누른다

2.나타나는 관리메뉴 중에서 "메뉴/단수 설정" 버튼을 누른다

3. 팝업되는 메뉴중에서 메뉴설정 쪽을 클릭한다.



4.메뉴 설정창이 팝업되면 "사용하지 않는 메뉴"에서 "사용자정의요소"를 하나 선택해서

마우스로 드래그해서 왼쪽메뉴쪽으로 이동시켜 놓는다.

(드래그 앤드랍 방식으로 메뉴를 넣는 겁니다.. 대상을 마우스로 클릭하고마우스 왼쪽버튼을

누른 상태에서 그대로 이동해서 목표지점에서 마우스버튼 누르고 있던 걸 놓는 겁니다)

5. 이제 그 팝업메뉴 바로 오른쪽 아래쪽에 보이는 "사용자 정의요소 관리 "버튼을 누른다

6.사용자 정의요소 관리창에 아래와 같이 BGM 이나 시계, 날씨창 등의 소스코드를 복사해 넣는다

(BGM,시계나 큐브 등의 악세사리 소스코드는 http://music24.kr 에 가시면 여러가지가 있습니다)

BGM 16번

------------------------------------------------------------------------

<table align="left" style="WIDTH: 159px; HEIGHT: 91px" borderColor=#e7e7e7

cellSpacing=0 cellPadding=2 bgColor=#ffffff border=1 >
<tr>
<td width="159" height="87">
<IFRAME src="http://music24.kr/bgm/16.php" width="159" height="87"

frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></IFRAME>

</td>
</tr>
</table>

------------------------------------------------------------------------

시계

-------------------------------------------------------------------------

<embed src="http://music24.kr/music24.kr_di_clock2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"

type="application/x-shockwave-flash" width="160" height="90" wmode="transparent">

</embed>

-----------------------------------------------------------------------

날씨

-----------------------------------------------------------------------

<iframe src=http://music24.kr/weather/seoul.php width="156"

height="153" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

큐브

----------------------------------------------------------------------

<iframe src="http://music24.kr/tv/cube_s_music24.kr.html" width="130" height="120" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

----------------------------------------------------------------------



7.원하시는 악세사리의 코드를 넣으셨으면 이제 좌측상단의 적용하기 버튼을 누른다

8 마지막으로 종료하기 버튼을 눌러주면 완료된 것입니다..

이제 블로그로 돌아가서 설치된 악세사리를 확인하실 수 있습니다..

(시계. 날씨.큐브 이외에도 여러가지 BGM 음악플레이어도 이 방식으로설치가 가능합니다)

좌측상단에검은색 뮤직플레이어와 우측상단의 시계.날씨 큐브 참조하세요.








=====================================

이번 방법은 방법1의 사용자 정의 요소 추가 기능을 이용한 것보다는 조금 복잡하고 위험하지만

필요한 경우가 있으라 봅니다. 스킨소스를 직접 편집하는 방법입니다. 그럼 시작합니다.


주의사항: * 수정이 잘못 될 경우 블로그가 망가진 모양으로 나오거나

블로그 자체에 접속이 않되기도 합니다

반드시아래 주의사항을 복사해 놓으시고 옆에 놓고 보면서스킨을 수정하십시오.

-----------------------------------------------------------

1.잘못된 스킨 초기화 방법1 -블로그에 접속자체가 않될 때
http://blog.paran.com의 내 블로그 소식 영역에서 [관리] 버튼을 누른 후

스킨 고르기 > 골라쓰는 스킨에서 원하는 스킨을 선택하시면 해당 스킨으로 설정됩니다.

-----------------------------------------------------------

2.잘못된 스킨 초기화 방법2 -블로그에 접속은 될 때

블로그 관리메뉴에 접속이 된다면 관리->스킨고르기 에서

적당한 스킨을 골라서 적용하시면 고쳐집니다.

-----------------------------------------------------------

0.파란블로그에 회원가입을 하고 블로그를 일단 만들어야 겠지요. 그 블로그 상단 고정프레임에

무료BGM을 넣는 방법입니다.

1.블로그 관리버튼을 누른다


2. 디자인 관리를 누른다.




3. HTML 꾸미기 버튼을 누른다.



4.HTML 직접수정을 누른다.


5.스킨영역 HTML 코드 편집하기 영역에서 아래의 설명에 따라 BGM 코드를 넣는다




파란블로그에 무료 음악플레이어를설치하시려면

블로그 관리메뉴에서 --> 디자인 관리--> HTML꾸미기 --->HTML 직접수정 버튼을 누르시고 스킨영역 html 코드 편집하기 눌러서 적당한 곳에 아래의 소스를 넣으시면 됩니다

BGM 을 넣기 좋은 위치를 찾는 법-->HTML 직접꾸미기 영역에서 ctrl+f 눌러 찾기창을 띄운후에

아래 코드를 복사하시고

<tr height="1"><td colspan="2"></td><td class="set01"></td><td class="bg_content">

위 코드를 ctrl+v 로 붙여넣어 찾기 버튼을 누릅니다 , 찾아지면

위 코드가 있는 곳 바로 아래에 아래의 코드를 붙여 넣으시고 적용하기 하시면 됩니다.

-----------------------------------------------------------------------

<table align="left" style="WIDTH: 100%; HEIGHT: 29px" cellSpacing=0 >
<tr>
<td width="750" height="30">
<IFRAME <IFRAME src="http://music24.kr/bgm/50.php" width=100% height="28" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></IFRAME>

</td>
</tr>
</table>

------------------------------------------------------------------------

실제 적용한 저의 블로그 스킨 소스를 예문으로 공개합니다..

아래 제 블로그의 직접 만든 스킨 소스를 참고하셔서 수정하십시오

(잘 모르시면 그냥 제 코드를 가져다가 붙여넣어서 쓰셔도 됩니다)

설치하실 BGM 에도 여러가지의 BGM 이 있습니다.. 원하는 BGM 을 골라서 설치하세요

무료 BGM 제공 하는 곳-->>http://music24.kr 에서 enter

제 블로그의 스킨소스코드

----------------------------------------------------------------------------------------------------

<html>
<!-- 수정불가 : head html -->
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" class="bg_body" onclick="hideit(0);">
<!-- 수정불가 : 상단 로그인 영역 -->
<!-- // BODY START -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" class="" style="background:url('') left 30px">
<tr>
<td valign="top" style="padding:30 0 60 20" >

<table border="0" cellpadding="0" cellspacing="0" width="960" height="100%">

<tr><td style="height:120;color:#FFFFFF;background:url('') left top repeat;padding:3 0 0 65px;line-height:18px;cursor:pointer"><font class="f14 b"><a href="http://blog.paran.com/necast">블로그에 무료BGM 설치하기</font><br>http://blog.paran.com/necast</a></td></tr>
<tr><td height="100%">

<!-- // 라운딩 테두리 시작 -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr height="1"><td width="1" nowrap></td><td width="1" nowrap></td><td width="2" nowrap></td><td width="100%" nowrap class="set01"></td><td width="2" nowrap></td><td width="1" nowrap></td><td width="1" nowrap></td></tr>


<tr height="1"><td colspan="2"></td><td class="set01"></td><td class="bg_content">

<!-- 바로 요 아래가 제가 넣은 소스입니다 -->

<table align="left" style="WIDTH: 100%; HEIGHT: 29px" cellSpacing=0 >
<tr>
<td width="750" height="30">
<IFRAME <IFRAME src="http://music24.kr/bgm/50.php" width=100% height="28" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></IFRAME>

</td>
</tr>
</table>


</td><td class="set01"></td><td colspan="2"></td></tr>
<tr height="2"><td></td><td class="set01"></td><td class="bg_content" colspan="3"></td><td class="set01"></td><td></td></tr>
<tr height="100%">
<td class="set01"></td>
<td class="bg_content" colspan="5" valign="top" style="padding:0 9 60 9">

<!-- 수정가능 : 블로그 top -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr valign="top">
<!-- 수정불가 : 왼쪽메뉴 -->

<!-- // CONTETN START -->
<td width="100%" nowrap>
<!-- 수정불가 : 컨텐츠 -->
</td>
<!-- CONTENT END // -->

<!-- 수정불가 : 오른쪽메뉴 -->
</tr>
</table>

<!-- 수정가능 : 기본 및 XML -->

</td>
<td class="set01"></td>
</tr>
<tr height="2"><td></td><td class="set01"></td><td class="bg_content" colspan="3"></td><td class="set01"></td><td></td></tr>
<tr height="1"><td colspan="2"></td><td class="set01"></td><td class="bg_content"></td><td class="set01"></td><td colspan="2"></td></tr>
<tr height="1"><td colspan="3"></td><td class="set01"></td><td colspan="3"></td></tr>
</table>
<!-- 라운딩 테두리 끝 // -->

</td></tr>
</table>
</td>
</tr>
</table>
<!-- BODY END // -->
<!-- 수정가능 : copyright -->
</body>
</html>

------------------------------------------------------------------------------------

예제 보기는 --> http://blog.paran.com/necast

원본 출처: http://music24.kr

+ Recent posts