상세 컨텐츠

본문 제목

티스토리 블로그 관련 글 팝업 만들기, 애드디스(Addthis)

Uncategorized

by KTC_KANG 2019. 1. 21. 00:46

본문



애드디스

티스토리 블로그 관련 글 팝업 만들기, 애드디스(Addthis)



인터넷을 돌아 다니던 중 관련 글 팝업이 뜨는 티스토리 블로그를 발견하였다. 그 블로그를 보고 한눈에 반해버려서, 나도 관련 글 팝업을 만들어야 겠다고 생각하였고, 인터넷 검색을 통하여 그 방법을 알게 되었다. 그 방법은 바로 애드디스(Addthis)!!!


간단하다. 특별한 코드가 필요하거나 뛰어난 컴퓨터 능력이 필요하지도 않다. 지금부터 이야기할 단계를 그대로 따라가면 된다.


addthis


먼저, 애드디스 홈페이지로 이동하도록 하자. 구글에 애드디스 혹은 addthis라 검색하면 바로 나온다. 또는 아래의 링크를 따라가면 된다. 그리고 나타난 페이지에서 회원가입을 한 후 'Tool'을 클릭하도록 하자.


링크: https://www.addthis.com/


애드디스 툴


툴을 클릭하면 다음과 같은 창이 나온다. 공유 버튼, 팔로우 버튼, 관련글, 리스트 등 다양한 기능들이 준비되어 있다. 여기서는 앞서 이야기한 관련 글 버튼을 만드는 작업을 하도록 하겠다. 그러므로, 관련 글(Related Posts)를 클릭하자.


관련글


관련 글을 클릭하면 다음과 같이 타입을 선택할 수 있다. Slider는 팝업 창이 뜨는 형태이고, Footer는 말 그대로 본문이 끝나고 나오는 Footer 부분에, Inline은 글 내부에 관련 글이 위치한다. 팝업을 띄우기 위해서는 Slider를 선택하면 된다.


애드디스 관련글2


애드디스 관련글 모바일


그리고 위와 같이 PC버전, 모바일 버전의 형태를 미리 볼 수 있다. 이를 통해 원하는 위치, 그리고 형태가 맞는지 확인하고 진행하면 되겠다. 


애드디스 디자인


애드디스 포지션 애드디스 행동


위와 같이 세부사항을 선택할 수도 있다. 첫 번째는 디자인, 두 번째는 위치, 세 번째는 행동(특정 페이지를 선택하거나 숨길 수 있다)이다. 본인이 원하는 대로 세부 사항을 선택하고 다음으로 넘어가면, 아래와 같은 화면이 등장한다.


애드디스 코드


다음의 생성된 코드를 복사한 후, 아래의 예시와 같이 body 부분이 끝나는 곳에 붙여넣기를 하면 된다. 그럼 끝이다. 참 쉽죠?!



Keyword: 티스토리 블로그 관련 글 팝업, 티스토리 블로그 플로팅 팝업, 블로그 공유 버튼, 티스토리 블로그 꾸미기, 애드디스, Addthis, html 수정, 티스토리 추가 기능

티스토리 블로그 관련 글 팝업 만들기, 애드디스(Addthis)

관련글 더보기

댓글 영역