웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
상단로그인..?
2008.04.15 15:19
제 사이트에 사용중인 상단로그인 소스입니다.
미리보기 - http://www.webmini.net
로그인전
![logout.gif logout.gif](http://www.webmini.net/files/attach/images/14136/061/029/logout.gif)
로그인후
![login.gif login.gif](http://www.webmini.net/files/attach/images/14136/061/029/login.gif)
물론 위젯으로 만들어 사용해도 되나, 저같은 경우는 레이아웃에 직접소스를 넣었습니다.
위와 같이 구현하는 방법은 다음과 같습니다.
1. 사용하시는 레이아웃의 layout.html 파일을 열고 header 부분 원하는 위치에 아래의 소스를 넣습니다.
<div id="mini_gnb">
<ul>
<!--@if($logged_info)-->
<li><strong>{$logged_info->nick_name}</strong>님 반갑습니다.</li>
<li><a href="{getUrl('act','dispMemberLogout')}"><img src="./images/{$layout_info->colorset}/btn_mini_logout.gif" alt="로그아웃" class="bul" /></a></li>
<li><a href="{getUrl('act','dispMemberInfo')}">마이페이지</a></li>
<!--@else-->
<li><a href="{getUrl('act','dispMemberLoginForm')}"><img src="./images/{$layout_info->colorset}/btn_mini_login.gif" alt="로그인" class="bul" /></a></li>
<!--@end-->
<!--@if(!$logged_info)-->
<li><a href="{getUrl('act','dispMemberSignUpForm')}">회원가입</a></li>
<!--@end-->
<li><a href="/customer">고객센터</a></li>
<li><a href="/sitemap">전체보기</a></li>
</ul>
</div>
위에 고객센터와 전체보기,이미지주소는 자신의 사이트에 맞는 주소를 넣으시면 됩니다.
<div id="header">와 <div id="language"> 사이에 넣으시면 되겠네요.
다음은 해당 레이아웃 css 파일을 여시고 아래의 소스를 삽입합니다.
#mini_gnb {margin:0; text-align:right;}
#mini_gnb ul {padding:4px 15px 0 0;}
#mini_gnb li {display:inline; list-style:none; padding:0 1px 0 4px; font-size:11px; white-space:nowrap;}
#mini_gnb li strong {color:#555;}
#mini_gnb li a {letter-spacing:-1px;}
#mini_gnb li a:hover {text-decoration:underline;}
#mini_gnb img.bul {vertical-align:middle;}
스타일시트 같은경우도 자신의 사이트에 맞게 조금씩 수정을 하셔야 할듯합니다.
응용해서 사용해 보시길바랍니다.
ps. 똑띠님 사이트와 비슷한 방식이긴 합니다만, 링크부분을 똑띠님 사이트처럼 할경우 마크업 유효성 검사에서 에러가 납니다. 물론 유효성검사가 의미가 있는건 아니지만 위에 방식이 맞는듯해서 올려봅니다.^^
미리보기 - http://www.webmini.net
로그인전
![logout.gif logout.gif](http://www.webmini.net/files/attach/images/14136/061/029/logout.gif)
로그인후
![login.gif login.gif](http://www.webmini.net/files/attach/images/14136/061/029/login.gif)
물론 위젯으로 만들어 사용해도 되나, 저같은 경우는 레이아웃에 직접소스를 넣었습니다.
위와 같이 구현하는 방법은 다음과 같습니다.
1. 사용하시는 레이아웃의 layout.html 파일을 열고 header 부분 원하는 위치에 아래의 소스를 넣습니다.
<div id="mini_gnb">
<ul>
<!--@if($logged_info)-->
<li><strong>{$logged_info->nick_name}</strong>님 반갑습니다.</li>
<li><a href="{getUrl('act','dispMemberLogout')}"><img src="./images/{$layout_info->colorset}/btn_mini_logout.gif" alt="로그아웃" class="bul" /></a></li>
<li><a href="{getUrl('act','dispMemberInfo')}">마이페이지</a></li>
<!--@else-->
<li><a href="{getUrl('act','dispMemberLoginForm')}"><img src="./images/{$layout_info->colorset}/btn_mini_login.gif" alt="로그인" class="bul" /></a></li>
<!--@end-->
<!--@if(!$logged_info)-->
<li><a href="{getUrl('act','dispMemberSignUpForm')}">회원가입</a></li>
<!--@end-->
<li><a href="/customer">고객센터</a></li>
<li><a href="/sitemap">전체보기</a></li>
</ul>
</div>
위에 고객센터와 전체보기,이미지주소는 자신의 사이트에 맞는 주소를 넣으시면 됩니다.
<div id="header">와 <div id="language"> 사이에 넣으시면 되겠네요.
다음은 해당 레이아웃 css 파일을 여시고 아래의 소스를 삽입합니다.
#mini_gnb {margin:0; text-align:right;}
#mini_gnb ul {padding:4px 15px 0 0;}
#mini_gnb li {display:inline; list-style:none; padding:0 1px 0 4px; font-size:11px; white-space:nowrap;}
#mini_gnb li strong {color:#555;}
#mini_gnb li a {letter-spacing:-1px;}
#mini_gnb li a:hover {text-decoration:underline;}
#mini_gnb img.bul {vertical-align:middle;}
스타일시트 같은경우도 자신의 사이트에 맞게 조금씩 수정을 하셔야 할듯합니다.
응용해서 사용해 보시길바랍니다.
ps. 똑띠님 사이트와 비슷한 방식이긴 합니다만, 링크부분을 똑띠님 사이트처럼 할경우 마크업 유효성 검사에서 에러가 납니다. 물론 유효성검사가 의미가 있는건 아니지만 위에 방식이 맞는듯해서 올려봅니다.^^
태그 연관 글
- [2019/10/20] 묻고답하기 소셜xe 오류이후 관리자 로그인 기능이 사라졌습니다.
- [2019/03/17] 묻고답하기 제 사이트가 갑자기 로그인이 먹통입니다.
- [2017/12/20] 묻고답하기 로그인이 되지 않습니다. *3
- [2017/07/20] 묻고답하기 이거 로그인 대문? 어떻게 하나요ㅜㅜ 봐도 모르겠어요ㅜㅜ *1
- [2016/07/16] 묻고답하기 하나의 XE계정으로 여러 사이트에서 로그인 할 수 있는 방법이 없을까요? *1
댓글 10
-
J..
2008.04.15 17:21
와 좋은정보 감사합니다. ^^ -
315
2008.04.15 21:16
너무 너무 멋진 팁입니다.
알려주셔서 감사합니다.
잘사용하겠습니다. -
우와~~~ 이거 알고 싶었는데, 정말 감사합니다. 쌩유~~~~!!!
-
빽짱구
2008.04.16 09:01
하나 빠진게 있었군요. 이미지를 불러올시 가로 정렬을 위해 저같은 경우는 .bul 이라는 class 를 불러들여서 사용하고 있습니다.
저처럼 로그인/로그아웃을 이미지로 사용할시 해당스타일시트에 .bul {vertical-align:middle;} 를 추가후 해당 이미지 소스에 .bul 을 호출하시면 됩니다. -
숙지황
2008.04.20 23:02
자료 감사 합니다.
늘 고마움을 생각 하며 쓰겠읍니다.
방문하여 눌러주는 센스 을 발휘하고 왔읍니다.
추천 한방~~~
겻들입니다. -
궁금이
2008.04.25 17:23
로그인(이미지) 와 그 옆으로 마이페이지 , 고객센터 전체보기, 가 있는데......
이미지와...그옆 글자들 높이 안 맞아 떨어지는데...
이미지를 약간 아래도 내린다던가.....텍스트를 약간 위로 올리는 방법 없나요????????????/ -
빽짱구
2008.04.27 10:06
위에 제가 남긴 댓글을 보심이... .bul {vertical-align:middle;} 추가후 <img src="이미지" alt="" class="bul">
-
제 홈페이지에도 적용하고 싶응데 도무지 어케 수정해야 할지 모르겠습니다.
한번만 봐주시면 감사하겠습니다. 노프레임으로 만들었고
www.webk.co.kr/webk/ 에 php페이지들이 몰려있고 제로보드는www.webk.co.kr/webk/zbxe 에 들어있습니다.
사이트는 http://www.webk.co.kr 입니다. -
bncPlan
2008.07.08 23:19
감사합니다, 추천도 했습니다 -
월잉
2009.08.11 15:51
감사합니다!
근데 제가 왕초보라서 ㅠㅠ 저 위의 이미지처럼 나오게 하려면 어떻게 해야 하는지 자세히 알려주실 수 없나요?
그리고 포인트도 같이 나오게 하고 싶은데, 어떻게 수정해야 하는 지 알려주심 감사하겠습니다!!!!
제목 | 글쓴이 | 날짜 |
---|---|---|
게시판 에디터 폰트 글자(글씨)크기 변경하는 법 | 씨에씨에 | 2008.09.12 |
사진 한꺼번에 일괄적으로 올리기 [4] | 안정수650 | 2008.09.12 |
에디터 9pt 추가 및 에디터에도 웹폰트 보이게 하기.
[13]
![]() | 욜리 | 2008.09.11 |
IP 주소 4자리수 모두 공개하는 방법 [1] | 블루파티 | 2008.09.11 |
블로그, 홈페이지 가입시 자동 입력되는 http:// 없애기 [2] | 류영무 | 2008.09.09 |
등록하시겠습니까? 등록할까요? 안 나오고 바로 글 등록되게 하는 법 [6] | 황건순 | 2008.09.08 |
다음카페에 끊김없이 음악나오게 하기 | 푸른커튼 | 2008.09.06 |
동일서버내 페이지에서 로그인정보 활용하기... [4] | 수로 | 2008.09.06 |
회원 포인트 선물 하기 등 포인트 변경시 바로 적용 방법 | 한꼬마 | 2008.09.06 |
카멜레온 최근글 위젯 클릭시 새창 팁 | 가랑바람 | 2008.09.04 |
[우클릭 및 드레그 방지법] 및 [방지된 홈페이지 해재법] >0< [7] | 이홍석295 | 2008.09.03 |
각 리스트형 위젯에 페이지 기능을 달자. [10] | 라르게덴 | 2008.09.02 |
원하는 위치에 구글 (맞춤)검색창 달기 [2] | 다케루 | 2008.09.02 |
문서 카테고리를 메뉴에 적용하기 위한 레이아웃 수정 팁과 개념토론 [7] | 제베 | 2008.08.31 |
메인화면에 플래시 쉽게 삽입하는 방법.. [12] | 청개구리00 | 2008.08.30 |
밑에 페이지 네비게이션 수정 (다음10개, 이전10개등으로)
[6]
![]() | Clanss | 2008.08.29 |
댓글(코멘트) 입력창에 이미지 넣기
[19]
![]() | skyatc | 2008.08.29 |
음악넣는 BGM코드 70종류 입니다 [1] | 푸른커튼 | 2008.08.25 |
한 페이지(화면)에 두개(2개)의 모듈(게시판 등)을 넣는 법 [6] | 황건순 | 2008.08.25 |
라이프팟 연동에서 XML 주소 얻기 | 최재원541 | 2008.08.23 |