티스토리 UI 업데이트 전에는 아래와 같이 포스팅 내용을 공유할 수 있는 버튼이 있었습니다.
포스팅 내용을 SNS에 공유하면 뭐가 좋을까요?
검색 유입 뿐 아니라 추가적인 트래픽을 얻을 수 있습니다.
특히 백링크를 남긴다는 점에서 SEO에 유리한데요.
하지만 지금은 이 버튼이 없어졌죠.
이번 포스팅에서는 SNS 링크버튼을 차근차근 만들어보겠습니다.
아이콘 이미지 적용 방법
이미지 다운로드
예제에서 사용한 이미지를 그대로 사용하고 싶으시면 위 파일을 다운받으세요.
다른 디자인을 원한다면 아래 사이트에서 원하는 아이콘을 검색해 사용하셔도 됩니다.
단, 다운 받은 파일명은 제가 제공한 파일명과 일치시켜주세요.
(추후 제공드릴 코드가 해당 파일명으로 맵핑되어 있습니다.)
이미지 적용
(1) HTML 편집 접속
(2) 파일 업로드
파일 업로드탭에서 '추가' 버튼을 눌러 이미지 파일들을 등록해주세요.
등록이 되면 아래와 같이 추가된 이미지 파일을 확인할 수 있습니다.
'적용' 버튼을 눌러 완료해 주세요.
HTML 적용하기
(1) HTML 코드 다운로드
아래 HTML 코드를 다운로드합니다.
(2) HTML 코드 적용하기
Ctrl+F 를 눌러 "article_rep_desc"을 검색합니다.
검색하면 2개의 결과가 나올 건데요.
두 번째 "article_rep_desc" 위치로 가주세요.
그 후 "article_rep_desc" 아래 부분에 위와 같이 코드를 붙여 넣기 합니다.
CSS 적용하기
이제는 CSS를 통해 HTML을 디자인할 차례입니다.
(1) CSS 코드 다운로드
아래 CSS 파일을 다운로드합니다.
(2) CSS 코드 적용하기
CSS 제일 하단에 CSS 코드를 붙여 넣기 한 후 '적용' 해주세요.
자바스크립트 적용하기
카카오톡은 제대로 동작하기 위해 간단한 자바스크립트가 필요합니다.
(1) 자바스크립트 코드 다운로드
아래 코드를 다운로드합니다.
(2) 자바스크립트 코드 적용하기
태그 내부에 자바스크립트 코드를 붙여 넣기 후 "적용" 합니다.
커스터마이징
크기조절
HTML 코드에 에서 각 a태그를 보면 width라는 속성 값이 있습니다.
이 값을 조절하면 아이콘 크기를 조절할 수 있는데요.
직접 조정해 보면서 여러분이 원하는 크기로 만들어보세요.
이미지 둥글게
CSS 코드에서 "border-radius" 값을 조절해보세요.
이 숫자 값을 통해 아이콘의 둥근 정도를 조절할 수 있습니다.
'재테크 | 부업 > 블로그 | 구글 애드센스' 카테고리의 다른 글
| 매력 적인 팝업창 만드는 방법(트래픽 유도) (1) | 2024.03.27 |
|---|---|
| 블로거에게 필요한 이미지 편집 툴(저작권, 초상권, 유사이미지 해결) (3) | 2024.01.06 |
| 꼬예의 황금 키워드 찾기 루틴 (2) | 2023.12.26 |
| 티스토리 구글 서치콘솔 직접 등록 방법 (5) | 2023.12.05 |
| 티스토리 도메인 연결 방법(호스팅케이알) (2) | 2023.11.30 |
댓글