제 사이트에 사용중인 상단로그인 소스입니다.

미리보기 - http://www.webmini.net 

로그인전



로그인후



물론 위젯으로 만들어 사용해도 되나, 저같은 경우는 레이아웃에 직접소스를 넣었습니다.
위와 같이 구현하는 방법은 다음과 같습니다.

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. 똑띠님 사이트와 비슷한 방식이긴 합니다만, 링크부분을 똑띠님 사이트처럼 할경우 마크업 유효성 검사에서 에러가 납니다. 물론 유효성검사가 의미가 있는건 아니지만 위에 방식이 맞는듯해서 올려봅니다.^^