티스토리 최적화 - 공감 버튼 간격 조정하기

Posted by Breeze24
2016.06.05 11:06 중급 강의
[애드센스-중급강의 3/98] 티스토리 공감 버튼 간격 조정하기

발행글이라고 한다면 보통 포스팅 마지막에 공감 버튼이 위치하고, 그 밑에 카테고리의 다른 글 보기 또는 광고가 위치하게 된다. 

SNS 버튼을 사용한다면 공감버튼과 카테고리의 다른 글 보기 사이에 SNS 버튼도 위치하게 된다. 


포스팅의 마지막과 하단 광고 또는 카테고리 다른 글 더보기의 간격이 넓어서, 방문자들이 못 보는거 같다. 


블로그를 운영하면서 한번쯤은 고민해봤을 것이다. 

방문자가 포스팅 하단에 있는 광고 또는 카테고리 다른 글 더보기도 봤으면 하는데, 포스팅과의 거리가 멀어 방문자들이 보지 못한다는 생각이 한 번쯤 들었을 것이다. 


공감 버튼 해결 방법


포스팅과 공감버튼과의 간격, 공감버튼과 다음 컨텐츠와의 간격을 조정해보자. 



티스토리 공감 버튼

위의 그림을 보자. 

좌측이 간격 조정 전이고, 우측이 간격 조정 후다. 

.


간격 조정 후 공감 버튼과 포스팅과의 간격이 좁아졌다. 

간격이 좁아지면서 원하는 대로 방문자가 광고 또는 카테고리를 볼 확률이 높아졌다. 


수정 방법


수정하는 방법에 대해 알아보자. 


HTML/CSS 편집 메뉴로 이동하자. 

공감 버튼 간격 조정

 

위의 붉은색 소스를 <header></header>사이에 추가하면 된다. 





<소스코드 하이라이팅>
위의 화면처럼 소스 코드 하이라이팅을 적용하고 싶다면 아래 사이트를 참고하기 바란다. 



저장 후 포스팅을 다시 보면 공감 버튼의 간격이 좁아진 것을 확인할 수 있을 것이다. 

.
이 댓글을 비밀 댓글로
  1. 저는 그래서 아예 공감 버튼 안보이게 숨겨버렸습니다.;;
    • 블로그 이쁘게 꾸미셨네요. 저도 공감 버튼 없앨려다가 로또를 기다리며 남겨놨습니다.^^
    • 이인선
    • 2016.02.10 06:02 신고
    제가 똑같은 고민을 하고 있었는데 덕분이 좋은거 배우고 갑니다. 감사드려요.

    그런데 여기서 한발 더 나아가

    티스토리 글을 발행하고 주제까지 설정 후 공감버튼을 아에 안보이게 하는 방법이 있을까요?

    공감 버튼 자체가 굉장히 거슬리고 하단의 다른글보기 및 하단 광고와의 거리를

    공감버튼을 없앰으로써 줄이고 싶은데 말이죠....

    혹시 그런 방법이 있을까요?
    • 프리마
    • 2016.06.05 13:42 신고
    너무나도 도움이 되는 정보네요.^^
    을지휘소님 그런데 카테고리 아래에 공감버튼은 어떻게 다는것일까요?
    저는 공감버튼이 광고 위에 바로 붙어있더라구요.
    그런데 을지휘소님 공가버튼 카테고리 아래 댓글 창 위에 있는데 어떻게 하면 되는지 알 수 있을까요?~~
    • 계속 스킨 소스를 수정 하다보니, 정확히 기억은 안나지만, 아래처럼 한 번 해보세요.아마 될 겁니다.
      $('.daum_like_button').css({'margin':'0px'});
      본문에서 설명된 위 부분 아래에 아래 코드를 삽입해 보세요.

      $('.actionTrail').before($('.daum_like_button'));

      트랙백과 커멘트 바로 앞에 공감버튼을 위치시키라는 겁니다.

      해보시고 안되면, 알려주세요~
  2. 클릭이 안되요
.