티스토리 공감버튼 위치 변경 또는 숨기는 방법 본문

티스토리 공감버튼 위치 변경 또는 숨기는 방법

블로그 노하우 2018.02.12 20:45

언제부턴가 티스토리 공감버튼과 공유, 신고버튼이 함께 묶인 형태로 블로그 본문 좌측에 기본 배치되기 시작했다. 


지금 사용중인 이 블로그 스킨에서는 딱히 '숨기기'를 적용하지 않았는데.. 이전에 사용하던 스킨에서는 일부러 숨기기도 했었다. 굳히 불필요한 버튼을 노출되게 하고 싶지 않아서였다. 



지금도 그 생각은 변함이 없다. 방법은 쉽다. 그 부분이 html의 어느 부분에 있는지? 어떤 명칭을 사용중인지? 이것만 알면 쉽게 숨기거나 위치 변경이 가능하다.



전혀 신경도 안쓰는 사람들도 많겠지만.. 저 공감버튼과 신고버튼이 함께 있으니 뭔가 좀 이상해 보인다.



구글 크롬 '요소 검사'를 활용하면 html에 대해서 잘모르는 초보자도 화면상에 보여지는 블로그 화면상의 부분들이 어느 위치인지 찾아낼 수 있다. 


티스토리 공감버튼은 elements의 'cotaniner_postbtn'라는 부분 이더라. 기본적으로 아래 위로 padding이 각각 35px나 적용되어 있더라. 그래서 참 보기 싫다. 쓸데없이 여백이 많아보이게 만드는 주범이다.


티스토리 공감버튼 위치 변경 또는 숨기는 방법




sources로 들어가서 container_postbtn이란 부위를 확인해보니..padding 수치가 보인다. 바로 이 부분에서 여백을 없애거나 줄일 수 있고.. 또는 완전히 감출 수도 있다.



조금 더 밑으로 내려보면 '좌측 공감, sns, 신고버튼'에 대한 sources가 보이는데.. 하나로 묶인 상태라서 'postbtn_like'라는 부분만 수정해주면 된다. 


(float이 left로 기본 설정되어 있는데.. right로 바꾸면 오른쪽으로 이동됨)



내가 어떤 소스를 티스토리 블로그 편집창에 입력해야할지 모르겠다면 위에 있는 소스를 참고하시길~ 


◎ 상,하 여백 줄이기 =  .cotainer_postbtn {padding: 10px 0 !important;}

◎ 위치를 왼쪽에서 오른쪽으로 바꾸기 = .postbtn_like {float: right !important;}

◎ 완전히 감추기 = .container_postbtn {display: none;}


위 소스들을 블로그 CSS편집화면 제일 밑부분에 추가시키고 저장하면 된다.