티스토리 신고 버튼, CCL 위치 여백 조절하는 방법

얼마 전 티스토리 업데이트에서 신고 기능을 추가해 레이아웃이 조금 뭉개지는 현상이 있었습니다. 물론 티스토리에서 기본적으로 제공해준 스킨을 제외하고는 반응형 스킨의 경우 많은 여백이 생겨 레이아웃을 다시 조절해야 하는데 힘듭니다.


신고 버튼 여백이 너무 많아서 Class 와 id 조차 부여되지 않아 수정이 힘들었는데요. CCL 버튼은 여백 조절이 가능하지만 JQuery를 이용해 신고 버튼에 Class를 추가하여 마음대로 위치를 조절하는 방법을 알아보도록 하겠습니다.


티스토리 신고 기능 위치 조절하기

티스토리에서 법적 의무 사항으로 강제로 추가한 신고 버튼이오니 만약 아래 방법을 악용하여 지워버리면 어떠한 제제가 가해질지 모르니 참고하시기 바랍니다.


1) 티스토리 관리자에서 꾸미기 항목에 HTML/CSS 편집으로 들어갑니다.


2) HTML에서 JQuery를 사용하기 위해 아래와 같은 코드를 head 태그 안에 넣습니다. 반응형 스킨의 경우 대부분 기본적으로 존재하는 코드로 일반형 스킨의 경우 반드시 입력하도록 합니다.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


그리고 head 나 /body 안에 신고 버튼에 Class를 넣는 코드를 넣습니다. 코드를 넣을 때 windows.load 부분이 있으면 그 안에다가 입력하셔도 됩니다.

<script type="text/javascript">
$(window).load(function(){
$(".entry-content div.daum_like_wrapper").next().addClass("btn-report");
$(".btn-report div:last-child").addClass("report");
});
</script>


간단하게 코드를 설명하고자 하면 아래와 같습니다. 웬만하면 모르는 것보다 알고 이해를 하시는 게 나중에 티스토리가 업데이트 되면 바로 대응할 수 있기 때문입니다.


next() : 다음 공감 버튼 그다음 div 태그

addClass : 해당 div 태그에 btn-report라는 클래스를 추가

그다음 addClass : btn-report 클래스 다음 마지막 신고 div 태그에 report 클래스 추가



2) 그리고 본격적으로 CSS에 추가한 신고 버튼 report 클래스 기타 CCL 버튼에 대한 상단 상백을 -36px만큼 조절합니다. CCL 버튼을 추가하지 않으셨으면 굳이 CCL 코드를 안 넣으셔도 됩니다.


/* 신고 버튼 */
.report { margin-top: -36px }

/* CCL 버튼 */
.entry-ccl { margin-top: -36px }

저장 버튼을 눌러 최종적으로 마치도록 합니다. 그리고 여백 조절이 잘 되었는지 확인하면서 자신의 블로그에 맞게 조절하시면 될 거 같습니다.


이렇게 적용하시게 되면 신고 버튼을 이제 자유롭게 조절이 가능합니다. 본 블로그는 아래와 같이 공감 부분을 숨겼으므로 코드가 약간 상이할 수 있으니 여러분들 블로그에 맞게 적용하시면 되겠습니다.

저작자 표시 비영리 변경 금지
신고
공유OK! 불펌NO!

트위터

페이스북

구글
플러스

카카오
스토리

네이버

밴드

RSS구독

카카오톡