친절한효자손 취미생활

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




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


HTML 세팅하기

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


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


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




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


CSS 세팅하기

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


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


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




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


아이콘 이미지 세팅

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


아이콘 이미지.zip


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




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


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





이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

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

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

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