[티스토리] 블로그 로그인 로그아웃 버튼 만들기 및 적용 안될 때 해결법
블로그 운영하면서 10년 묵은 체증이 다 풀린 것 같이 가장 기쁜 것 같습니다.
기존 마크쿼리 스켈레톤 3.0.5 스킨에서 오늘 흉내내기님이 제작하신 CCZ-CROSS 스킨으로 교체를 했습니다.
- download
- CCZ-CROSS 스킨 배포 및 소개
다양한 기능중에 로그인 / 로그아웃이 자동으로 판단 되게 되어 있는데...
유독 이블로그에서만 정상적으로 작동이 되지 않았습니다.
그동안 많은 구글링을 통해서 소스코드를 적용 시켜 봤는데
이블로그만 적용이 되지 않아서 너무 스트레스를 받았는데 오늘 새로 바꾼 CCZ-CROSS 스킨도
로그인 로그아웃 기능이 정상작동 하지 않았습니다.
아무리 로그아웃을 눌러도 계속 로그아웃으로 표현이 되어져있었습니다.
스킨 테스트용인 보조블로그에는 문제없이 정상작동 되는데..
왜 이 블로그만 작동이 되지 않는가 해서
로그인 로그아웃 소스를 다시 보던중
구글에 올라온 대부분의 코드들이 티스토리 우측 상단 기본 메뉴 툴바에서 소스를 사용해
접속 상태 정보를 갖고 온다는 점을 확인하고
혹시 설마...
메뉴바가 감춰져 있었습니다. ㅡㅡ
이럴수가.. 그동안 수개월동안 이문제 때문에 포기하다가 겨우 이것 때문 이였다니...
메뉴바가 단순히 CSS 티스토리 툴바 안보이게 하는 코드 때문인줄 알았는데..
티스토리 메뉴바 지우기 CSS 코드
/* 툴바 */
#tistorytoolbarid {display: none;}
티스토리 환경설정에 자체적으로 제거하는 기능이 있다니...
2차 도메인 사용자들만 메뉴바 감추기 활성 비활성이 가능합니다.
메뉴바 감추기를 해제 하니 정상적으로 로그인 로그아웃 기능이 작동 했습니다.
구글 검색 해보면 다양한 티스토리 블로그에 로그인 로그아웃 버튼을
구현 하는 방법이 있으나 아래 코드가 가장 간단하게 설치 할 수 있을 것 같습니다.
버튼 소스
<a id="btn_login_toggle" onclick="loginToggle();">로그인</a>
자바스크립트 소스
<script>
<!-- 로그인로그아웃 -->
jQuery(document).ready(function($) {
isLoginStatus();
});
function loginToggle(){
}
function isLoginStatus(){
var container = $('#ttMenubarInnerWrap');
var loginstatus = ($.trim(container.find('a.tt_menubar_link_tit').text()).indexOf('로그아웃') != -1);
if(loginstatus){
document.getElementById('btn_login_toggle').innerHTML = '로그아웃';
loginToggle = moveLogout;
}else{
document.getElementById('btn_login_toggle').innerHTML = '로그인';
loginToggle = moveLogin;
}
function moveLogin(){
var str = "https://www.tistory.com/auth/login?redirectUrl=" + encodeURIComponent(window.location.href);
document.location.href = str;
}
function moveLogout(){
var str = "https://www.tistory.com/auth/logout?redirectUrl=" + encodeURIComponent(window.location.href);
document.location.href = str;
}
}
</script>
버튼은 사용하실 곳에 넣으시고 자바스크립트 코드는 /body 윗 부분에 넣으시면 됩니다.
해당 소스는 ehcilc님의 Hard Coder 블로그에서 갖고 왔습니다.
소스 한줄 한줄 갖는 의미를 쉽게 설명해주셔서 웹언어를 하나도 모르는 초보자들도 쉽게 따라 할 수있습니다.
해당 코드에 의미를 위 블로그에서 이해하면서 설치하시면 더욱 쉽습니다.
아래 코드도 마찬가지로 티스토리 상단 메뉴바에서 로그인 로그아웃 상태를 확인하는 코드입니다.
조금만 응용하시면 손쉽게 작업을 할 수 있을 거라 생각 됩니다.
아래소스는 devsomnus님의 블로그에서 가져왔습니다.
http://devsomnus.tistory.com/19
// userState info - 0: not log in, 1: logged-in, 2: admin
var userState;
(function() {
// length info - 3: not log in, 4: logged-in
var trg = jQuery("#tistorytoolbarid");
userState = trg.find(".tt_menubar_logout").children(".tt_menubar_link_tit").text().length - 3;
if (userState) {
var check = location.href.split(".com")[0] + ".com";
trg.find(".tt_menubar_myblog").find("li").children("a").each(function() {
if (jQuery(this).attr("href") == check) {
userState = 2;
return false;
}
});
}
})();
그동안 안되는 이유를 몰랐고.. 로그인 로그아웃 기능을 구현하는 웹개발자 분들께 문의를 해봐도 해결할 방법이 없었는데
이렇게 손쉽게 해결을 하다니... ㅠ_ㅠ 허탈하기도 합니다만
정말 기쁘네요.
혹시 2차 도메인을 사용 하시면서
로그인 로그아웃 기능이 제대로 구현 되지 않으신다면
메뉴바 감추기가 되어있는지 다시 한번더 확인 해주세요!!
