티스토리 글/티스토리 운영 가이드

12. 티스토리 사이드바에 인스타그램 배너 링크 넣는 법

moxnox111 2020. 12. 23. 01:24
반응형

지금부터 포스팅할 내용은 검색해도 안 나오고 내가 처음 만든 방법이다. 물론 아래 내용 각각은 이미 글이 있다. 그러나 모아서 '티스토리 블로그 사이드바에 인스타그램 배너를 넣어 누르면 링크 타고 인스타그램에 들어 갈 수' 있게 만드는 방법을 포스팅한 거는 내가 처음일 것이다.

 

티스토리 블로그 pc화면 오른쪽 사이드바 instagram 배너 삽입 완성본

 

배너를 넣었는데 한가지 단점은 새 창으로 인스타그램이 안 열리고 그 창 그대로 인스타그램 들어가진다는 것이다.

1. 미리캔버스에서 배너 만들기

2. 티스토리 블로그 관리에서 플러그인 설정하고 사이드바에 삽입하기

3. 인스타그램 링크 주소 만들기

4. 배너 이미지 URL 만드는 방법

티스토리 사이드바에 인스타그램 배너 링크 넣는 법

1. 미리캔버스에서 배너 만들기

사이드바에 배너를 삽입하려면 가장 먼저 누를 이미지를 만들어야 한다. 미리캔버스에서 만든다.

www.miricanvas.com/

 

미리캔버스

저작권 걱정 없는 완전 무료 디자인툴 미리캔버스

www.miricanvas.com

 

 

나는 크기를 300*60으로 했다. 가로 세로 비율이 5:1이다. 직접 숫자 일일이 넣어가며 가장 조화로운 비율을 찾은거니 나는 300*60을 추천한다. 크기 설정은 px을 클릭한 뒤 직접 입력에서 숫자를 입력한다. 왼쪽 값이 가로이고 오른쪽 값이 세로이다.

 

 

인스타그램 로고와 글자는 왼쪽 메뉴에서 요소-검색에서 'instagram'을 검색해서 이미지를 넣었다.

왼쪽 정사각형 인스타그램 로고와 오른쪽 instagram 글자 사이 로고는 내가 직접 만든 로고이다. 4 블로그 모두 이 로고가 설정되어 있다.

 

네모 박스로 한 번 감싸준 이유는 내 블로그 스킨 바탕이 흰색이므로 배너와 구분이 안 가 배너를 구분하기 위해서이다. 예쁜 분홍색 색감으로 감아주니 인스타그램 감성이다ㅋㅋ

 

이미지 완성되었으면 저장하고(저장하려면 미리캔버스 가입해야 함) 다운로드 받는다. 나는 투명하지 않은 바탕으로 다운받았다. PNG

2. 티스토리 블로그 관리에서 플러그인 설정하고 사이드바에 삽입하기

 

블로그 관리 메뉴-플러그인
배너 출력 설정

 

티스토리 블로그 관리 홈페이지의 왼쪽 메뉴에서 플러그인에 들어가 '배너 출력'을 찾아 적용을 누른다.

 

꾸미기-사이드바

 

플러그인 '배너 출력'을 적용한 뒤 왼쪽 메뉴에서 꾸미기-사이드바에 들어간다.

 

[플러그인] 이미지 배너출력

 

처음에는 [플러그인]이 왼쪽 기본 모듈에만 있다. [플러그인] 이미지 배너출력을 오른쪽 +를 눌러 사이드바1,2 중 원하는 곳에 추가한다. 나는 사이드바2가 적당할 거 같아서 여기로 했으니 참고하도록.

 

 

추가된 플러그인에 마우스를 갖다대면 '편집' 버튼이 뜬다. 편집을 눌러 이름과 이미지 URL, 연결할 URL을 입력하면 끝이다. 이미지 배너출력 창에서 이름은 본인이 구분하기 위한 용도이므로 아무렇게나 해도 무관.

3. 인스타그램 링크 주소 만들기

instagram 주소는 www.instagram.com/mox111cs와 같이, com 다음에 슬러시(/)하고 자신의 인스타그램 사용자 이름을 적으면 된다.(이름 말고 '사용자 이름')

 

사용자 이름 말고 그냥 '이름'이 아마 주소일 것이다. 나는 동일해서~ 신경 안 쓰고 그대로 적었다.

 

이제 이미지 URL만 남았다.

 

4. 배너 이미지 URL 만드는 방법

essedrop.com/

 

Essedrop 에스드롭 - 파일을 인터넷에 올리는 가장 빠른 방법

파일을 떨구기만 하세요, 바로 사용할 수 있습니다 - 컴퓨터에있는 파일을 간단하고 빠르게 인터넷으로 올리고 필요한 곳에서 바로 사용할 수 있는 Essedrop 과 함께 파일 공유 및 Markdown 에디터 부

essedrop.com

 

 

에스드롭 사이트에 들어가 '바로 업로드' 누르면 회원가입하라고 한다. 이 사이트는 회원가입하고 이용할 수 있다. 처음 들어보는 사이트라 무서워하며 회원가입했는데 이미지 URL은 잘 추출되었다.

 

 

아까 미리캔버스에서 만들고 저장한 로고를 업로드하고 이미지를 클릭하면 URL이 복사된다.

 

 

그리고 플러그인 편집에 돌아와서 이미지 URL을 붙여넣으면 완료된다. 단점은 복사된 URL이 https://까지 포함되어 있어서 기존에 입력된 https://와 중복되어서 지워줘야 한다는 거다.

 

완료! 꼭 '사용자 모듈에 저장' 체크된 상태로 확인하기

 

확인 누르면 끝인데 나는 꼭 '사용자 모듈에 저장' 체크된 상태로 확인을 누르라고 권하고 싶다.

 

 

 

 

내 인스타그램 주소는 www.instagram.com/mox111cs이다. 사업 시작하면서 홍보용으로 facebook과 instagram 앱도 깔고 회원가입도 했는데 facebook보다 instagram이 좋은 거 같다. 배너 만들 때 facebook은 전화번호 인증해야 주소 만들 수 있다는데 나는 사업용 전화번호를 새로 개통할 예정이라 지금은 하기 힘들다. 그리고 공과 사를 구분하고 싶어서이기도 하다. 만약 전화번호를 등록하면 괜히 전화번호에 있는 사람 페이스북에서 내가 추천에 뜰 거 아닌가.

 

인스타그램 이미지는 투명한 배경만 등록이 가능하다. 나는 투명한 배경 체크 안 하고 다운로드 받은 이미지로 하고 싶었는데 업로드가 안 되고 투명한 배경 체크하고 다운 받은 이미지만 업로드 가능해서 바탕이 검은색이다.

 

이제 블로그랑 SNS 같이 하면 시너지가 대단할 거라 생각한다. 만든지 얼마 안 돼 팔로워 1도 없지만 moxnox111 블로그랑 youmox111 블로그 포스팅 내용을 처음에는 업로드하면서 사업에 도움이 되도록 해야겠다.

 

moxnox111 본 블로그-사업, 티스토리
youmox111 부 블로그-닭염소개, 일상
zipmox111 부 블로그-공인중개사
commox111 부 블로그-컴퓨터, 자격증

내가 운영하는 4 블로그이다. zipmox111과 commox111은 공인중개사, 컴퓨터 쪽이랑 인스타그램과 맞지 않을 거 같아서 moxnox111과 youmox111 블로그만 배너를 넣었다.

 

그리고 3. 인스타그램 링크 주소 만들기와, 4. 배너 이미지 URL 만드는 방법같은 경우 이 글에 꼭 필요해서 넣었지만, 이거는 별도로도 도움이 될만한 정보여서 youmox111에 포스팅하려고 한다.

반응형