Data Of MoonHouse

SketchBook5 게시판스킨 - 문하우스 수정버전 V3.0 - 2024.04.10

• 기존 스케치북 게시판 스킨에 덮어 쓰기 해도 잘 작동됩니다. (혹시 모르니 백업은 필수!!) - /modules/board/skins/sketchbook5 에 모든 파일을 덮어 쓰기 하면 됩니다. • XE 사용자의 경우 [ 본문 일반 설정 > 추천/비추천 기능 XE사용 ] 에서 XE사용을 선택하면 됩니다. [ V3.0 수정 ] 1. 폰트어썸 웹폰트와 문하우스 전용 버턴 기능을 에드온에 의존하지 않고 게시판 설정에서 직접 관리 전체설정 > 폰트어썸 사용형태 or Sexy Button 사용형태 2. 게시글 상단 네비에 목록과 쓰기 버턴 추가 3. 공지글 폴딩 형태로 출력 기능 추가 ...

More →

SketchBook5 게시판스...

MH Before V1.1 위젯

[ 특징 ] 1. Before이미지 와 After이미지를 비교하는 위젯 2. 지정 게시판에 Before 이미지를 처음 올리고 After 이미지를 두번째로 업로드 3. 대상 분류 srl값으로도 출력가능 4. 이미지의 사이즈는 첫이미지, 즉 Before이미지의 사이즈를 따라갑니다. 되도록이면 사이즈를 동일하게 만들면 됨 5. 중앙에 화살표를 좌우로 움직이면 Before / After 이미지로 출력 6. 하단문구 지정 가능 7. 게시글의 이미지 순서 지정 가능 [게시판 화면] [위젯 화면] [화살표를 좌로 움직인 화면]

More →

MH Before V1.1 위젯

Mh Make 위젯스타일

문하우스 대문페이지에 있는 위젯스타일입니다. [특징] 1. 테두리의 유무 2. 타이틀 색상, 타이틀 앞 언더바 색상 지정 가능 3. 더 보기 출력 4. V1.1 - 테두리 색상 지정 가능 [설정 화면]

More →

Mh Make 위젯스타일

Mh BigSlider V2.1 위젯 - 2024.04.13

[ V 2.1 특징 ] 1. 내용글 영역에 확장변수 출력가능 2. 확장영역 버턴 대신 내용 출력 3. D-day / 시작전 출력 4. 기간 출력 - https://moonhouse.co.kr/xetip/590008 [ V 2.0 특징 ] 1. 배경 이미지 제거 스킨 추가 2. 어떤 크기라도 가능 3. 슬라이드 내용 가로, 세로 정렬 [ V 1.1 특징 ] 1. Slide 설정에 자동 슬라이드쇼, 마우스 hover시 슬라이드 쇼 일시 중지, 랜덤 재생 추가 2. 마우스 hover시 썸네일 확대 [ 특징 ] 1. 깔금한 슬라이드 배경이미지 적용 2. 3개의 스킨 적용 - 1080px / 850px / 750px 레이아웃폭에 적당한 크기 ...

More →

Mh BigSlider V2.1 위...

Mh Justice Layout V 1.5 [ 2023. 02. 07 ] - Sale 제품(₩39,000)

Mh Justice Layout is a one page html5 bootstrap template. This template comes with smooth animations, pop-up video and many more… 1. OnePage로 출력되며 Bootstrap과 Animations를 적용하여 스크롤 되는 순간 각 Section영역 에니메이션이 작동 2. 거의 완벽한 반응형(모바일형)으로 츨력 3. 간단한 설정 한번으로 색상변경 완료 - 밝은 배경, 어두운 배경, 혼합배경을 선택후, 설정 옵션들에서 자신만의 칼라로 변경 가능 4. 상단 메뉴를 자유자재로 선택 가능 • 원페이지 메뉴 - 한페이지내에서 상하로 이동하는 메뉴 • 메인 메...

More →

Mh Justice Layout V 1...

Mh SmartBanner Widget V1.1 [2021.01.13] - Sale 제품(₩9,000)

카테고리지정 / 시작,종료설정 / 배경 블랙 / 좌로 이동 / 랜덤 / 네비가능 / 무한루프 / 클릭시 지정사이트로 이동 / 풍선도움말 - "대상 분류값"으로 배너 출력 가능 - "위젯 NO" 처리로 여러개의 배너를 다양한 형태로 생성 가능 - Slide의 다양한 옵션 - Auto기능과 타임지정 가능 - 좌우 네비와 하단에 도트 네비 출력 가능 - 슬라이딩의 방향을 좌우 / 상하로 선택 가능 - 슬라이딩의 모습를 4가지로 선택 가능 - 서서히, 착, 튕기기, Fade - 배너에 마우스 Hover시 풍선도움말 출력 - 게시판의 확장변수와 연동하여 배너 클릭시 지...

More →

Mh SmartBanner Widget...

Mh Brickfolio Widget V1.3 [2023.04.05] - Sale 제품(₩9,000)

[ V1.3 특징 ] [ SketchBook5_Mh 수정버전과 같이 연동 ] • 확장 변수가 자동으로 제목으로 대체되는 방법 https://moonhouse.co.kr/xetip/578453 • 확장변수를 이용해 진행버턴과 D-Day를 함께 출력 https://moonhouse.co.kr/xetip/577872 [ V1.2 특징 ] 1. 페이지기능을 탑재한 Box형 위젯 2. 통합게시판 위젯으로도 활용가능 3. 썸네일클릭시 게시판 바로가기, Rightbox 출력 및 Zoom기능도 지원 4. 완벽히 반응형으로 작동합니다.(레이아웃의 폭을 % 넓이로 지정할때) 5. Box를 총8가지의 에니메이션 효과로 출력 6. Box의 색상 / 테두...

More →

Mh Brickfolio Widget ...

Mh Portfolio V1.0

[ V1.0 특징 ] 1. 깔끔한 썸네일 위젯 2. 썸네일 Box에 마우스 Hover시 제목과 내용글이 다양한 효과와 색상으로 출력 -- 효과 15가지, 배경색상 13가지, 버턴색상 17가지 3. 카테고리별 출력도 가능 4. 페이지 기능 가능 -- ajax적용으로 화면 리프레쉬 없이 작동 5. 확장변수를 이용해 버턴출력 가능 6. 다수의 위젯생성도 가능 7. 반응형 지원

More →

Mh Portfolio V1.0

Mh Owl Slide V1.0

[ 특징 ] 1. 깔금한 배너 롤링 위젯입니다. 2. Auto Slide를 지원합니다. 3. 슬라이드에 타이틀 / 썸네일 / 네비를 지원합니다. 4. 배경색상외 여러 색상들을 지정할 수 있습니다. 5. 타이틀 / 내용 / 각종 옵션등을 지정 가능합니다. 6. 카테고리 출력도 가능합니다. 7. 원본 코드의 테마 색상이 Red에 맞추어져 있어서 기본 색상은 Red입니다. 8. 완벽한 반응형 지원과 모바일에서 스와프기능도 지원합니다. 9. 두종류의 스킨 지원 - Default Skin, All Pictures Skin All Pictures Skin은 게시물안의 모든 이미지들을 불러올 수 있으며 ...

More →

Mh Owl Slide V1.0

Mh Multi Widget V1.6 [2023.04.05] - Sale 제품(₩9,000)

메뉴얼 [ V 1.6 업데이트 내용 ] • 댓글 많은순으로 정렬. https://xetown.com/questions/1394764#comment_1395175 • 예약발행 모듈에 대응 https://xetown.com/download/1721679#comment_1722728 [ SketchBook5_Mh 수정버전과 같이 연동 ] • 확장 변수가 자동으로 제목으로 대체되는 방법 https://moonhouse.co.kr/xetip/578453 • 확장변수를 이용해 진행버턴과 D-Day를 함께 출력 https://moonhouse.co.kr/xetip/577872 [ V 1.5 업데이트 내용 ] •FirstThumb 스킨 추가 스케치북 게시판 스킨 V 2.1 에 추가된 "첫 게시글만 썸네일 출력 ...

More →

Mh Multi Widget V1.6 ...

Mh Author 위젯 V1.5 (2024.01.10)

V 1.5 수정내용(2024.01.13) 1. 베너스킨 바로가기 확장변수 미작성시 문제 해결 2. 유튜브스킨 추가 - 확장변수 사용자정의 (기본 : transfer) : 위젯상에서 유튜브 재생 가능 합니다만 사이트가 약간 느려집니다. V 1.4.1 수정내용(2021.08.28) - default스킨과 Book스킨을 동시에 출력시 제목글이 좌측으로 밀리는 문제해결 V 1.4 수정내용(2021.02.12) SketchBook5 게시판스킨 - 문하우스 수정버전 V1.8.1 북 갤러리 형태 게시판에 맞추어 "Book 갤러리"스킨 추가 - Book 갤러리형식 게시판의 확장변수를 그대로 가져옵니다 - new, bes...

More →

Mh Author 위젯 V1.5 (...

Mh Sideways Layout

[특징] •화면전환이 가로 방향으로 움직입니다. •홍보용 사이트 레이아웃에 적합합니다. •화면 좌우에 마우스 Hover시 자동으로 슬라이딩 됩니다. •좌측 삼선 햄버거 메뉴형식 / 페밀리 사이트 / 자체 로그인 지원합니다. •카카오 지도를 지원합니다 - 카카오톡 앱키 입력 필수 •본문 아래에 각 섹션 바로가기 아이콘을 지원합니다. •완벽한 반응형으로 작동합니다. •메세지 보내기(Contact Us)를 적용할려면 contactfree.zip 위젯을 설치하면 됩니다. •갤러리 섹션은 Lightbox 전용 Hover 위젯 을 사용했습니다.

More →

Mh Sideways Layout

Mh Gallery Layout & Mh Gallery Widget V2.2 [2022.05.22] - Sale 제품(₩19,000)

[ V2.2 특징 ] •Colorbox Skin 추가 - 첫화면에 박스출력 - Auto Slide 지원 •본문 메뉴(GNB)를 상단 가로 형태에서 좌측 삼선 햄버거 형태로 변경 •배경이미지 슬라이드 로딩 기능을 적용 Demo - https://moonhouse.co.kr/cb [ V2.0 LightBox Skin 특징 ] •LightBox Skin 추가 -- 지연님 요청 •Default Skin은 이미지를 전체화면 Fullscreen 으로 출력되는 반면 LightBox Skin은 이미지의 원본 크기로 출력됩니다. Demo - https://moonhouse.co.kr/lb [특징] •레이아웃과 위젯의 콜라보로 이루어진 전체화면 갤러리 스킨입니다. •레이아웃...

More →

Mh Gallery Layout &am...

Widgets Of MoonHouse

Data Of MoonHouse

Layouts Of MoonHouse

    • Mh Sideways Layout
    • [특징] •화면전환이 가로 방향으로 움직입니다. •홍보용 사이트 레이아웃에 적합합니다. •화면 좌...
    • 2022.05.16
    • 문하우스 Simple 레이아웃 V 1.4 (2020.12.13 Up)
    • V1.4 수정내용(2020.12.13) 1. 코드정리 2. 자체 로그인 탑재 V1.3.1 수정내용 1. 심플레이아웃과...
    • 2015.05.18
    • Mh Thomsander Layout V1.0
    • [특징] - 페이지안에서 부메뉴가 Box형식으로 열립니다. - 배경이미지를 슬라이드로 출력합니다. ...
    • 2019.09.12
    • Mh White Layout V1.1
    • [ V1.1 특징 ] 1. 본문 상단에 Accordions / TiltedContent 이미지박스 출력선택 - mwea.html 와 ...
    • 2019.04.04
    • Mh LeftMenu 레이아웃 V1.2
    • [특징] - Sub메뉴를 좌측 Wing영역에 배치하여 Sub메뉴의 활용도를 높였습니다. - 최대한으로 코...
    • 2019.01.07
    • MH FullPage 레이아웃 V1.2
    • 마우스 휠 한번 작동시 전체 화면 스크롤되는 FullPage 레이아웃입니다. [Tip] 페이지에 Youtube...
    • 2018.12.04
    • MH Pointy Slider 레이아웃
    • MH_Pointy-Slider 레이아웃을 공개합니다. 소스는 아래에서 제공 받아서 XE에서 작동하게끔 수정...
    • 2018.10.27
    • MH_Sliding 레이아웃
    • MH_Sliding 레이아웃을 공개합니다. 소스는 아래에서 제공 받아서 XE에서 작동하게끔 수정했습니...
    • 2018.10.20
    • 사이트선택 전용 레이아웃 V1.1
    • 홈페이지의 첫 화면에서 두곳의 사이트를 선택하고 싶을때 사용하시면 유용한 레이아웃입니다. [...
    • 2017.06.19
    • XE기본 Xedition레이아웃을 편집이 편리하도록 수정한 버전입니다. 2탄
    • XE 1.8 버전대 기본레이아웃인 Xedition을 사용자가 편집이 편리하도록 수정한 최후 버전 https:/...
    • 2016.12.26

XE Of MoonHouse

다음버전 V1.2는 https://moonhouse.co.kr/zbxe/151832 여기에 있습니다. [4월 3일 수정내용] 1. 댓글수를 설정난에서 조절 할 수 있습니다. 그래서 가로와이드와 짧은 것의 구별이 없습니다.(한개의 위젯으로 가능) 2. 작성자와 날짜를 선택할 수 있습니다. newest_comment.zip (위젯자체를 건드립니다. 업데이트되면 다시 설치하던지 아님 다른 이름으로 위젯방에 올리면 됩니다.) [3/24일 수정내용] 파폭에서 타이틀문자 아래로 내려가는 문제 해결됨 MH최근글 과 최근이미지 에 이어서 MH최신댓글스킨을 올립니다. 위의 이미지와 같이 총9개의 칼라로 되어 있습니다. comment.zip를 다운받아서 압축을 풀면 mh_comment와 mh_wide_comment의 두개의 폴더가 생성되어집니다. 이 두개의 폴더를 /zbxe/widgets/newest_comment/skins 폴더안에 업로드하면 됩니다. 1. mh_comment는 좌측메뉴 밑에 들어가게 가로 200px를 기준으로 만들었습니다 -- 댓글과 작성자 출력 /zbxe/widgets/newest_comment/skins/mh_comment/list.html 를 편집기로 열면 <ul> <!--@foreach($widget_info->comment_list as $val)--> <li><a href="./{getUrl(",'document_srl',$val->get('document_srl'))}#comment_{$val->get('comment_srl')}">{$val->getSummary(13)}</a> <span>{$val->nick_name}</span></li> <!--@end--> </ul> <span>{$val->nick_name}</span> -- 이부분이 닉네임이 출력되는 부분입니다. (필요 없을시 삭제하면 됨) getSummary(13)} -- 이부분(13)을 자신의 폭에 맞게끔 수정하면 됩니다. 2. mh_wide_comment는 일반페이지에서 출력되게 530px를 기준으로 만들었습니다 -- 날짜와 댓글 작성자 출력 /www/zbxe/widgets/newest_comment/skins/mh_wide_comment/list.html 를 편집기로 열면 <ul> <!--@foreach($widget_info->comment_list as $val)--> <li> <span class="date">{zdate($val->regdate, "y-m-d")}</span> <a href="./{getUrl(",'document_srl',$val->get('document_srl'))}#comment_{$val->get('comment_srl')}">{$val->getSummary(40)}</a> <span class="name">by {$val->nick_name}</span> </li> <!--@end--> </ul> <span class="date">{zdate($val->regdate, "y-m-d")}</span> -- 이부분이 날짜가 출력되는 부분입니다. (필요없을시 삭제하면 됨) [Tip] "y-m-d" --- 08-03-23 출력 "Y-m-d" --- 2008-03-23 출력 "m-d" --- 03-23 출력
Prev 57 58 59 Next
게시글 주소 : http://www.zeroboard.com/16392078 LeagueON 이 글은 고수분들보단.. 아직 이해가 안되시는 분들을 위해 쓰는것이니 내용이 다소 모자라고 유치하더라도 이해해주세요. 혹시 틀린부분이나 모자란부분이 있다면 질책부탁드립니다. XE의 레이아웃은 DIV와 CSS를 기초로 합니다. 물론 테이블을 이용하여도 작동에는 문제가 없지만, DIV를 사용하는것이 XE가 지향하는 웹2.0에도 발맞추어 가는것이니 이번에 그냥 테이블에서 DIV로 갈아타는것도 나쁘지 않을것 같아요. 테이블은 tr과 td, 그리고 rowspan, cellspan 의 개념만 안다면 아무리 복잡하더라도 얼마든지 만들 수 있습니다. 하지만 div를 처음 접하시는분들은 이녀석을 주무르는게 여간 쉽지 않을것입니다. 그렇다면 이제 div의 배를 조금 갈라볼까요? 이해를 쉽게하기위해 테이블과 비교해가며 설명해 볼게요. (이때 사용되는 div의 style 태그는 구분을 쉽게하기 위해 사용하는 것입니다.) 먼저 작은 박스를 만들어 보겠습니다. <테이블> 한칸의 박스 view plaincopy to clipboardprint? <table border=1> <tr> <td>한칸의 박스</td> </tr> </table> <table border=1> <tr> <td>한칸의 박스</td> </tr> </table> <DIV> 한칸의 박스 view plaincopy to clipboardprint? <div style="background:#ff0000">한칸의 박스</div> <div style="background:#ff0000">한칸의 박스</div> 소스로 볼때, DIV가 훨씬 가벼운것을 보실 수 있습니다. 또한 테이블은 가로를 따로 100%로 지정해 주어야 하지만, div의경우 알아서 꽉꽉 들어맞아줍니다. 작성시 한가지 주의하실점은, 테이블의 경우 <tr>과 <td> 는 따로 닫는 테그를 사용하지 않아도 완전하지는 않지만 형태는 갖추어집니다. 물론 닫지않고 바로 또 적용시켜 주어도 마찬가지 이구요. 하지만 DIV는 꼭! 닫아주셔야 정상적으로 나옵니다. 자 이제 슬슬 구조를 복잡하게 해보겠습니다. <테이블> 첫째줄 둘째줄 view plaincopy to clipboardprint? <table border=1> <tr> <td>첫째줄</td> </tr> <tr> <td>둘째줄</td> </tr> </table> <table border=1> <tr> <td>첫째줄</td> </tr> <tr> <td>둘째줄</td> </tr> </table> <DIV> 첫째줄 둘째줄 view plaincopy to clipboardprint? <div style="background:#ff0000">첫째줄</div> <div style="background:#0000ff">둘째줄</div> <div style="background:#ff0000">첫째줄</div> <div style="background:#0000ff">둘째줄</div> 점점 복잡해 질수록 div는 점점 가벼워집니다. 아니.. div를 닫아주고, 바로 div를 적용했는데, 칸이 늘어나는게 아니라, 줄이 늘어났네요? 그렇다면 칸은 언제 어떻게 추가해주나요? 간단합니다. <테이블> 첫째칸 둘째칸 view plaincopy to clipboardprint? <table> <tr> <td>첫째칸</td><td>둘째칸</td> </tr> </table> <table> <tr> <td>첫째칸</td><td>둘째칸</td> </tr> </table> <DIV> 첫째칸 둘째칸 view plaincopy to clipboardprint? <div style="float:left;background:#ff0000">첫째칸</div> <div style="float:left;background">둘째칸</div> <div style="float:left;background:#ff0000">첫째칸</div> <div style="float:left;background">둘째칸</div> 다시 말씀드리지만 div에 적용된 스타일에서 background 부분은 구분을 쉽게하기위하여 넣은것입니다. float:left 가 칸을 추가하는 방법이었군요. 아! float:left?? left가 왼쪽을 의미하는것이니 right도 있나요? 네. 있습니다. 여기서 하나는 left, 다른 하나는 right를 적용하게되면, 첫째칸 둘째칸 이런 현상이 벌어지지요.. float에 대해 궁금하시다면, 에디트프로그램에 소스를 작성하신 후 페이지를 테스트해보세요. 창크기를 늘이거나 줄여도 div는 float가 지정해준편에 계속 붙어있답니다. 칸과 줄을 추가하는 방법을 알았으니, 가장 흔히들 사용하시는 레이아웃 구성형태로 꾸며보겠습니다. 우선 이번에 꾸며볼 페이지는, 가로폭은 200px, 메뉴부분은 80px, 본문부분은 120px 입니다. <테이블> 헤더 메뉴 본문 XE 만세! view plaincopy to clipboardprint? <table width=200 border=1> <tr> <td colspan=2>헤더</td> </tr> <tr> <td width=80, valign=top>메뉴</td><td width=120>본문<br>XE 만세!</td> </tr> </table> <table width=200 border=1> <tr> <td colspan=2>헤더</td> </tr> <tr> <td width=80, valign=top>메뉴</td><td width=120>본문<br>XE 만세!</td> </tr> </table> <DIV> 헤더 메뉴 본문 XE 만세! view plaincopy to clipboardprint? <div style="width:200px; background:#e4e4e4">헤더</div> <div style="width:80px; background:#ff0000;float:left">메뉴</div> <div style="width:120px; background:#0000ff;float:left">본문<br>XE 만세!</div> <div style="width:200px; background:#e4e4e4">헤더</div> <div style="width:80px; background:#ff0000;float:left">메뉴</div> <div style="width:120px; background:#0000ff;float:left">본문<br>XE 만세!</div> 자, 어떠신가요? 이해가 되셨나요? div를 처음 접하시는 분들은 눈으로만 보시는것보다 직접 따라해보시는것이 이해에도 훨씬 도움이 됩니다. 글솜씨가 없어서 설명이 우왕좌왕한지라, 도움이 되셨으려나 모르겠네요.. 이번장에서는 div를 이용해 간단한 구조를 잡는방법에 대해 알아봤습니다. 다음엔 좀더 자세한 div의 속성을 알아보고, 나중엔 실전 레이아웃을 잡아가는 방법을 알아보도록 하겠습니다
시노부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로 나누어 아래리스트에 첨부파일 넣어 놓았으니 참조하세요. 틀리면 첫화면 자체가 뜨지를 않으니 바꾸어서 테스트하세요. 궁금한게 있으시면 댓글로 남기세요.
Prev 57 58 59 Next

Xe Total

게시판 Category 제목 글쓴이 날짜 조회수 추천수
Tip 1 홈페이지에 이미지블릿 대신 특수문자로 표현해 보기 file 팔공산 2008.04.29 13124
위젯 3 Div라운드 적용된 MH카멜레온인기문서출력(7월20일수정) file 팔공산 2008.04.28 31174
3 ( align="absmiddle" ) 이미지와 글자 높낮이가 다를때 관해서 file 팔공산 2008.04.27 12390
Tip 1 위젯 생성 방법 file 팔공산 2008.04.25 12959
플래너 미니달력 위젯 0.1.1 (planner_calendar)
팔공산 2008.04.22 4556
플래너 모듈 0.2.2 (planner)
팔공산 2008.04.22 3227
Tip 2 카멜레온위젯에 제목폰트색상 선택하는 방법으로 수정하는 방법 file 팔공산 2008.04.21 17975
위젯 2 지금까지 나온 MH스킨들 종합해서 올립니다. file 팔공산 2008.04.20 31326
붙어야 할 이미지가 붙지 않을때. file
팔공산 2008.04.19 7389
기타 문서 및 이미지 목록 랜덤으로 읽어 오기(펌)
팔공산 2008.04.18 5960