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

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

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


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



지금도 그 생각은 변함이 없다. 방법은 쉽다. 그 부분이 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편집화면 제일 밑부분에 추가시키고 저장하면 된다.