메뉴 건너뛰기

MH

내 사랑치 않고 끝내는 것 보다 사랑해서 잃어 버리는 편이 좋다.

It is better to have loved and lost than to have never loved at all.

Home > Rhymix > Rhymix 팁
문하우스
2008.01.08 12:54

시노부BGM을 홈페이지에 위치 설정하는법

팔공산
조회 수 7551 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

위로 아래로 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

위로 아래로 인쇄 첨부
첨부파일 　　등록일　　 　파일크기　 다운 수
snv.psd 2008.01.09 202.5KB 30
Extra Form
적용여부 적용
적용페이지 http://자작

시노부BGM 홈페이지에 위치 설정하는법을 설명할까 합니다.
(이 설명은 이목록 한칸 아래의 "zbxe에 시노부bgm을 설치하자"를 따라서 설치하신 후 해야 합니다.) 

1. 죄측메뉴 아래에 위치 시키기

해당 레이아웃의 layout.html을 열어서

   </ol>
            <!--@end-->

  </div>
  <div id="columnRight">
            <!-- 컨텐츠 시작 -->

이 부분을 찾아서

</ol>

<!-- 시노부BGM -->
<table align=center width=190px height=90px cellspacing="0" style='background-image:url(<?=$dir?>/bgm/images/snv_90.gif);'>
  <tr><td>

    <table height=30px>
      <tr><td align=left style='padding-top:0px; padding-left:8px; padding-right:5px'>
        <marquee width="170" direction="left" scrolldelay=100 scrollamount=2 onmouseover="this.stop()" onmouseout="this.start()">
       <font id="stitle" style='font-family:돋움; FONT-SIZE:9pt; COLOR:#fff; top:1;'></font>
     </marquee>
      </td></tr>
    </table>

    <table height=30px>
      <tr><td align=left style='padding-left:11px; padding-top:0px'>
        <font style='font-family: 돋움; FONT-SIZE: 9pt; COLOR:#fff;'></font>
        <font id="now_time" style='font-family: 돋움; FONT-SIZE: 9pt; COLOR:#fff; position:RELATIVE; top:1;'>▷00:00|00:00</font>
      </td></tr>
    </table>

    <table height=30px align=center>
      <tr><td style='padding-top:5px'>
        <font id="stats"></font>
          <a onclick="parent.frames['bgm'].preTrack();" onMouseOver="document.pre.src='<?=$dir?>/bgm/images/b1_over.gif';" onMouseOut="document.pre.src='<?=$dir?>/bgm/images/b1.gif';"><img name=pre src="<?=$dir?>/bgm/images/b1.gif" width="13" height="13" border="0" alt="이전"></a>
          <a onclick="parent.frames['bgm'].stopTrack();" onMouseOver="document.sto.src='<?=$dir?>/bgm/images/b2_over.gif';" onMouseOut="document.sto.src='<?=$dir?>/bgm/images/b2.gif';"><img name=sto src="<?=$dir?>/bgm/images/b2.gif" width="13" height="13" border="0" alt="정지"></a>
          <a onclick="parent.frames['bgm'].play();" onMouseOver="document.pla.src='<?=$dir?>/bgm/images/b3_over.gif';" onMouseOut="document.pla.src='<?=$dir?>/bgm/images/b3.gif';"><img name=pla src="<?=$dir?>/bgm/images/b3.gif" width="13" height="13" border="0" alt="재생"></a>
          <a onclick="parent.frames['bgm'].MPause();" onMouseOver="document.pau.src='<?=$dir?>/bgm/images/b4_over.gif';" onMouseOut="document.pau.src='<?=$dir?>/bgm/images/b4.gif';"><img name=pau src="<?=$dir?>/bgm/images/b4.gif" width="13" height="13" border="0" alt="일시정지"></a>
          <a onclick="parent.frames['bgm'].nextTrack();" onMouseOver="document.nex.src='<?=$dir?>/bgm/images/b5_over.gif';" onMouseOut="document.nex.src='<?=$dir?>/bgm/images/b5.gif';"><img name=nex src="<?=$dir?>/bgm/images/b5.gif" width="13" height="13" border="0" alt="다음"></a>
          <a onclick="parent.frames['bgm'].chgLoop();" onMouseOver="document.loo.src='<?=$dir?>/bgm/images/loop_over.gif';" onMouseOut="document.loo.src='<?=$dir?>/bgm/images/loop.gif';"><img name=loo src="<?=$dir?>/bgm/images/loop.gif" width="13" height="13" border="0" alt="반복/한곡"></a>
          <a onclick="parent.frames['bgm'].nextTrack();" onMouseOver="document.mod.src='<?=$dir?>/bgm/images/random_over.gif';" onMouseOut="document.mod.src='<?=$dir?>/bgm/images/random.gif';"><img name=mod src="<?=$dir?>/bgm/images/random.gif" width="13" height="13" border="0" alt="랜덤/순차"></a>
          <a onclick="parent.frames['bgm'].m_list2();" onMouseOver="document.lis.src='<?=$dir?>/bgm/images/list_over.gif';" onMouseOut="document.lis.src='<?=$dir?>/bgm/images/list.gif';"><img name=lis src="<?=$dir?>/bgm/images/list.gif" width="13" height="13" border="0" alt="곡목리스트"></a>
      </td></tr>
    </table>

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

<!--@end-->

이렇게 소스 삽입하면 로그인아래에 위치합니다. 위젯들과 적당한 위치 조절하면 됩니다.


2. 홈페이지에 프리하게 위치시키는 방법(이것을 설명 할려고 이 글을 적었음 ^.^)

해당 레이아웃의 layout.html을 열어서

  <!--GNB-->
  <ul id="gnb">
            <!-- main_menu 1차 시작 -->

이 부분을 찾아서   <!--GNB--> 위에

<ul id="bgm">
<!-- 시노부BGM -->
<table align=center width=190px height=90px cellspacing="0" style='background-image:url(<?=$dir?>/bgm/images/snv_90.gif);'>
  <tr><td>

    <table height=30px>
      <tr><td align=left style='padding-top:0px; padding-left:8px; padding-right:5px'>
        <marquee width="170" direction="left" scrolldelay=100 scrollamount=2 onmouseover="this.stop()" onmouseout="this.start()">
       <font id="stitle" style='font-family:돋움; FONT-SIZE:9pt; COLOR:#fff; top:1;'></font>
     </marquee>
      </td></tr>
    </table>

    <table height=30px>
      <tr><td align=left style='padding-left:11px; padding-top:0px'>
        <font style='font-family: 돋움; FONT-SIZE: 9pt; COLOR:#fff;'></font>
        <font id="now_time" style='font-family: 돋움; FONT-SIZE: 9pt; COLOR:#fff; position:RELATIVE; top:1;'>▷00:00|00:00</font>
      </td></tr>
    </table>

    <table height=30px align=center>
      <tr><td style='padding-top:5px'>
        <font id="stats"></font>
          <a onclick="parent.frames['bgm'].preTrack();" onMouseOver="document.pre.src='<?=$dir?>/bgm/images/b1_over.gif';" onMouseOut="document.pre.src='<?=$dir?>/bgm/images/b1.gif';"><img name=pre src="<?=$dir?>/bgm/images/b1.gif" width="13" height="13" border="0" alt="이전"></a>
          <a onclick="parent.frames['bgm'].stopTrack();" onMouseOver="document.sto.src='<?=$dir?>/bgm/images/b2_over.gif';" onMouseOut="document.sto.src='<?=$dir?>/bgm/images/b2.gif';"><img name=sto src="<?=$dir?>/bgm/images/b2.gif" width="13" height="13" border="0" alt="정지"></a>
          <a onclick="parent.frames['bgm'].play();" onMouseOver="document.pla.src='<?=$dir?>/bgm/images/b3_over.gif';" onMouseOut="document.pla.src='<?=$dir?>/bgm/images/b3.gif';"><img name=pla src="<?=$dir?>/bgm/images/b3.gif" width="13" height="13" border="0" alt="재생"></a>
          <a onclick="parent.frames['bgm'].MPause();" onMouseOver="document.pau.src='<?=$dir?>/bgm/images/b4_over.gif';" onMouseOut="document.pau.src='<?=$dir?>/bgm/images/b4.gif';"><img name=pau src="<?=$dir?>/bgm/images/b4.gif" width="13" height="13" border="0" alt="일시정지"></a>
          <a onclick="parent.frames['bgm'].nextTrack();" onMouseOver="document.nex.src='<?=$dir?>/bgm/images/b5_over.gif';" onMouseOut="document.nex.src='<?=$dir?>/bgm/images/b5.gif';"><img name=nex src="<?=$dir?>/bgm/images/b5.gif" width="13" height="13" border="0" alt="다음"></a>
          <a onclick="parent.frames['bgm'].chgLoop();" onMouseOver="document.loo.src='<?=$dir?>/bgm/images/loop_over.gif';" onMouseOut="document.loo.src='<?=$dir?>/bgm/images/loop.gif';"><img name=loo src="<?=$dir?>/bgm/images/loop.gif" width="13" height="13" border="0" alt="반복/한곡"></a>
          <a onclick="parent.frames['bgm'].nextTrack();" onMouseOver="document.mod.src='<?=$dir?>/bgm/images/random_over.gif';" onMouseOut="document.mod.src='<?=$dir?>/bgm/images/random.gif';"><img name=mod src="<?=$dir?>/bgm/images/random.gif" width="13" height="13" border="0" alt="랜덤/순차"></a>
          <a onclick="parent.frames['bgm'].m_list2();" onMouseOver="document.lis.src='<?=$dir?>/bgm/images/list_over.gif';" onMouseOut="document.lis.src='<?=$dir?>/bgm/images/list.gif';"><img name=lis src="<?=$dir?>/bgm/images/list.gif" width="13" height="13" border="0" alt="곡목리스트"></a>
      </td></tr>
    </table>

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

<!--GNB-->
  <ul id="gnb">
            <!-- main_menu 1차 시작 -->

소스를 삽입한다.

그리고 가장 간단한 스킨입니다. 노래제목,이클라이저,정지,플레이,일단멈춤,리스트 만 니오게 했습니다.

<!-- 시노부BGM -->
<ul id="bgm">
<div style="float:left; width:105px; padding-right:5px">
  <marquee width="100px" direction="left" scrolldelay=100 scrollamount=2 onmouseover="this.stop()" onmouseout="this.start()">
    <font id="stitle" style='font-family:돋움; FONT-SIZE:9pt; COLOR:#89AFE5; top:1;'></font>
  </marquee>
</div>

<div style="float:left; width:90px">
  <font id="stats"></font>
  <a onclick="parent.frames['bgm'].stopTrack();" onMouseOver="document.sto.src='<?=$dir?>/bgm/images/b2_over.gif';" onMouseOut="document.sto.src='<?=$dir?>/bgm/images/b2.gif';"><img name=sto src="<?=$dir?>/bgm/images/b2.gif" width="13" height="13" border="0" alt="정지"></a>
  <a onclick="parent.frames['bgm'].play();" onMouseOver="document.pla.src='<?=$dir?>/bgm/images/b3_over.gif';" onMouseOut="document.pla.src='<?=$dir?>/bgm/images/b3.gif';"><img name=pla src="<?=$dir?>/bgm/images/b3.gif" width="13" height="13" border="0" alt="재생"></a>
  <a onclick="parent.frames['bgm'].MPause();" onMouseOver="document.pau.src='<?=$dir?>/bgm/images/b4_over.gif';" onMouseOut="document.pau.src='<?=$dir?>/bgm/images/b4.gif';"><img name=pau src="<?=$dir?>/bgm/images/b4.gif" width="13" height="13" border="0" alt="일시정지"></a>
  <a onclick="parent.frames['bgm'].m_list2();" onMouseOver="document.lis.src='<?=$dir?>/bgm/images/list_over.gif';" onMouseOut="document.lis.src='<?=$dir?>/bgm/images/list.gif';"><img name=lis src="<?=$dir?>/bgm/images/list.gif" width="13" height="13" border="0" alt="곡목리스트"></a>
</div>
</ul>


그리고 해당 스킨의 칼라 css를 찾아서

/* bgm 위치*/
#bgm { position:absolute; top:30px; left:789px; }

적당한 곳에 소스 삽입한 후(#GNB 위가 좋겠죠)
자신의 홈피에 맞게금 top과 left조절하면 됩니다.

제가 사용중인 시노보BGM배경 스킨을 psd파일로 올리니 포샵에서 변형해서 사용하세요.
아래 간단한 스킨은 투명한 색상입니다.(이 홈피에 적용되어 있습니다.)

설치된 홈페이지

p.s 호스팅에 따라서 utf_8전용과 ansi로 나누어 아래리스트에 첨부파일 넣어 놓았으니 참조하세요. 
      틀리면 첫화면 자체가 뜨지를 않으니 바꾸어서 테스트하세요.
      궁금한게 있으시면 댓글로 남기세요. 

#연관글
  1. RM 팁 SCM 플레이어 사용법 [2011-02-22]
  2. RM 팁 음악플레이기 3종세트 설치 방법 [2007-12-09]
  3. RM 팁 사랑비Bgm 플레이기 설치하고 제어하기 [2008-11-22] *8
  4. RM 팁 zbxe에 시노부bgm을 설치하자 [2008-01-07] *2
TAG •
0 좋아요
Atachment
첨부
목록
Facebook Twitter Pinterest Band KakaoStory Kakao
위로 아래로 인쇄 첨부
    댓글이 하나도 없네요ㅠㅠ
    Tip이 도움이 되었다면 댓글과 평가 부탁합니다. Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다.
에디터 선택하기
?
스티커
에디터 사용하기 닫기
스티커

Xe Tips

  1. No Image

    강제로 비밀글 체크 하려면...

    해당 게시판 스킨 파일 중 zbxe/modules/board/skin/해당스킨/write_form.html 파일에서 아래 줄을 <input type="checkbox" name="is_secret" value="Y" <
    Date2008.02.05 Category :Xe Views4075
    Read More
  2. No Image

    특정 게시판, 업로드된 그림 자동으로 본문에 출력하기

    소마세월님의 "업로드된 그림 자동 출력" 소스(http://www.zeroboard.com/15995172)를 이용하여 특정게시판에서 업로드된 그림을 자동으로 출력하는 방법입니다. 1. zbxe설치폴더/moudles/board/skins/xe_board/skin.xml파일의 ine 92아래줄에 소스를 삽입한다...
    Date2008.02.03 Category :Xe Views5695 원작자 : 대암지기
    Read More
  3. No Image

    [XE를 내것으로]DIV? 레이어주무르기 2편

    http://www.zeroboard.com/16441277 요즘 날씨가 많이 추워졌네요.. 다들 감기 조심하세요.. 전국에 수험생 여러분 화이팅입니다..! ㅠ 1편만 덩그러니 있는것같아 2편마저 연재하겠습니다. 레이어 주무르기1편 >> http://www.zeroboard.com/16392078 이전에 ...
    Date2008.01.28 Category :Xe Views4409
    Read More
  5. No Image

    (모든)*.파일 UTF_8 ↔ EUC-KR

    외부페이지나 기타 게시판.레이아웃 등에서 문자셋이 UTF-8이 아니라서 하지만 직접 만들엇는데 한두개가 아닌사람들이 있겠죠? 근데 그 많은걸 한꺼번에 파일열고 수정하고 닫고하려니 진짜속터지죠;; 이 프로그램 RedUTF8.exe 으로 해결해드립니다. -간단한 ...
    Date2008.01.26 Category :기타 Views4545
    Read More
  6. No Image

    db에 있는 테이블을 내용 변경없이 이름만 변경 할 수 있나요?

    제가 아래와 같이 제로보드사이트에 질문을 올렸더니 대암지기님께서 답을 주신 내용입니다. 같은호스팅에서 한글과 영문버전을 같이 사용할려고 합니다. 호스팅에서 db를 한개만 주는 관계로 한 db에 한글테이블과 영문테이블이 같이 존재하게 해야 되는데요,...
    Date2008.01.24 Category :문하우스 Views5995
    Read More
  7. No Image

    웹폰트 적용하기..

    게시글 주소 : http://www.zeroboard.com/16417916 아수라 여러 사용기를 찾아보면서 해봤는데.. 제로보드가 패치가 되면서 파일위치가 바뀐건지 오류도 생기고 잘 안되더라고요.. 결국 제가 수정한 common/css/폴더안에 있는 default.css 하나네요.. @charset...
    Date2008.01.20 Category :문하우스 Reply2 Views6959
    Read More
  8. No Image

    숫자 아이디 사용법

    게시글 주소 : http://www.zeroboard.com/16397007 Slick admin 모듈에서 강제로 회원가입시키면 숫자 아이디가 됩니다. 그러나 로그인 할때는 숫자 아이디가 안되죠. C:\APM_Setup\htdocs\common\js\xml_js_filter.js 파일에서 case "user_id" : var regx = /...
    Date2008.01.10 Category :Xe Views5576
    Read More
  9. No Image

    [XE를 내것으로]DIV? 레이어 주무르기 1편

    게시글 주소 : http://www.zeroboard.com/16392078 LeagueON 이 글은 고수분들보단.. 아직 이해가 안되시는 분들을 위해 쓰는것이니 내용이 다소 모자라고 유치하더라도 이해해주세요. 혹시 틀린부분이나 모자란부분이 있다면 질책부탁드립니다. XE의 레이아웃...
    Date2008.01.09 Category :Xe Views4899
    Read More
  10. No Image

    메인메뉴 마우스on시 2차 메뉴 나타나게 하기

    소마세월 http://www.zeroboard.com/15977640 1, 해당 레이아웃에 layout.html을 열어서 변경전 스크립트 부문을 변경후로 바꿔줍니다. 변경전 <!--GNB--> <ul id="gnb"> <!-- main_menu 1차 시작 --> <!--@foreach($main_menu->list as $key => $val)--><!--@...
    Date2008.01.08 Category :Xe Reply11 Views8496
    Read More
  11. No Image

    시노부BGM을 홈페이지에 위치 설정하는법

    시노부BGM 홈페이지에 위치 설정하는법을 설명할까 합니다. (이 설명은 이목록 한칸 아래의 "zbxe에 시노부bgm을 설치하자"를 따라서 설치하신 후 해야 합니다.) 1. 죄측메뉴 아래에 위치 시키기 해당 레이아웃의 layout.html을 열어서 </ol> <!--@end--> </di...
    Date2008.01.08 Category :문하우스 Views7551 Sample
    Read More

  12. zbxe에 시노부bgm을 설치하자

    멋진후니님의 팁입니다. (http://akirahoony.mireene.com/) zbxe에 bgm 넣는 방법에 대해 설명 드리겠습니다. 첨부된 zip파일은 제로보드4시절 노프레임에서의 시노부bgm파일입니다. 이 파일의 출처는 시노부bgm사이트 http://oxtag.com/?channel=SBP 이고, 이...
    Date2008.01.07 Category :Xe Reply2 Views11590
    Read More

  13. 소마스토커 (졸졸이 애드온)에 이미지 맵 사용하기

    현재 소마세월님에 제공해주신 졸졸이 애드온은 상당히 많은 분들이 사용을 하고 계실것이다. 이 졸졸이 애드온을 이용하여 우측에 퀵메뉴를 만들어 사용하는것을 해보자. 퀵메뉴는 아래에 있는 이미지와 같다. 위와 같은 이미지를 사용한다고 했을때.. /zbxe/...
    Date2008.01.06 Category :Xe Reply1 Views9724
    Read More
  14. No Image

    제로보드XE 카운터 방문자수가 아닌 페이지뷰수로 출력하기

    기본카운터 위젯 => 스틱스 플래시 카운터(stvx flash) 스킨 사용시 예를 들어 보겠습니다. *다른 위젯과 스킨 사용시에는 이렇게 수정하시면 안됩니다. 다른 스킨 사용하시려면 이글을 참조해서 해당 스킨을 수정 해보시기바랍니다. 기본카운터 모듈은 방문자...
    Date2007.12.20 Category :Xe Views8168
    Read More
  15. No Image

    한방에 로그아웃 하는 방법

    게시글 주소 : http://www.zeroboard.com/16173053 엮인글 주소 : http://www.zeroboard.com/16173053/352/trackback 유주부 xe로 만들어진 사이트의 로그아웃 버튼을 누르면, 로그아웃 하시렵니까? 라고 한번더 물어보고나서 로그아웃되게끔 만들어져 있는데...
    Date2007.12.17 Category :Xe Views23315
    Read More
  16. No Image

    외부페이지 사용법

    게시글 주소 : http://www.zeroboard.com/16086147 엮인글 주소 : http://www.zeroboard.com/16086147/4f6/trackback 제로보드XE 외부페이지 활용 제로보드XE 외부페이지 모듈 사용에 아려워 하시는 분들이 많아 제가 아는 한도에서 간략하게 사용법을 알려드...
    Date2007.12.17 Category :Xe Views24359
    Read More
  17. No Image

    메뉴에 이미지버튼 사용하기

    게시글 주소 : http://www.zeroboard.com/16044873 엮인글 주소 : http://www.zeroboard.com/16044873/edd/trackback 그냥 사용자 팁입니다. 제로님께서는 메뉴에 일반,마우스오버 거기에 http:// 로 하면 된다 하셨지만 안되더라고요~~~~~~~~~~~~~ layout.htm...
    Date2007.12.13 Category :Xe Views8475
    Read More
  18. No Image

    권한없는 모듈을 만났을때 로그인 페이지 띄우기..

    게시글 주소 : http://www.zeroboard.com/16085704 엮인글 주소 : http://www.zeroboard.com/16085704/11d/trackback 본팁은 홈피를 직접 만들어 운영하시는 분들이 디자인적인 부분에서 상당히 고민을하게 되는 부분입니다. 팁을 정리하자면... 특정게시판을 ...
    Date2007.12.11 Category :Xe Reply1 Views18080
    Read More
  19. No Image

    top 메뉴를 만들어보자 - layout에서 topmenu 항목만들기

    게시글 주소 : http://www.zeroboard.com/16084243 엮인글 주소 : http://www.zeroboard.com/16084243/f9a/trackback SensePlus1 이것도 팁이 될수 있는지 모르겠군요~ 눈팅만 하다가 큰 맘먹고 올립니다. 레이아웃을 조금 수정하고, xml파일에 top_menu 항목...
    Date2007.12.11 Category :Xe Reply2 Views14484
    Read More
  20. No Image

    언어가 한국어일 때 글꼴설정이 돋움인 것을 해제하기

    http://happyscience.org/?document_srl=206887 http://happyscience.org/?document_srl=206887&act=trackback ZBXE에서 언어가 한국어일 때 글꼴이 돋움으로 설정된다. 한국어만 주로 사용하면 별 문제 없으나 일본어나 중국어를 사용하는 게시물이 있다면 약...
    Date2007.12.01 Category :Xe Views5099
    Read More

  21. 윈도우 라이브 메신저를 홈페이지 서명난에 달자

    게시글 주소 : http://www.zeroboard.com/16034217 엮인글 주소 : http://www.zeroboard.com/16034217/trackback Diver 윈도우 라이브 메신저를 홈페이지에 서명난에 달자 http://www.bloter.net/_news/8df43e622812de1f 소스코드를 /files/member_extra_info/...
    Date2007.11.27 Category :Xe Views27460
    Read More
목록
쓰기
Board Pagination Prev 1 ... 8 9 10 11 12 13 14 15 16 17 Next
/ 17
위로 "