로그인, 로그아웃 버튼 만들기 [티스토리]

💻 Information/Computer

로그인, 로그아웃 버튼 만들기 [티스토리]

GigaWatt 2018. 2. 21. 20:12

기존에 있는 티스토리 관리 링크는 관리페이지로 이동합니다.

이 소스는 페이지 이동 없고 로그인/로그아웃이 가능하며 현재의 로그인상태를 판별 후 버튼내용을 바꿔줍니다.

단, 두 번의 복사, 붙여넣기로 버튼을 만들 수 있습니다.

1. 로그인 버튼 위치 정하기 HTML

HTML의 <body>와 </body>사이에 사용할 위치에 넣습니다.

1

<a class="tab_login" href="#" id="tab_login_toggle" onclick="fnLoginToggle();"></a>

2. 로그인 스크립트 넣기 HTML

</body>태그 바로 앞에 스크립트를 붙여넣습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
    function fnLoginToggle() {};
    $(function() {
        if (window.T.config.USER.name) {
            $('#tab_login_toggle').text('로그아웃');
            fnLoginToggle = function() {
                document.location.href = "https://www.tistory.com/auth/logout?redirectUrl=" + encodeURIComponent(window.location.href);
            };
        } else {
            $('#tab_login_toggle').text('로그인');
            fnLoginToggle = function() {
                document.location.href = "https://www.tistory.com/auth/login?redirectUrl=" + encodeURIComponent(window.location.href);
            };
        }
    });
</script>

<!-- // login_start -->
  <a href="#" id="tab_login_toggle" onclick="fnLoginToggle();"></a>
    <script>
      function fnLoginToggle() {};							
      $(function() {
        if(window.T.config.USER.name) {
          $('#tab_login_toggle').text('로그아웃');
          fnLoginToggle = function() { document.location.href = "https://www.tistory.com/auth/logout?redirectUrl=" +  encodeURIComponent(window.location.href); };
        } else {
          $('#tab_login_toggle').text('로그인');
          fnLoginToggle = function() { document.location.href = "https://www.tistory.com/auth/login?redirectUrl=" +  encodeURIComponent(window.location.href); };
        }
      });
    </script>
<!-- // login_end -->

3. 로그인 버튼 구현 결과

복사붙여넣기 두번만에 페이지 이동 없이 티스토리 로그인, 아웃 버튼이 생성됩니다. 사용자의 상태에 따라 로그인, 로그아웃 상태를 보여줍니다.

단, 버튼을 2개 이상 만들고 싶다면 a태그의 아이디(tab_login_toggle)를 변경하여 추가로 스크립트를 생성하면 됩니다.

로그인 버튼 만들기.txt

다운로드

※ 기존 소스 백업 후 작업하세요.

저작자표시 비영리 변경금지

현재글로그인, 로그아웃 버튼 만들기 [티스토리]

기가왓

로그인, 로그아웃 버튼 만들기 [티스토리]

1. 로그인 버튼 위치 정하기 HTML

2. 로그인 스크립트 넣기 HTML

3. 로그인 버튼 구현 결과

'💻 Information/Computer'의 다른글

티스토리툴바

로그인, 로그아웃 버튼 만들기 [티스토리]

1. 로그인 버튼 위치 정하기 HTML

2. 로그인 스크립트 넣기 HTML

3. 로그인 버튼 구현 결과

'💻 Information/Computer'의 다른글

관련글

티스토리툴바