[공감 버튼 추가설명] 티스토리 모바일 웹 버전 공감 버튼 중앙 정렬

반응형

앞전에 공감 버튼 가운데 정렬에 대해 설명해 드렸습니다. 못 보신 분들은 이전 글을 참고하세요.


댓글로 질문을 주셔서 추가 설명해 드리려고 합니다. 핸드폰 화면에서도 가운데 정렬이 되게 할 수 없냐는 질문인데요. 한가지 집고 넘어 가야 할 부분이 있습니다. 오랫동안 티스토리 블로그를 사용하셨던 분들은 잘 알고 있겠지만 티스토리에는 3가지 버전이 있습니다. 즉, 3가지 형태로 화면에 보여 주는데요. 저는 개인적으로 이렇게 구분을 합니다. 


우리가 꾸미고 관리하는 스킨을 사용자 스킨버전 그리고 티스토리에서 자체적으로 꾸미고 관리하는 모바일 웹 버전 그리고 티스토리 전용 모바일 어플버전으로 구분을 합니다. 이런 설명을 드리는 이유는 질문 하신 분께서 핸드폰 화면이라고 말씀을 하면 반응형 스킨을 사용하시는 분들이 혼동할 우려가 있어 그렇습니다.


앞에 설명해 드렸던 공감 버튼 가운데 정렬은 반응형 사용자의 경우에는 PC 화면이든 핸드폰 화면이든 가운데 정렬이 됩니다. 그런데요. 티스토리 자체 모바일 웹 버전에서는 안되지요. 반응형 스킨 사용자가 티스토리 모바일 웹 버전에 접속하는 방법은 본인 티스토리 주소 끝에 /m을 넣어 주면 접속됩니다. 예) http://boogong.tistory.com/m 또는 티스토리 모바일용 어플로 접속하셔도 됩니다. 


질문 하신 분처럼 티스토리 자체 모바일 웹 버전에서도 공감 버튼을 가운데 정렬을 원하는 분이 있을 것 같은데요. 공식적인 방법은 없습니다. 그래서 꼼수 하나를 알려 드리겠습니다. 


우선 블로그관리 페이지로 가서 좌측 메뉴 중 플러그인을 선택하고 오른쪽 위에 보기에서 수익을 선택합니다. 그러면 아래와 같은 화면이 생기 지요.


저 플러그인들 중에서 다음 애드핏과 구글 애드센스(반응형), 그리고 텐핑(모바일) 플러그인을 이용할 수 있니다. 구글 애드센스(반응형) 플러그인을 이용해서 스타일 코드를 넣으면 내가 관리하는 스킨에는 넣지 않아도 됩니다.

다음 애드핏(모바일) 과 텐핑(모바일) 플러그인을 사용하게 되면 내가 관리하는 스킨에도 넣어야 하고 플러그인에도 넣어야 합니다. 텐핑(모바일) 플러그인을 사용해서 넣으시는게 가장 좋습니다. 

아래 코드를 복사 해서 광고 입력 부분에 붙여넣기 하시면 됩니다. 가장 아래 있는 코드는 CCL 표시 삭제 입니다. 

텐핑(모바일)플러그인 이용

<style>
.container_postbtn{text-align:center;}
.container_postbtn .postbtn_like {float:none !important; display:inline-block;} 
.container_postbtn .postbtn_ccl{display:none;}/* CCL 제거 */
</style>

참고로 구글 애드센스(반응형)플러그인을 사용 하실분들은 하단에 넣으셨야 합니다.

상단에 넣으시면 본문에 스타일 코드가 들어갑니다. 상관은 없지만 좋지는 않습니다. 

그리고 구글 애드센스를 이용하면 하단에 공백이 생깁니다. 그래서 코드가 한 줄 더 추가됩니다.


구글 애드센스(반응형)플러그인 이용

<style>
.container_postbtn{text-align:center;}
.container_postbtn .postbtn_like {float:none !important; display:inline-block;} 
.container_postbtn .postbtn_ccl{display:none;}/*CCL 제거*/
.tt_adsense_bottom{margin-top:0  !important;}/* 아래쪽 공백 제거 */
</style>

공감 버튼 많이 눌러 주세요!


이전글


반응형
그리드형