티스토리 카카오아이콘 추가하기

이번시간에는 제 블로그를 보시면 우측스크롤을 따라다니는 카카오톡 상담 바로가기 버튼을 적용시켜 보겠습니다. 조금만 더 응용을 하면 카카오 플러스 친구가 아니라 다른 사이트로 이동, 혹은 팝업도 띄울 수가 있는 기능인데요. 차근차근 살펴보겠습니다. 잘 따라와 주세요. 어렵지는 않은데 잘못 적용하면 제대로 안나올 수 있으니 간단한 원리에 대해서 도 설명을 드릴까합니다.

 

 

 

 

2017/06/16 - [블로그/꾸미기노하우] - 티스토리 댓글 프로필이미지 오류 수정

2017/06/12 - [블로그/꾸미기노하우] - 티스토리 하단 목록 추가방법

2017/05/26 - [블로그/꾸미기노하우] - 티스토리 본문 글씨 크기 변경

 

 

티스토리 카카오아이콘 추가하기

아이콘이 어떻게 나타나는지 살펴보도록 하겠습니다.

 

 

모바일 환경에서 나타나는 제 블로그입니다. 우측에 보시면 카카오톡 아이콘이 있습니다. 제가 임의로 지정을 해서 카카오플러스 친구로 연동을 시켰습니다. 즉, 클릭을 하게 되면 카카오플러스 친구로 넘어가게 되어있습니다.

 

 

 

사실, 카카오 API가 따로 있기는 한데, 적용하기는 번거로울 것 같아 간단하게 링크만 걸어서 이동을 할 수 있게 하였습니다.

 

그리고 해당되는 소스는 아래와 같습니다. DIV태그로서 구성을 하였으며, CSS는 별도로 분리를 하지 않고 한번에 파악할 수 있게 적용을 시켰습니다.

 

 

 

 

 

소스 텍스트파일 다운 :  카카오플러스친구추가.txt

소스를 살펴보시면, 연결할 주소, 아이콘의 주소 이렇게 두군데를 손봐주셔야 하는데요. 아이콘의 주소의 경우 티스토리에 사진으로 올리고 미리보기에서 올린 이미지 위에서 마우스 우측 클릭을 한뒤 속성에서 확인하실 수 있습니다. 그리고나서 문서 텍스트 영역에서는 삭제처리 해주시구요.

 

 

이런식으로 주소를 알 수가 있습니다. 파일 확장자는 따로 없으며, 그냥 그대로 쓰시면 됩니다. 다음으로는 편집영역에 있는 사진을 삭제처리하시면 간단하게 처리가 되겠네요. (실제 삭제가 아닌 본문에서만 삭제처리 해주세요)

 

 

스킨을 꾸밀때에는 항상 관리자 - HTML/CSS편집 메뉴에서 변경을 하실 수 있습니다. 너무나 익숙한 메뉴라서 이제는 말만해도 척 아실듯한데요. 편집화면에서 아래 코드를 추가해주시면 됩니다.  위치는 제일 마지막에 넣어주시면 적용이 됩니다.  웹표준이나 구성을 엄밀히 따지자면 어긋나는 부분이긴 하지만, 스킨위에 존재하는 방식이라서 문제는 없습니다. 정 신경이 쓰이신다면 </body> 태그 위에 넣어주시면 됩니다.

 

 

style 속성을 잘 살펴보시면 익히 알수있는 부분이 보입니다. 가로를 뜻하는 width, 세로를 뜻하는 height, 우측의 위치를 나타내는 right, 아래쪽 위치를 나타내는 bottom 등은 말씀을 안드려도 파악을 하실 수 있을듯하며, postion의 fixed 의 경우 한 위이에 고정을 시키는 의미 입니다. 따라서 위치가 이동되는 일이 없기 때문에 항상 같은 자리에 고정이 되어 있습니다.

 

 

이처럼 카카오톡 아이콘이 한 자리에 고정이 되어 있는걸 보실 수 있습니다. 이러한 작용을 하는 속성이 position:fixed 입니다.이 속성이 없어지게 된다면 스크롤에 따라서 밀려서 안보이게 되는것이죠.

 

즉, 가로 세로 위치를 정해주고 고정을 시켜주어서 화면 스크롤에 아이콘이 안사라지게 만들었습니다. 그리고 아이콘의 기본 형태는 사각형인데요. 스타일 속성의 border-radius : 50% 라는 속성으로 원형의 라운드를 주었습니다. 원형 크기가 50%이기 때문에 원으로 나타나게 됩니다.

 

오늘은 간단하게 티스토리 카카오아이콘 추가를 해보았습니다. 잘 응용하셔서 네이버밴드, 트위터, 페이스북등 맘대로 사용해보시기 바랍니다. 그냥 소스 코드를 추가하시면 위치가 겹치기 때문에 bottom 속성을 잘 바꾸셔서 테스트 해보시기 바라겠습니다. 여기까지 티스토리 카카오아이콘 추가하는 방법에 대해서 알아보았습니다.