[티스토리] 따라오는 SNS 공유버튼 만드는 자세한 방법 & 스샷

2018.02.14 19:11

티스토리 블로그에서 스크롤할 때도 따라오는 sns 공유 버튼을 만드는 방법을 설명드리겠습니다. sns공유버튼을 생성해주는 사이트는 여럿 있지만 그 중에 addthis를 추천드립니다! 제 블로그를 보시면 스크롤을 해도 따라오는 sns 버튼들이 보이실겁니다. 컴퓨터에선 오른쪽에 보일거고, 모바일에선 아래에 보일겁니다. 아래 스샷의 화살표가 가리키는 것이 addthis에서 추가한 sns 공유 버튼입니다:)




1. addthis 사이트에 접속합니다: https://www.addthis.com/



2. 홈페이지 가운데에 3가지의 가입 옵션이 있습니다. 저 같은 경우는 "continue with email"을 클릭하여 이메일로 가입을 해보겠습니다.




3. 이메일 정보를 입력하고, 체크란에 체크를 해주고, 아래 화살표가 가리키는 Lets get started를 클릭합니다.




4. 아래 화살표가 가리키는 share buttons를 클릭합니다



5. 여기서 원하는 디자인을 선택하실 수 있어요~ 미리보기로 나오니 모두 클릭해보고 선택하세요! 저는 깔끔하게 따라다니는 형태인 floating을 선택하였습니다. 그리고 아래의 continue를 클릭하세요.




6. 여기서도 원하는 형태를 선택하시면 돼요. 저는 데스크탑의 버튼 위치는 오른쪽으로 선택하였고, 모바일에선 아래로 선택하였어요. 공유를 한 횟수는 버튼별로 individual(각각) 표시되는 걸로 선택했습니다:) 소셜네트워크는 제가 원하는거로 지정하고 싶어서 select your own에 체크표시를 하였고 add more services를 클릭하여 원하는 소셜 네트워크를 추가하였습니다! 여기까지 마치셨다면 맨 아래의 save&continue를 클릭합니다.




7. 아래로 살짝만 스크롤 내리시면 아래의 스샷과 같은 이미지가 보일겁니다. 아래의 화살표가 가리키는 +를 클릭하면 아래의 코드가 복사됩니다.




7. 이제 티스토리 블로그에 들어가셔서 블로그 관리의 왼쪽 카테고리에서 꾸미기 아래의 스킨편집을 클릭합니다.




8. html편집을 클릭합니다




9. html창에서 control+f를 누르고 "/body"를 적고 엔터를 누르면 /body가 하이라이트 된 것이 보일겁니다. /body 바로 위에 아까 복사했던 코드를 control+v 를 눌러서 붙여넣기 해주세요. 마지막으로 "저장" 버튼 눌러주면 끝입니다!^^


이 댓글을 비밀 댓글로
    • 2018.07.22 12:38
    비밀댓글입니다