친절한효자손 취미생활

친효애드온 : 본문용 SNS 공유 모듈 (마크1)

2019. 8. 1. 11:22

에디터에게 힘이 되어 주세요. 애드블록은 광고쟁이들에게 사용해 주세요!

안녕하세요, 친절한효자손 입니다. 친효스킨에 적용할 공유 모듈을 만들었습니다. 더불어 친효 스킨 뿐만 아니라 타 스킨에서도 적용 가능하도록 또 하나의 모듈을 만들었습니다. 현재 친효스킨 전용은 다음번 버전 때 기본으로 적용되어 있는 파일로 제공할 계획입니다. 이곳에 올리는건 티스토리의 다른 반응형 스킨에서도 적용할 수 있는 파일 입니다.


현재 친효스킨을 사용중인 기어베스트코리아 티스토리 블로그에도 적용되어 있으며, 지금 보고 계시는 이 글에도 해당 공유 모듈이 적용되어 있습니다. 반응형이기 때문에 브라우저의 가로 사이즈를 늘리고 줄이면 알아서 크기에 맞게 변합니다. 친효애드온은 친효스킨에서 가장 완벽하지만 다른 반응형 스킨에서도 사용이 가능하도록 설계되었습니다.


업데이트 일지

2020.1.3

-카카오톡 공유 버튼이 추가 되었습니다!


2020.1.6

-밴드 공유 버튼이 추가 되었습니다!

-각 아이콘에 마우스를 올리면 잠시 후 타이틀 제목이 출력됩니다.


HTML 세팅하기

먼저 HTML을 세팅해 줍니다. 먼저 아래의 첨부파일을 다운 받으시고 메모장 안에 들어있는 모든 태그들을 전체 복사 해둡니다.


친효애드온 - 본문 공유 모듈 (HTML).txt


복사하시고 자신의 티스토리 관리자 모드에서 꾸미기 > 스킨 편집 으로 들어갑니다.


HTML에서 Ctrl + F를 누르셔서 article_rep_desc 를 검색합니다. 위의 작은 빨간색 부분이 검색이 될 것입니다. 첨부파일에서 받은 태그들을 모두 저 위치게 붙여넣기를 합니다. 큰 빨간색 네모칸 부분이 바로 그것입니다. 붙여넣기 하시고 꼭 저장 버튼을 눌러주셔야 합니다. 이제 HTML 세팅은 끝이 났습니다.


CSS 세팅하기

CSS는 그냥 빈 공간을 확보하시고 붙여넣기를 해주시면 됩니다. 먼저 아래의 첨부파일을 다운받으시고 열어보시면 여러가지 태그 요소들이 보이실텐데요, 그냥 모두 복사하시면 됩니다.


친효애드온 - 본문 공유 모듈 (CSS).txt


다 복사하셨다면 CSS 탭으로 이동합니다.


이렇게 위의 스크린샷 이미지처럼 그대로 붙여넣기를 하시고 저장하시면 됩니다. 간단합니다.


아이콘 이미지 세팅

마지막으로 공유 아이콘들을 세팅하겠습니다. 이건 그냥 이미지 파일만 올리면 됩니다. 먼저 아래의 첨부파일을 다운받고 압축을 풀어주시면 5개의 아이콘을 보실 수 있습니다.


아이콘 이미지.zip


원래는 이미지가 아닌 아이콘 폰트를 사용하려했는데, 전부 있는게 아니어서 어쩔 수 없이 이미지로 진행하게 되었습니다.


다섯개의 이미지들을 파일업로드 항목에 있는 추가 버튼을 누르시고 티스토리로 올려주세요. 업로드가 완료되면 꼭 저장 버튼을 눌러주세요. 의외로 저장 버튼을 깜박해서 잘 안되는 경우가 많습니다.


이렇게 하시면 본문 마지막 부분에 공유하기 모듈이 생성된 것을 확인하실 수 있습니다. 이제 접속하시는 분들이 글이 마음에 든다면 여기저기에 글을 퍼다 옮겨 줄 것 입니다. 티스토리에서도 기본으로 제공하는 SNS 글 공유 버튼이 있지만 너무 작은데다 세련된 디자인은 아니어서 늘 눈엣가시였는데 이번에 이렇게 만들어 놓으니 너무 좋습니다. 그러면 많은 이용 부탁드립니다. 끝.





이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

잠깐! 비밀로 남겨야 할 만한 내용인가요? 그렇다면 차라리 이메일을 보내주시기 바랍니다.

  1. Favicon of https://eastsky3483.tistory.com 2019.08.01 16:50 신고

    티스토리에서 제공하는 기본 공유아이콘3가지는 어떻게 없애나요? 서로 중복되서요..ㅠ

  2. Favicon of https://betterthanlog.com ';';';' 2020.01.03 17:44 신고

    친효님! 혹시 카톡공유도 추가하려면 어떻게 해야하는지요?

    이 글을 본이상 더이상 addthis를 사용할 필요가 없어졌거든요 카톡만 있다면!

  3. 감사합니다. 잘 쓰겠습니다.ㅎㅎ 이게 모바일에선 안나오는건가요? 반응형 스킨이라 그런가.. 잘 모르겠군요.ㅎㅎ

  4. Favicon of https://dazemonkey.tistory.com dazemonkey 2020.04.06 01:58 신고

    PC, MOBILE에서 모두 잘 동작하네요. 감사히 잘 사용하겠습니다