본문 바로가기
블로그팁

티스토리 공감 버튼 위치 가운데로 옮기기

by 봉잡스 2018. 7. 12.

오늘은 하트(♥) 모양의 티스토리 공감버튼을 업데이트 이전처럼 가운데로 옮기는 방법에 대해 정리해봤습니다. 다음 정책에 위배되는지 안되는지는 정확히 모르겠네요. 참고해보시고 블로그 디자인상 공감 버튼을 꼭 가운데 놓고 싶을 때 사용하면 될 것 같습니다. 잘 응용하면 중앙이 아닌 다른 위치에 놓는 것도 가능합니다. 




티스토리 공감버튼 가운데로 옮기기


블로그 스킨 작업을 위해 CSS와 HTML을 여러 번 수정해본 분이라는 가정하에 설명을 하겠습니다.


1. 블로그 관리 > 스킨 편집 >HTML 편집 > CSS 순으로 클릭합니다.




2. CSS 최하단에 아래의 코드를 추가합니다. 드래그가 되지 않으니 아래의 코드.txt 파일을 받아주세요.


/* 본문 신고 및 여백조정 및 CCL 없애기 */

.container_postbtn {margin-top: -30px;}

.container_postbtn .postbtn_like {padding-right: 70px; margin-left: 45%}

.container_postbtn .postbtn_like .like_btn {position: absolute; width: 73px;}

.container_postbtn .postbtn_like label {margin-right: -100px}

.container_postbtn .postbtn_like .ico_sns {display: none; width: 0px;}

.container_postbtn .postbtn_like .ico_report {display: none; width: 0px;}

.container_postbtn .postbtn_like .ico_bar {display: none;}

.container_postbtn .postbtn_like .inp_btn {display: none;}



※참고 블로그마다 공감버튼을 중앙에 구현하는 값이 다를 수 있습니다. 코드의 margin 값을 변경하여 본인의 블로그에 알맞는 중앙 위치로 조정해주세요.




3. 위 CSS 코드를 추가하면 신고 버튼이 사라집니다. 신고 버튼을 제거하는 것은 명백한 다음 정책 위반입니다. 따라서 아래의 코드를 HTML에 추가하여 신고 버튼을 구현해줘야 합니다.


<div class="report"><a href="/toolbar/popup/abuseReport/?entryId=525" onclick="window.open(this.href, 'tistoryThisBlogPopup', 'width=550, height=510, toolbar=no, menubar=no, status=no, scrollbars=no'); return false;"><img style="border:0" src="//t1.daumcdn.net/tistory_admin/static/ico/ico_spam_report.png" alt="신고"></a></div>         



※참고 신고 버튼은 본문 하단에 위치하는 것이 좋을 것 같습니다. 사이드바나 타이틀 등 본문과 동떨어진 곳에 있으면 정책 위반일 것으로 생각되네요. 태그 옆, 댓글 옆 등 블로그 디자인을 해치치 않으면서도 본문과 동떨어지지 않은 곳을 골라 절절히 넣어주세요. 저는 본문 하단 태그 왼쪽 밑에 있는 빈 공간에 달아놓았었습니다. (지금은 뗀 상태입니다.)



이상입니다. 직접 스킨을 수정하면서 찾았던 방법입니다. 혹시 필요하신 분들이 있을까봐 정리해 올려둡니다. 도움이 되셨으면 좋겠네요. :)

반응형

댓글