상세 컨텐츠

본문 제목

티스토리 공유 버튼 최종 - 무작정 따라하기 편!

Review/Blog Review

by Ming footprint 2019. 6. 28. 09:00

본문

728x90
반응형

이전편에서는 소셜 공유 버튼의 각각의 코드를 얻고,

티스토리에 적용을 하는 세부적인 부분부터 다루었습니다.

 

최종편에서는 지금까지 했던,

페이스북, 트위터, 카카오스토리, 플립보드, 네이버, 밴드, 카카오톡의

이전 코드를 전부 모아서 만든 최종편입니다.

 

위 이미지와 같이 사용하실 경우, 최종편 소스와 이미지만 다운을 받아서 사용하시면 됩니다.

단, 카카오 버튼의 소스에서 사용하는 자바스크립트는 받아서 사용하는 것이 나을듯 합니다.

 

티스토리 공유 버튼 무작정 따라 하기

  1. 코드, 이미지 다운로드

  2. 버튼 이미지 티스토리에 업로드

  3. 티스토리 HTML 태그에 적용

위의 차례 대로 무작정 따라 하시면 할 수 있도록 포스팅을 해보았습니다.

1. 코드, 이미지 다운로드


소셜 공유 버튼 최종 소스.txt
0.00MB
소셜 공유 이미지.zip
0.01MB

첨부된 소스코드와 이미지를 다운 받습니다.

2. 버튼 이미지 티스토리에 업로드


다운 받은 '소셜 공유 이미지.zip' 파일 압축을 풀고,

티스토리에 업로드를 합니다.

업로드는 티스토리 편집 메뉴에서

꾸미기 메뉴 > 스킨 편집 > HTML 편집 부분으로 들어갑니다.

그리고 상단의 파일 업로드를 선택하여 이미지 파일을 하단의 추가 버튼을 이용하여 추가를 해 줍니다.

다중 선택하여 업로드가 가능합니다.

3. 티스토리 HTML 태그에 적용


공유 버튼 코드를 자신의 티스토리 블로그에 적용하기 위해서,

꾸미기 메뉴 > 스킨 편집 > HTML 편집 부분으로 들어갑니다.

저는 티스토리의 본문 하단 중앙에 위치하는 공유 버튼을 예로 들겠습니다.

티스토리 본문 치환자는

728x90
반응형

이전편에서는 소셜 공유 버튼의 각각의 코드를 얻고,

티스토리에 적용을 하는 세부적인 부분부터 다루었습니다.

 

최종편에서는 지금까지 했던,

페이스북, 트위터, 카카오스토리, 플립보드, 네이버, 밴드, 카카오톡의

이전 코드를 전부 모아서 만든 최종편입니다.

 

위 이미지와 같이 사용하실 경우, 최종편 소스와 이미지만 다운을 받아서 사용하시면 됩니다.

단, 카카오 버튼의 소스에서 사용하는 자바스크립트는 받아서 사용하는 것이 나을듯 합니다.

 

티스토리 공유 버튼 무작정 따라 하기

  1. 코드, 이미지 다운로드

  2. 버튼 이미지 티스토리에 업로드

  3. 티스토리 HTML 태그에 적용

위의 차례 대로 무작정 따라 하시면 할 수 있도록 포스팅을 해보았습니다.

1. 코드, 이미지 다운로드


소셜 공유 버튼 최종 소스.txt
0.00MB
소셜 공유 이미지.zip
0.01MB

첨부된 소스코드와 이미지를 다운 받습니다.

2. 버튼 이미지 티스토리에 업로드


다운 받은 '소셜 공유 이미지.zip' 파일 압축을 풀고,

티스토리에 업로드를 합니다.

업로드는 티스토리 편집 메뉴에서

꾸미기 메뉴 > 스킨 편집 > HTML 편집 부분으로 들어갑니다.

그리고 상단의 파일 업로드를 선택하여 이미지 파일을 하단의 추가 버튼을 이용하여 추가를 해 줍니다.

다중 선택하여 업로드가 가능합니다.

3. 티스토리 HTML 태그에 적용


공유 버튼 코드를 자신의 티스토리 블로그에 적용하기 위해서,

꾸미기 메뉴 > 스킨 편집 > HTML 편집 부분으로 들어갑니다.

저는 티스토리의 본문 하단 중앙에 위치하는 공유 버튼을 예로 들겠습니다.

티스토리 본문 치환자는 입니다.

본문 치환자를 기준으로 아래처럼 배치 위치를 정할 수 있습니다.

그러면 저는 본문 아래였기 때문에,

본문 치환자 의 아래에 첨부된 코드를 삽입하겠습니다.

HTML 태그 창에서 'Ctrl+F' 버튼를 하시고 검색하시면 쉽게 찾을 수 있습니다.

본문 치환자

바로 밑에 첨부된 코드를 메모장 같은 에디터로 열어서 복사/붙여넣기 합니다.

코드를 복사/붙여넣기 한 모습입니다.

그리고 오른쪽 상단의 적용 버튼을 누르면 끝입니다. 하하~!!

<!-- -->은  주석으로 각 코드에 대한 설명을 써 넣었습니다. 코드 실행상에는 아무런 문제가 없습니다.

티스토리 공유 버튼 관련글

Facebook 공유 버튼

Twitter 공유 버튼

카카오톡, 카카오스토리 공유 버튼

네이버, 밴드 공유 버튼

FlipBoard 공유 버튼

728x90
반응형
입니다.

본문 치환자를 기준으로 아래처럼 배치 위치를 정할 수 있습니다.

그러면 저는 본문 아래였기 때문에,

본문 치환자

728x90
반응형

이전편에서는 소셜 공유 버튼의 각각의 코드를 얻고,

티스토리에 적용을 하는 세부적인 부분부터 다루었습니다.

 

최종편에서는 지금까지 했던,

페이스북, 트위터, 카카오스토리, 플립보드, 네이버, 밴드, 카카오톡의

이전 코드를 전부 모아서 만든 최종편입니다.

 

위 이미지와 같이 사용하실 경우, 최종편 소스와 이미지만 다운을 받아서 사용하시면 됩니다.

단, 카카오 버튼의 소스에서 사용하는 자바스크립트는 받아서 사용하는 것이 나을듯 합니다.

 

티스토리 공유 버튼 무작정 따라 하기

  1. 코드, 이미지 다운로드

  2. 버튼 이미지 티스토리에 업로드

  3. 티스토리 HTML 태그에 적용

위의 차례 대로 무작정 따라 하시면 할 수 있도록 포스팅을 해보았습니다.

1. 코드, 이미지 다운로드


소셜 공유 버튼 최종 소스.txt
0.00MB
소셜 공유 이미지.zip
0.01MB

첨부된 소스코드와 이미지를 다운 받습니다.

2. 버튼 이미지 티스토리에 업로드


다운 받은 '소셜 공유 이미지.zip' 파일 압축을 풀고,

티스토리에 업로드를 합니다.

업로드는 티스토리 편집 메뉴에서

꾸미기 메뉴 > 스킨 편집 > HTML 편집 부분으로 들어갑니다.

그리고 상단의 파일 업로드를 선택하여 이미지 파일을 하단의 추가 버튼을 이용하여 추가를 해 줍니다.

다중 선택하여 업로드가 가능합니다.

3. 티스토리 HTML 태그에 적용


공유 버튼 코드를 자신의 티스토리 블로그에 적용하기 위해서,

꾸미기 메뉴 > 스킨 편집 > HTML 편집 부분으로 들어갑니다.

저는 티스토리의 본문 하단 중앙에 위치하는 공유 버튼을 예로 들겠습니다.

티스토리 본문 치환자는 입니다.

본문 치환자를 기준으로 아래처럼 배치 위치를 정할 수 있습니다.

그러면 저는 본문 아래였기 때문에,

본문 치환자 의 아래에 첨부된 코드를 삽입하겠습니다.

HTML 태그 창에서 'Ctrl+F' 버튼를 하시고 검색하시면 쉽게 찾을 수 있습니다.

본문 치환자

바로 밑에 첨부된 코드를 메모장 같은 에디터로 열어서 복사/붙여넣기 합니다.

코드를 복사/붙여넣기 한 모습입니다.

그리고 오른쪽 상단의 적용 버튼을 누르면 끝입니다. 하하~!!

<!-- -->은  주석으로 각 코드에 대한 설명을 써 넣었습니다. 코드 실행상에는 아무런 문제가 없습니다.

티스토리 공유 버튼 관련글

Facebook 공유 버튼

Twitter 공유 버튼

카카오톡, 카카오스토리 공유 버튼

네이버, 밴드 공유 버튼

FlipBoard 공유 버튼

728x90
반응형
의 아래에 첨부된 코드를 삽입하겠습니다.

HTML 태그 창에서 'Ctrl+F' 버튼를 하시고 검색하시면 쉽게 찾을 수 있습니다.

본문 치환자

728x90
반응형

이전편에서는 소셜 공유 버튼의 각각의 코드를 얻고,

티스토리에 적용을 하는 세부적인 부분부터 다루었습니다.

 

최종편에서는 지금까지 했던,

페이스북, 트위터, 카카오스토리, 플립보드, 네이버, 밴드, 카카오톡의

이전 코드를 전부 모아서 만든 최종편입니다.

 

위 이미지와 같이 사용하실 경우, 최종편 소스와 이미지만 다운을 받아서 사용하시면 됩니다.

단, 카카오 버튼의 소스에서 사용하는 자바스크립트는 받아서 사용하는 것이 나을듯 합니다.

 

티스토리 공유 버튼 무작정 따라 하기

  1. 코드, 이미지 다운로드

  2. 버튼 이미지 티스토리에 업로드

  3. 티스토리 HTML 태그에 적용

위의 차례 대로 무작정 따라 하시면 할 수 있도록 포스팅을 해보았습니다.

1. 코드, 이미지 다운로드


소셜 공유 버튼 최종 소스.txt
0.00MB
소셜 공유 이미지.zip
0.01MB

첨부된 소스코드와 이미지를 다운 받습니다.

2. 버튼 이미지 티스토리에 업로드


다운 받은 '소셜 공유 이미지.zip' 파일 압축을 풀고,

티스토리에 업로드를 합니다.

업로드는 티스토리 편집 메뉴에서

꾸미기 메뉴 > 스킨 편집 > HTML 편집 부분으로 들어갑니다.

그리고 상단의 파일 업로드를 선택하여 이미지 파일을 하단의 추가 버튼을 이용하여 추가를 해 줍니다.

다중 선택하여 업로드가 가능합니다.

3. 티스토리 HTML 태그에 적용


공유 버튼 코드를 자신의 티스토리 블로그에 적용하기 위해서,

꾸미기 메뉴 > 스킨 편집 > HTML 편집 부분으로 들어갑니다.

저는 티스토리의 본문 하단 중앙에 위치하는 공유 버튼을 예로 들겠습니다.

티스토리 본문 치환자는 입니다.

본문 치환자를 기준으로 아래처럼 배치 위치를 정할 수 있습니다.

그러면 저는 본문 아래였기 때문에,

본문 치환자 의 아래에 첨부된 코드를 삽입하겠습니다.

HTML 태그 창에서 'Ctrl+F' 버튼를 하시고 검색하시면 쉽게 찾을 수 있습니다.

본문 치환자

바로 밑에 첨부된 코드를 메모장 같은 에디터로 열어서 복사/붙여넣기 합니다.

코드를 복사/붙여넣기 한 모습입니다.

그리고 오른쪽 상단의 적용 버튼을 누르면 끝입니다. 하하~!!

<!-- -->은  주석으로 각 코드에 대한 설명을 써 넣었습니다. 코드 실행상에는 아무런 문제가 없습니다.

티스토리 공유 버튼 관련글

Facebook 공유 버튼

Twitter 공유 버튼

카카오톡, 카카오스토리 공유 버튼

네이버, 밴드 공유 버튼

FlipBoard 공유 버튼

728x90
반응형

바로 밑에 첨부된 코드를 메모장 같은 에디터로 열어서 복사/붙여넣기 합니다.

코드를 복사/붙여넣기 한 모습입니다.

그리고 오른쪽 상단의 적용 버튼을 누르면 끝입니다. 하하~!!

<!-- -->은  주석으로 각 코드에 대한 설명을 써 넣었습니다. 코드 실행상에는 아무런 문제가 없습니다.

티스토리 공유 버튼 관련글

Facebook 공유 버튼

Twitter 공유 버튼

카카오톡, 카카오스토리 공유 버튼

네이버, 밴드 공유 버튼

FlipBoard 공유 버튼

728x90
반응형

카테고리의 글 목록 더보기

댓글 영역

Please Enable JavaScript!
Mohon Aktifkan Javascript![ Enable JavaScript ]