티스토리 블로그 메인에서 관리자 화면으로 들어가는 버튼이 없는 스킨이 있네요. 이런 스킨은 지금까지 어떻게 사용했는지 모르겠지만, 메인 화면에서 관리자 화면 또는 글쓰기 화면으로 들어가는 버튼 만드는 방법을 알아봅니다.
티스토리 초창기부터 유료 스킨을 사용하면서 사이드바에는 관리자, 글쓰기 버튼이 만들어져 있습니다. 관리자 화면과 블로그로 이동하는 것은 전혀 불편한 것이 없었는데, 최근 테스트 삼아 스킨을 적용해 보니 Book Club 스킨에는 관리자 버튼이 없습니다. 관리자 화면으로 어떻게 들어가는지 모르겠습니다.
사이드바를 사용한다면 이렇게 관리자 화면으로, 글쓰기 화면으로 들어가는 버튼입니다. 지금까지 사용하지 않았다면 지금이라도 적용해 보세요, 아주 편합니다.
위의 관리자 앞에 붙은 '>'은 것은 특수문자가 아닌 아이콘 폰트입니다. 아이콘 폰트도 같이 적용하면서 깔끔하게 만들어 보겠습니다.
먼저 스킨 편집 HTML에서 아래 코드를 넣습니다. 아이콘 폰트를 사용하기 위함입니다.
<!-- FontAwesome CSS 파일 추가 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' rel='stylesheet'/>
이번에는 사이드바를 설정하기 위해서는 플러그인에서 배너 출력을 사용주로사용중으로 만듭니다.
사이드바로 들어오면 HTML 배너 출력이 생성되었습니다. 위의 플러그인에서 배너 출력을 생성하지 않으면 지금 보이는 HTML 배너 출력은 보이지 않습니다. 왜 이 과정을 넣어야 하는지는 모르겠습니다. 당연히 사용할 텐데요, 혹시 해킹 등의 본인이 모르게 적용되는 것을 막기 위한 것인지는 모르겠습니다만, 번거롭죠. 관리자, 글쓰기 버튼의 위치를 정하고 편집을 클릭합니다.
HTML 소스에 아래 코드를 그대로 넣습니다.
<style>
.f105-icon::before {
content: '\f105';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color : #666;
padding 0, 0, 0, 20;
}
.f105-icon a {
text-decoration: none;
}
</style>
<span class="f105-icon">
<a href="https://본인계정.tistory.com/manage/design/sidebar">관리자</a></span> <br><br>
<span class="f105-icon">
<a href="https://본인계정.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F">글쓰기</a></span><br><br><br>
그리고 저장, 빠져나오면서 사이드바 아래쪽에 저장을 한 번 더 누릅니다. 그러면 맨 처음에 보았던 관리자, 글쓰기 버튼이 생성되어 있습니다.
아이콘을 다른 것으로 설정하거나 아이콘 폰트 사용 방법은 지금처럼 <style>이 아닌 CSS로 적용할 수도 있는데, 아이콘 폰트인 FontAwesome 사용 방법은 이전 포스팅을 참고하세요. 간단하게 적용할 수 있습니다.
**
지금은 위 코드로 적용이 되지 않을겁니다. 일부러 그대로 두었는데요, 코드 속에 있는 padding 0, 0, 0, 20; 이곳을 지우거나 정확하게 적용한다면 padding 0, 0, 0, 20px; 이렇게 작성해야 합니다.
padding 0, 20px, 0, 20px; 0이 아닌 숫자가 들어가면 px를 넣어야 합니다.
관리자, 글쓰기 사이를 띄우는 방법, 그리고 롤오버 효과도 넣었습니다, 앞으로 html css는 분리해서 적용하는 것이 번거롭지만, 깔끔하고 분명하게 적용할 수 있습니다. 수정 포스팅 참고하세요.
티스토리 블로그 로그인을 위한 관리자 화면 버튼 만들기
블로그에 예쁜 아이콘 폰트 적용하는 방법(fontawesome)