티스토리 공감버튼 위 아래에 글자넣기 방법

2017. 11. 17. 00:21 IT, SNS/블로그

오늘은 티스토리 공감버튼 위, 또는 아래에 글자 넣는 방법에 대해 알아보겠습니다. 페이스북과 트위터에서는 좋아요 버튼, 유튜브에서는 좋아요와 구독하기 버튼으로 해당 컨텐츠에 대한 공감과 느낌을 표현해줄 수 있습니다. 티스토리 블로그에서는 포스팅을 하면 공감 하트 버튼을 통해 해당 게시물에 대한 사람들의 평을 알아볼 수가 있는데요. 공감을 많이 받은 포스팅일 수록 다음 또는 티스토리 주제 내에서 더 많은 사람들이 볼 수 있도록 노출이 잘 되거나 하는 효과까지 있는 듯 합니다.


꼭 그렇지 않더라도 많은 사람이 글을 읽고 도움이 되었다는 표현을 해준다는 사실 하나만으로도, 글을 발행하는 사람의 입장에서는 보람을 느끼고 더욱 좋은 글을 써야겠다는 마음이 커지기 때문에 고마운 기능입니다. 그런데 하트 공감 버튼이 눈에 잘 띄지 않거나 이 버튼을 누르려면 로그인을 해야하지 않을까? 라는 생각 등 여러 이유로 공감을 누르지 않게 되는데요. 독자들의 반응이 힘이 될 수 있기 때문에 블로거 입장에서는 글이 유용했다면 적극적으로 공감을 눌러주기를 원하는 것은 당연합니다.


이를 위해서 포스팅 가장 마지막에 글이 도움되었다면 로그인 없이 누를 수 있는 공감 버튼을 눌러달라는 글을 매번 쓰시는 분이 많습니다. 하지만, 매번 서식으로 넣기도 귀찮을 수 있기 때문에 아예 딱 HTML에 새겨 넣어서 고정시킬 수만 있다면 더욱 편리할 것입니다. 이런 문제로 고민하셨던 분들은 지금부터 천천히 글을 읽으면서 따라해보신다면, 공감 하트 버튼 위 또는 아래에 원하시는 문구를 입력할 수 있을 것입니다.


티스토리 블로그 공감버튼 상단 하단에 문구 넣기

우선 각자의 블로그에서 q 버튼을 눌러서 티스토리 블로그에 로그인 한 후 관리화면에 들어갑니다. 왼쪽 사이드바 꾸미기에서 HTML/CSS를 클릭해서 들어갑니다. 그후 HTML에서 </head> 코드 바로 위에 jquery(제이쿼리)코드를 구현하는 스크립트 코드를 넣어줍니다. 직접 타이핑 하기 귀찮을 수 있기 때문에 아래 노트패드 메모장 첨부파일을 여셔서 복사 붙여넣기 해주세요.

</head> 앞 삽입 : 공감head앞.txt




그 다음 스크롤을 가장 마지막까지 내리거나 키보드 자판 오른쪽에 있는 End키를 누릅니다. HTML의 가장 하단 부분에 오게 되면 이번에는 </body> 바로 위에 위와 같은 스크립트 코드를 작성해 넣어줍니다. 이 또한 첨부파일을 열어서 복붙 해주시면 간단하게 됩니다.

</body> 앞에 넣기 : 공감body앞.txt


이때 상단 이미지에서 분홍색으로 표시한 부분에 본인이 원하시는 문구 글씨를 입력해주시면 되는데요. 다채롭게 꾸미기 위해서는 티스토리 글쓰기를 누르고 예쁘게 꾸미신 후 글쓰기 화면 오른쪽에 보이는 HTML을 클릭하셔서 코드 소스로 변환시켜준 후 그것을 이곳에 복사붙여넣기 한 후 한 줄로 만드시면 되겠습니다.


또한 공감 버튼 아래에 문구를 넣고 싶다면 .insertBefore를 .insertAfter로 고쳐주시면 됩니다. 모든 것이 완료 되었다면 우측 상단의 저장버튼을 눌러서 최종적으로 설정을 해주시면 되겠습니다. 이때 이 기능을 이용하기 위해서는 당연히 공감버튼이 활성화 되어 있어야 하는데요.


글쓰기를 하실 적에 오른쪽의 기본설정 하위에 있는 주제에서 반드시 여러 주제 중에서 한 가지를 선택해주셔야 공감버튼 활성화가 이루어지니 꼭 잊지 말고 체크해주시기 바랍니다. 티스토리 공감버튼 위 아래에 글자 문구를 넣는 방법을 응용해서 공감 버튼 위에 jpg나 gif 등의 그림 파일도 삽입할 수 있으니, 다양하게 티스토리를 꾸며보시기 바랍니다. 


티스토리 블로그 유용한 단축키 알아보기

티스토리 블로그 가로길이(가로폭, 너비) 조정하기 방법 :: fastboot스킨

티스토리 사진 포토 업로드 편하게 하기 방법 :: 즐겨찾기 기능

티스토리 블로그 줄간격 변경 방법


♥ 암호화폐 후원하기 ♥


ⓑ 비트코인(BTC) ⓑ


◆ 이더리움(ETH) ◆


♣ 리플(XRP) ♣

리플 데스티네이션 태그