티스토리 꾸미기 방명록 비밀글 체크버튼 만들기!

아는행복

예전부터 추가하려던 작업을 이제서야 하게 되었네요! 티스토리 경우 모바일 방명록에는 비밀글 남기기가 있지만 웹에서는 스킨에따라 비밀글 체크버튼의 유무가 다른데요 저의 경우는 티스토리 베이직 스킨을 개조해서 사용하고 있어서 방명록에 비밀글 체크버튼이 없는 상태여서 이번에 추가 작업을 하면서 간랸하게 설치방법을 정리해보게 되었습니다.

 

※ 티스토리 베이직스킨에서 작업된 내용이라 기타 다른 스킨 사용자분들의 경우에는 위치가 다르게 표시될수 있습니다. 참고만 부탁드리며 위치가 다를 경우는 자신의 스킨에 맞게 CSS부분을 수정해서 다시 잡아주세요!

 

 

1. 일단 먼저 방명록 비밀글 체크버튼 설치전의 입력폼의 모습입니다. 설치를 생각한 위치는 홈페이지(Homepage) 아래쪽으로 체크버튼을 추가하기로 결정하였습니다.

 

 

 

 

 

2. 코딩 수정을 위해 관리자페이지 HTML/CSS 편집으로 들어가주세요!

 

 

3. 우선 먼저 skin.html파일에 체크버튼 소스를 추가하기위해 방명록 영역의 위치를 찾아줍니다. 소스를 복사하셔서 메모장 검색을 이용하셔도 되며 익스플로러 '편집' -> '이페이지에서 찾기' 쪽에서 guestbook, 방명록, s_guest_form 3가지중 원하시는 단어로 검색을 해서 해당 위치를 찾습니다.

 

 

 

 

 

4. 코딩부분에서 방명록 입력영역 위치를 찾으셨다면 조금 내려보시면 <p></p>영역으로 감싸여진 Homepage 단어가 보이게 됩니다. 이미지와 같이 바로 아래 위치로 첨부소스를 넣어주시면 됩니다.

 

첨부소스

<!-- 방명록 비밀글 체크박스 시작-->
<p class="guest_secret_box">
<input type="checkbox" id="[//##_guest_input_is_secret_##//]" name="[//##_guest_input_is_secret_##//]" class="checkbox" value="1" />
<label for="[//##_guest_input_is_secret_##//]">비밀글</label>
</p>
<!-- 방명록 비밀글 체크박스 끝 -->

 

소스사용시 [/##_guest_input_is_secret_##//] 부분 양쪽의 '//'를 삭제후 사용해주세요!

 

소스 다운로드 : html.txt

 

 

5. 저장을 하신뒤에 로그아웃 하신후 방명록을 확인하시면 위의 이미지와 같이 비밀글 체크영역이 나오신걸 보실 수 있습니다. 체크버튼과 비밀글의 모양이 조금 삐뚤어 진걸 보실 수 있으실 텐데요 그 다음으로 할일이 바로 CSS에서 위치를 잡아주시면 해결됩니다.

 

 

6. skin.html 아래로 style.css영역에서도 마찬가지로 .homepage를 검색해서 바로 아래로 첨부해드린 소스를 붙여넣은 뒤에 저장하시면 방명록 비밀글 체크버튼 추가가 완료됩니다.

 

첨부소스

#guestWrite .guest_secret_box { height:30px; }
#guestWrite .guest_secret_box input { background:#eee; vertical-align: middle;}

 

소스 다운로드 : css.txt

 

 

7. 위치가 조절된 완성된 비밀글 체크버튼의 모습입니다. 이제 웹과 모바일 상관없이 방명록 비밀글을 사용할수 있게 되었네요!

 

copyright @ xinsound (씬사운드) all rights reserved.

 

 

 

------------------------------------------------------
오늘 하루도 감사하고, 사랑하고, 행복하세요!
글이 도움이 되셨다면 공감♥ 꾹 부탁드려요!
------------------------------------------------------